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: AJAX, CSS3, HTML, HTML5, Podcast
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?
Da das Tutorial von der DVD ist, heißt „hier“ auf der DVD…
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.
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
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
Hi,
einfach das „?v=2“ in der index.html entfernen, ggf. DW neu starten falls er die Änderung noch nicht erkennt.
Mhm,
hast Dir ja richtig Mühe gemacht.
Danke dafür, gut erklärt, gefällt mir.
Hi Pascal,
danke für das hilfreich und informative Tut. Ich fand es eine sehr runde Sache!
Hallo. Das Video lässt sich leider nicht starten.
Mich würde es sehr Interessieren.
Danke für die behebung des Fehlers.
Gruss dressa
Hi,
also bei mir funktioniert das Video ohne Probleme und Vimeo hat aktuell auch keine Probleme soweit ich weiß.
Hallo,
wo kann man sich denn das Video-Tut herunterladen?
Hi,
ist doch oben verlinkt: Hier auf der Webdesign DVD 2: http://goo.gl/bWEFf
Beste Grüße
Pascal
Hallo Herr Bajorat,
ich habe mir die CD angeschaft und finde sie sehr gut.
Vielen Dank, freut mich wenn sie Ihnen gefällt.
Hallo Pascal,
ein wirklich nettes Tutorial.
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. 🙂
Hi,
danke für das Feedback und viel Spaß.
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.
Ich weiß nicht ob ich das als Lob werten soll oder als Kritik 😉
von jedem etwas, obwohl mehr lob als kritik.
hast übrigens post von mir bekommen