HTML / CSS, Podcast

Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen – Tutorial

WordPress Entwickler und Webdesigner

In diesem Video-Training zeige ich euch wie ihr eine komplette Webseite in HTML5 und CSS3 umsetzt. Dabei fange ich von grundauf mit der PSD-Datei an. Wenn wir die Webseite in HTML5 und CSS3 Programmiert haben, zeige ich euch wie ihr über die Tab-Navigation der Webseite neue Inhalte via AJAX einladen könnt ohne das die eigentliche Seite verlassen werden muss.

Neben dem AJAX Content Loader wird noch ein netter Animations-Effekt programmiert, der die neuen Inhalte ansprechend in die Seite lädt.

Als Basis für dieses Video-Training steht ein Design für eine Hebamme von Matthias Petri. Das Video Training stammt von der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2 und soll euch einen Einstieg in die Möglichkeiten von HTML5 und CSS3 bieten.

Wenn ihr weiteres Lernmaterial zu moderner Webentwicklung sucht, dann kommt ihr um die neue DVD kaum herum, also einfach einmal anschauen: PSD-Tutorials.de Webdesign Workshop DVD Vol. 2. Ich habe die DVD bereits vor ein paar Wochen in einem ausführlichen Artikel vorgestellt.

Podcast Info:
Titel: Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen
Autor: Pascal Bajorat
Länge: 81 Min
Dateigröße: 360 MB
Beschreibung: In diesem Video-Training möchte ich euch zeigen, wie ihr eine komplette Webseite auf HTML5- und CSS3-Basis umsetzen könnt. Dabei verwenden wir natürlich nicht nur den neuen HTML5-Doctype, sondern auch einige der neuen HTML5-Tags und CSS3-Funktionen wie box-shadow, border-radius, text-shadow usw. Zusätzlich zeige ich euch, wie Ihr die Seite komplett auf AJAX-Basis aufbauen könnt. Das heißt: Content wird mittels AJAX geladen und nicht, indem man eine komplett neue HTML-Seite aufruft. Für die Umsetzung mit HTML5 und CSS3 verwende ich das HTML5Boilerplate: http://html5boilerplate.com/

Für alle HTML5 & CSS3 Interessierten gibt es hier einen weiteren Einblick in CSS3 und zwar: HTML5 & CSS3 Video-Training – Animationen mit CSS3. Ich wünsche euch viel Spaß mit den Video-Podcast Folgen und hoffentlich auch dem HTML5 & CSS3 Video-Training.

Alle Arbeitsdateien zu dem Video-Training gibt es auf der neuen PSD-Tutorials.de Webdesign Workshop DVD Vol. 2

Eine Video zur Design-Erstellung gibt es hier: Website im kinderfreundlichen Look & Feel

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

23 Antworten zu “Komplette Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen – Tutorial”

  1. Ein cooles Tutorial, gefällt mir sehr gut!
    Erwähnst du darin nicht, dass die Arbeitsdateien dazu irgendwo hier zu finden sind? Oder habe ich das falsch verstanden und sie sind nur auf der DVD?

  2. mit HMTL und CSS wird nicht programmiert =)

    sonst ganz nette Folge, wobei ich niemals ganze Seiten in dieser Form nachladen würde. Man nimmt den Nutzern damit die Möglichkeit auf Unterseiten zu linken, die Orientierung anhand der URL fehlt und wirklich schneller läd das auch alles nicht, da der größte Teil der Seite eh gecached wird.

    • Ja schon klar, HTML / CSS sind Auszeichnungssprachen, dennoch hat sich „programmieren“ bei HTML und CSS einfach eingebürgert. Das mit dem AJAX kann ist nicht ganz richtig. Hauptsächlich ist es einfach als jQuery AJAX Beispiel gedacht, eine URL Form wie domain.de/#!/seite ist natürlich auch möglich, machen Facebook und Twitter ja auch so. Natürlich macht es Sinn die Inhalte aus einer JSON Datei zu laden um Speicher zu sparen. Doch so wie ich es gemacht habe ist halt ein Fallback für JavaScript deaktivierte Browser verfügbar.

  3. Auch wenn sich „Globusse“ und „Atlasse“ bei manchen Leuten in die Sprache einschleicht, muss man diese falschen Begriffe nicht verwenden, vor allem wenn man es besser weiß.

    Bei Facebook und Twitter ist die Anwendung auch sinnvoll, weil sich die ständig neue Inhalte hinzukommen. „Statische“ Seiten per Ajax nachzuladen finde ich unsinnig. Sehe da keinerlei Nutzen. Als Beispiel, von mir aus, aber sehe das auch sonst zu oft im Einsatz.

    Wenn du KBs sparen willst könntest du z.B. unsinnige Selektoren kürzen, wie #main div#inner p, erstmal warum ne ID? Dann brauchst du das div vor der Raute erst Recht nicht und eigentlich würde #main p doch auch reichen? Da kannst du einfach und schnell Ladezeiten und die Performance verbessern.

    Verstehe auch nicht warum du das ganze Boilerplate inkl. modernizr einbaust, wenn du dann keine Funktion davon verwendest?

    • Wenn ich es nicht gemacht hätte wären die Kommentare leer geblieben und du hättest nicht über so etwas banales gemeckert 😉

      Es ist ganz einfach: Ein Tutorial muss irgendwo anfangen und aufhören und das komplette BoilerPlate gehört nicht dazu. Deshalb sage ich in dem Tutorial ganz klar, dass es eine super Sache ist und man sich das ganze auf der Webseite weiter anschauen soll!!

      Ich hätte auch noch erklären können wie man das Layout macht und eine richtige Suchmaschinenoptimierung oder die komplette URL für die AJAX Funktion gebaut wird. Aber irgendwo ist halt Schluss.

      Ich freue mich allerdings sehr über eine Video-Podcast Folge von dir in der du das komplette BoilerPlate erklärst, dass wäre doch was oder?

    • Wenn du mir in HTML eine Zählschleife programmiert hast, dann nehme ich dir gerne das Video auf 😉 Ansonsten gibt es Videos darüber auf der Webseite von denen. Meinte damit nur, wenn man nur Teile davon verwendet, sollte man den restlichen Müll einfach rauswerfen oder gar nicht erst rein kopieren.

      Und „Boilerplate“ schreiben die Entwickler des Pakets genau wie ich es getan habe. #fail

  4. Hallo Pascal,

    erstmal ein herzliches Dankeschön für dieses informative Tutorial!

    Obwohl ich kein Programmierer, oder besser gesagt kein Auszeichnungssprachen Profi bin (was für eine Krümelkackerei), habe ich doch viel daraus gelernt. Wirklich klasse!

    Erlaube mir bitte eine Frage. Ich arbeite mit Dreamvweaver CS5 und habe ein Problem mit dem BoilerPlate. Ich habe das BoilerPlate heruntergeladen und nach dem entpacken die Daeien in einen Ordner (zum Testen) kopiert. So weit, so gut, ich habe dann in Dreamveawer die index.html geöffnet und ein bisschen daran gearbeitet. Als ich dann jedoch eine neue CSS-Regel erstellen und speichern wollte wollte, fingen die Probleme an. Die style.css wird ja bei Dreamveawer gleich mit geöffnet, inder index.html wird aber auf eine style.css?v=2 verlinkt? Beim seichern pasiert nun folgendes: Alle CSS Regeln des BoilerPlate sind weg und nur meine eigenen Regeln stehn in der style.css. Da wird eine Funktion ausgeführt, die ich nicht verstehe?
    Kannst Du mir sagen warum das nicht klappt?

    @Felix: Es wundert mich, dass Du BoilerPlate (das ist ein Eigenname) falsch schreibst, wo Du doch sooooooooooo schlau bist.

    Viele Grüße
    Bernd

  5. Hallo. Das Video lässt sich leider nicht starten.
    Mich würde es sehr Interessieren.
    Danke für die behebung des Fehlers.
    Gruss dressa

  6. Heute wollte ich anfangen eine Website neu aufzusetzen, modern und optimiert. Das fängt bei mir immer mit einem Brainstorming und Inspiration aus dem Web an.

    HTML 5, CSS3 und AJAX, damit habe ich kaum Kontakt gehabt. Das Tutorial hat mich inspiriert und mir Mut gemacht einen weiteren Schritt in Richtung modernes Webdesign zu wagen.

    Danke für dieses interessante Video. Und nun mach ich mich ran ans Werk. 🙂

  7. Hallo ;D

    Ich hab mir das Video noch nicht angesehen. Bin einer noch der „alten“ die mit SelfHTML sich das Webseitengestalten selbst beigebracht haben. Früher gab es solche tutorial nur in reine Leseform, heute gibt es als Video. Finde ein solches Video nicht schlecht, nur da muss alles zusammenpassen, nämlich der da das tutorial erstellt muss auch die richtige Erklärtechnik und auch passendene Stimme haben.
    Trotzdem finde ich diese Art des Erklärens sehr intressant.

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.