HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2015-04-20T08:45:56Z t3n Redaktion http://t3n.de/tag/html5 CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt http://t3n.de/news/css-html5-templates-quellen-605578/ 2015-04-20T08:45:56Z
Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt …

Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt werden. Einige Template-Seiten bieten zudem Support für einen schmalen Taler an.

1. Templated

Bildschirmfoto 2015-04-17 um 13.42.41
(Screenshot: templated.co)

Auf Templated findet ihr über 800 kostenlose CSS- und HTML5-Templates, die unter einer Creative-Commons-Lizenz veröffentlicht wurden. Die können auch für kommerzielle Zwecke genutzt werden, sofern sichtbar Credits angegeben sind.

Zur Website

2. Pixelarity

HTML5 CSS Templates 9
(Sreenshot: pixelarity.com)

Über 50 moderne Templates findet ihr bei Pixelarity. Die Templates sind mit und gebaut und laufen unter einer Creative-Commons-Lizenz. Pixelarity kostet 19 Euro für drei Monate und bietet unbegrenzten Zugriff auf 58 Templates inklusive Support. Die Templates können auch nach Ende der Laufzeit weiterverwendet werden – nur der Support endet dann.

Zur Website

3. html5up

HTML5 CSS Templates 8
(Screenshot: html5up.net)

Html5up bietet 29 kostenlose Templates direkt zum Download. Sie laufen ebenfalls unter der Creative-Commons-Lizenz.

Zur Website

4. Themeforest

HTML5 CSS Templates
(Screenshot: themeforest.net)

Die Templates auf Themeforest sind zwar nicht kostenlos, dafür ist die Auswahl enorm. Mehr als 6.000 HTML5-Themes findet ihr hier. Über die Sidebar könnt ihr die Suche unkompliziert eingrenzen. Die Preise starten bei fünf Euro.

Zur Website

5. OS Templates

HTML5 CSS Templates 2
(Screenshot: os-templates.com)

Bei OS-Templates findest du eine Vielzahl von kostenlosen Templates für Unternehmen, Online-Shops oder Blogs. Vor allem findest du hier aber auch über hundert HTML-Basic-Templates. Die Richtlinien für die Credits bei der Nutzung von kostenlosen Templates findets du hier.

Zur Website

6. w3layouts

HTML5 CSS Templates 4
(Sreenshot: w3layouts.com)

Die Templates bei w3layouts.com sind in mehr als 30 Kategorien unterteilt und kostenlos. Mit einer Spende ab zehn Dollar kannst du jedoch Backlinks zu w3layouts.com ausschalten. Die Lizenzbedingungen findest du hier.

Zur Website

Viele weitere Template-Quellen findest du auf unserer Themen-Seite „Templates“.

]]>
Melanie Petersen
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 8) http://t3n.de/news/10-hilfreiche-tutorials-quellen-8-603929/ 2015-04-07T08:53:29Z
HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und …

HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der achte Teil.

Tagtäglich stolpern wir über wirklich tolle Tutorials. Leider verschwinden sie zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-it-later-Services. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Flexbox für den Einsteiger

Warum ist Flexbox so wichtig, so gut, so innovativ? Diese Fragen beantwortet euch Chris Wright anhand von praktischen Beispielen in seinem Blog.

PNG ist tot? So nutzt ihr Vector-icons

„Es ist Zeit das PNG in den Ruhestand zu schicken“, sagt Vincent Le Moign. Ob er Recht hat oder nicht lest ihr in seinem Artikel. Ich sage ja. Und was sagt ihr zu diesem polarisierendem Thema?

Klicken ist nicht mehr ausreichend – doch wie geht bessere Interaktion?

Bildschirmfoto 2015-04-02 um 16.00.14

Das Smashing Magazine gibt einen tiefen Einblick in die verschiedensten Möglichkeiten der User-Interaktion – und zeigt, wie mit verschiedenen Eingabe-Methoden auf unterschiedlichen Geräten umgegangen werden kann.

„Nach '600 Meters' rechts abbiegen“

Bildschirmfoto 2015-04-02 um 16.01.03

Den Plural zu bilden mag für Menschen einfach sein, aber wie sieht es bei mehrsprachigen JavaScript-Apps aus? A List Apart geht dem Problem auf den Grund und validiert das ICU-Message-Format.

So funktioniert der Fixed-Background-Effekt

Bildschirmfoto 2015-04-02 um 16.01.53

Wir haben den Effekt alle schon irgendwo gesehen: Fixierte Hintergründe die optisch weit über position:fixed; hinaus gehen. Hier findet ihr ein simples Template, das euch den Effekt näher bringt.

Bessere Interfaces mit SVGs

Bildschirmfoto 2015-04-02 um 16.03.33

Eine aufschlussreiche Präsentation von Sara Soueidan: Wie nutzt man SVGs, um bessere Interfaces bauen zu können – und warum sollte man das tun? Ein guter Einstieg zu einem relativ komplizierten Format.

Animations-Prinzipien im Web

Bildschirmfoto 2015-04-02 um 15.59.07

Animationen können ein sehr starkes Werkzeug sein, um das UX zu erhöhen. Dieser Artikel beleuchtet verschiedene Aspekte der Prinzipien und zeigt Vor- und Nachteile auf. Ein Muss für Frontend- und Interaction-Designer.

Quantity-Queries in CSS

Bildschirmfoto 2015-04-07 um 10.28.18

Ein grandioser Artikel zum Thema Responsive-Web-Design und dynamischer Inhalt. Heydon Pickering zeigt an einem praktischen Beispiel, wie er Listen dynamisch anpasst – ohne JavaScript.

Icon-Kit: Responsive-Line-Icons

Bildschirmfoto 2015-04-02 um 16.09.14

Ein Icon in drei Auflösung ist nicht genug. Dieses Icon-Pack liefert euch drei Größen für drei unterschiedliche Auflösungen. Oder anders ausgedrückt: 300 Icons für dein Responsive Design.

Input-Fields und Labeling im Web

Bildschirmfoto 2015-04-02 um 16.05.03

Diese Tutorial zeigt euch eine interessante Möglichkeit, wie ihr die Lables eurer Input-Felder dynamisch für mobile Geräte anpassen könnt. Ab IE 9+ ist der Code auch Cross-Browser-fähig.

Wenn euch diese Liste gefallen hat, findet ihr hier den sechsten und hier den siebten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 7) http://t3n.de/news/10-hilfreiche-tutorials-quellen-7-597947/ 2015-03-07T09:00:30Z
HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und …

, CSS3, UX-Design, Icon-Packs & Co.: In unserer Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der siebte Teil.

Tagtäglich stolpern wir über atemberaubende Tutorials. Leider verschwinden sie zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Das Template für deine iOS-8-Apps

Bildschirmfoto 2015-03-06 um 14.40.23

Hier findet ihr ein umfangreiches iOS8-App-Template. Wenn ihr Photoshop nutzt und für iPhone, iPad oder die Apple Watch herstellt, dann ist dieses das richtige für euch.

HTML5-Boilerplate in neuer Version

Bildschirmfoto 2015-03-06 um 14.40.05

„Das populärste Frontend-Framework des Webs“, die HTML5-Boilerplate, ist in der fünften Version erschienen. Lasst euch also nicht die kleinen Optimierungen entgehen.

Generalist oder Spezialist? A List Apart geht darauf ein

Bildschirmfoto 2015-03-06 um 14.42.56

Ein Erfahrungsbericht von Garin Evans zur Frage: Generalist versus Spezialist und wie man mit seinem restlichen Potenzialen umgehen kann. Absolut lesenswert.

SVG-Icons, die sich gewaschen haben

Bildschirmfoto 2015-03-06 um 14.45.30

Inspiriert von Sara Soueidans Text liefert Transformicons Animationen für Icons und Symbole – realisiert mit SVG und CSS. Gerade für mobile Interfaces sind transformierbare Icons sehr hilfreich.

iOS-Animationen mit Swift

Bildschirmfoto 2015-03-06 um 14.49.13

Spring ist eine Swift-Bibliothek, die euch das Erstellen von iOS-Animationen erleichtert. Einen Blick wert, denn Spring ist auch für Einsteiger geeignet.

Datedropper: Der Name ist Programm

Bildschirmfoto 2015-03-06 um 14.51.53

Gute Date-Picker gibt es nicht wie Sand am Meer. Mit Datedropper könnte sich das ändern. Seht euch dieses Plugin an, es zahlt sich aus.

I am the fold

Bildschirmfoto 2015-03-06 um 14.54.33 1

„I am the fold“ ist ein interressantes Projekt, das zeigen soll, wie tückisch responsive Design sein kann. Ein Beweis, dass es sich nicht lohnt, auf Basis des Viewports zu entwickeln?

BEM? SMACSS? RSCSS!

Bildschirmfoto 2015-03-06 um 14.57.42

Ein interessantes Konzept für skalierbare CSS-Strukturen hat Rico Cruz auf GitHub veröffentlicht. Ihr könnt euch auch daran beteiligen. Ein Muss für Frontend-Designer.

UI-Kit: NumberOne

Bildschirmfoto 2015-03-06 um 15.19.02

NumberOne wiegt ganze 15 Megabyte und ist ein speziell für Sport-Websites konzipiertes UI-Kit. Die Design-Elemente sind als Vektoren in der PSD-Datei gespeichert und sind für den Retina-Einsatz geeignet.

Vertrauen ist gut, Kontrolle ist besser

Bildschirmfoto 2015-03-06 um 15.20.49

Mit is.js könnt ihr unter anderem Regular Expressions, Typen und Zeitangaben überprüfen. Das Skript setzt keine Abhängigkeiten voraus und ist über npm und Bower verfügbar.

Wenn euch diese Liste gefallen hat, findet ihr hier den fünften und hier den sechsten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 6) http://t3n.de/news/10-hilfreiche-tutorials-quellen-6-590867/ 2015-01-31T14:27:51Z
HTML5, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue Tutorials und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler …

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der sechste Teil.

Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden sie zu oft aus Zeitmangel zwischen anderen Lesezeichen im Browser oder bei Read-It-Later-Webservices. Wir wollen das ändern und zeigen euch die besten Tutorials für die coolste Berufsschicht: Webworker.

Bildschirmfoto 2015-01-29 um 11.15.05

Wie ihr den den @font-face-palm vermeidet

Schriften mithilfe von @font-face einzubetten, ist eine oft genutzte Möglichkeit, um Besuchern mehr als nur Arial anbieten zu können. Leider hat diese Methode auch einige Probleme mit der Performance – die dieser Artikel zu beheben versucht.

Bildschirmfoto 2015-01-29 um 11.15.22

CSS im Print: Freund oder Feind?

Mit CSS können Entwickler Dokumente auch für den Druck vorbereiten – relativ gut sogar. Das Smashing-Magazine liefert einen tiefen Einblick in die Möglichkeiten von CSS für Print. Auch spannend: Wie ihr CSS für akademische Publikationen verwenden könnt.

Bildschirmfoto 2015-01-29 um 11.15.35

Schmerzfreie Entwicklung mit SASS

Präprozessoren zu nutzen, ist in Ordnung und legitim. Der Artikel auf A List Apart zeigt euch Best-Practice-Beispiele im Detail. Lesenswert.

Bildschirmfoto 2015-01-29 um 11.15.53

2014-Retrospektive von Luke Wroblewski

Luke Wroblewski schreibt seit zehn Jahren jährliche Roundups zu den seiner Meinung nach besten fünf Artikeln des Jahres, die ich euch nicht vorenthalten will.

Bildschirmfoto 2015-01-29 um 11.16.06

60 Icons für klassische Webprojekte und mehr

Der Designer Yegor Shustov stellt 60 hübsche im PSD-, AI- und EPS-Format zur Verfügung. Dabei könnt ihr die Icons für private, aber auch für geschäftliche Zwecke nutzen.

Bildschirmfoto 2015-01-29 um 11.16.34

Microsofts Spartan und seine Rendering-Engine

Das Smashing-Magazine beleuchtet in diesem Artikel die neue Rendering-Engine hinter Spartan sowie ihre Vor- und Nachteile für Webentwickler. Ein Artikel von einem Microsoft-Entwickler.

Bildschirmfoto 2015-01-29 um 11.16.48

deSVG: SVGs ohne JavaSript und ohne aufgeblähtes HTML

Die Library erlaubt einfaches Entwickeln mit SVGs. Ihr implementiert ein img-Element und gebt die Adresse zu einem SVG an. Das Skript lädt das SVG und bindet es selbstständig im ein.

Bildschirmfoto 2015-01-29 um 11.18.16

CSS4 Selektoren: Was könnte kommen?

Der Artikel beschäftigt sich mit den neuesten CSS-Vorschlägen. Natürlich kann sich jede Spezifikation noch ändern, aber einen Blick sind die Vorschläge jetzt schon wert.

Bildschirmfoto 2015-01-29 um 11.19.54

Bewegung als Faktor für gute UX in Apps und Websites

Ein sehr intressanter Artikel über Bewegung in Apps und auf Websites – und wie man sie umsetzen kann. „We’re not getting better, the interfaces are!“ Ein Artikel für die Emulation von physikalischen Bewegungen im UX-Design. Lesenswert.

Bildschirmfoto 2015-01-29 um 11.19.25

Flexbug: Ein Spickzettel für Flexbox-Bugs

Flexbox wird unser Leben verändern, wie es damals Floats getan haben – leider gibt es noch einige Probleme bei der Browser-Unterstützung. Flexbug ist eine auf GitHub kuratierte Liste von Workarounds, um Flexbox besser in Projekten integrieren zu können. Stark!

Wenn euch diese Liste gefallen hat, findet ihr hier den fünften und hier den vierten Teil der Serie.

Welche Tutorials habt ihr gefunden, die unbedingt in diese Liste gehören?

]]>
Mario Janschitz
HTML5 Days 2015: Sechs Workshops von Responsive Webdesign bis asynchrones JavaScript [Sponsored Post] http://t3n.de/news/html5-days-2015-sechs-workshops-590325/ 2015-01-29T09:30:20Z
Anzeige Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten …
Anzeige

Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten deutschsprachigen HTML5-Experten. Im Interview erzählt Christian Wetz was für ihn die spannendsten Entwicklungen im Bereich HTML5 und JavaScript sind.Jens Grochtdreis, Peter Kröner, Thorsten Rinne, Sebastian Springer und Christian Wenz leiten die Workshops. Zusammen mit den parallel laufenden JavaScript Days und AngularJS Days können Teilnehmer aus insgesamt 24 Workshops auswählen.

Themen der HTML5 Days sind Responsive Webdesign, Modulare Webentwicklung mit SAAS, asynchrones JavaScript, Modernisierung von Legacy Applikationen auf HTML5 sowie Kommunikations-APIs von JavaScript und HTML5. Alle Infos finden Interessenten auf www.html5-days.de.

Christian Wenz auf den HTML5 Days 2105

wenz_christian_html5-days-2015-(2)Christian Wenz ist Berater, Trainer und Autor zu Webthemen. Er ist Autor und Koautor von über 100 Büchern (unter anderem "JavaScript: Das umfassende Handbuch"), in zehn Sprachen übersetzt, ASP.NET MVP und ASPInsiders-Mitglied sowie Inhaber verschiedener Microsoft-Zertifizierungen. Er unterstützt seit vielen Jahren Mittelständler und Groβkonzerne in den Bereichen Web-Performance, Web-Security und mobiles Web.

Thomas Wießeckel: Christian, die Kommunikation mit JavaScript war in der Vergangenheit arg eingeschränkt - seit HTML5 sich immer weiter verbreitet, gibt es jedoch Licht am Ende des Tunnels. Was hat sich in den letzten Jahren getan?

Christian Wenz: Eine ganze Menge. JavaScript wurde ja bekannterweise in sehr kurzer Zeit erstellt und so ist es verwunderlich, dass es überhaupt ein Sicherheitskonzept gibt. Für heutige Webanwendungen ist dieses Modell allerdings immer wieder ein Hindernis. Glücklicherweise gibt es alte und neue Workarounds. In Sachen Kommunikation gab es in JavaScript lange Zeit wenig – und das, was es gab, war kaum bekannt. Mit der Einführung von XMLHttpRequest hat sich hier etwas getan, in Verbindung mit den Sicherheitseinschränkungen konnte man viel machen, aber eben nicht alles. Neue Protokolle und Standards und auch performantere Kommunikationsmöglichkeiten sind Aspekte, die viele Web-Applikationen bereichern können. Darum geht es auch bei den HTML5 Days.

Thomas Wießeckel: Einige der von dir genannten Features sind nicht neu - und dennoch nicht sonderlich verbreitet. Woher kommt das deiner Meinung nach?

Wenz: Die am häufigsten eingesetzte Kommunikationstechnologie ist wohl XMLHttpRequest und die reicht in vielen Fällen auch aus. Außerdem gibt es immer mehr Frameworks, die selber zwischen Client und Server die beste Kommunikationstechnologie aushandeln, so dass man nicht mehr notwendigerweise einen Einblick braucht, was im Hintergrund passiert. Das finde ich schade und auch bedenklich, erklärt aber auch, wieso einige der Lösungen einen geringeren Bekanntheitsgrad haben. Das will ich im Workshop auf den HTML5 Days ändern.

Thomas Wießeckel: Nun gibt es für viele Probleme entweder die "richtige" aber mächtige Lösung - und einige Workarounds, zum Beispiel die Nutzung von Local Storage als Kommunikationsmöglichkeit über Tabs hinweg. Welche weiteren spannenden Beispiele kennst du noch?

Wenz: Die Messaging-API von JavaScript ist meiner Meinung nach eines der am meisten unterschätzten Features der Sprache – auch wenn die Schnittstelle selber auch für Webworker Pate stand. Die Verwendung von Web-Storage ist auch ein gutes Mittel für Datenaustausch und -persistenz, weil Cookies für Single-Page-Applications meist nicht der optimale Weg sind.

Thomas Wießeckel: Wie schätzt du diesen Forscherdrang der Entwickler ein - ist das der Schub, den die Browserhersteller benötigen, um alle (offenen) Features endlich umzusetzen?

Wenz: Das ist ein typisches Henne-Ei-Problem. Unterstützt man offene Features zu einem frühen Zeitpunkt, mag das gut fürs Ego sein, aber schlecht für die Browserunterstützung der Anwendung. Andersherum haben Browserhersteller möglicherweise weniger Motivation, Features zu implementieren, die bei der Konkurrenz nur wenig Anwender finden. Ich denke dass heutzutage vieles Framework-getrieben ist – bei aktuellen Browsern wird auf die neuesten Features gesetzt, für ältere Systeme gibt es Polyfills. Das entbindet Entwickler nicht von der Pflicht, sich mit den dahinter liegenden Techniken zu beschäftigen, aber es verbreitert die Zielgruppe der Anwendung.

Thomas Wießeckel: Welches der bestehenden und vielleicht noch kommenden APIs findest du am spannendsten?

Wenz: Spannend finde ich WebRTC, aber bis das wirklich überall funktioniert, wird das noch ein wenig dauern. Ansonsten stelle ich bei Kunden immer wieder fest, dass ein Framework, das standardmäßig WebSockets verwendet und als Fallback-Lösung XMLHttpRequest implementiert, in vielen Anwendungsfällen der beste Ansatz ist.

Thomas Wießeckel: Auf den HTML5 Days hältst du einen Workshop zu den Kommunikations-APIs von JavaScript und HTML5. Was erwartet die Teilnehmer darin?

Wenz: Im Wesentlichen die Themen, die wir bei den vorherigen Fragen schon diskutiert hatten. Der Fokus liegt ein wenig stärker auf den „Unsung Heroes“. Beispielsweise geht es auch um WebSockets, aber nicht als Hauptthema. Dafür diskutieren wir verschiedene Ansätze, die Same-Origin-Policy der Browser zu umgehen, von alten Ansätzen wie JSONP bis hin zu neueren Standards wie CORS. Auch Exoten wie etwa Server-Sent-Events kommen vor, aber prinzipiell ist natürlich alles mit unzureichendem Browser-Support für die Praxis nur wenig relevant.

Erfahre mehr über die HTML5 Days 2015

]]>
t3n Redaktion
Templated: 844 kostenlose Website-Templates unter CC-Lizenz http://t3n.de/news/templated-kostenlose-html5-css-templates-586466/ 2014-12-29T08:55:31Z
Auf Templated findet ihr 844 schicke CSS- und HTML5-Templates für eure nächste Website. Die Vorlagen stehen unter der Creative-Commons-Lizenz und können kostenlos zu privaten und kommerziellen …

Auf Templated findet ihr 844 schicke CSS- und HTML5-Templates für eure nächste Website. Die Vorlagen stehen unter der Creative-Commons-Lizenz und können kostenlos zu privaten und kommerziellen Zwecken genutzt werden.

Website-Templates: Auf Templated findet ihr 844 kostenlose Vorlagen. (Screenshot: Templated)
Website-Templates: Auf Templated findet ihr 844 kostenlose Vorlagen. (Screenshot: Templated)

Templated: Umfangreiche Sammlung kostenloser HTML5-Templates

Passende Vorlagen beschleunigen die Erstellung einer Website um ein Vielfaches. Eine umfangreiche Sammlung solcher CSS- und HTML5-Templates bietet euch Templated. Insgesamt 844 kostenlose Vorlagen findet ihr dort. Über die hübsch gestaltete Übersichtsseite könnt ihr euch die anschauen und bei Gefallen einfach herunterladen.

Die Templates scheinen hauptsächlich für Produkt- beziehungsweise Firmenseiten erstellt worden zu sein. Aber auch passende Vorlagen für einen Blog finden sich darunter. Unabhängig von eurem geplanten Projekt, kann sich ein Blick daher auf jeden Fall rentieren. Alle Templates stehen unter der Creative-Commons-Lizenz. Sofern ihr den Urheber der Vorlagen nennt, könnt ihr die Templates in privaten und kommerziellen Projekten kostenfrei einsetzen. Wer auf eine Nennung verzichten möchte, kann auch einen individuellen Lizenzvertrag aushandeln.

Kostenlose Website-Templates: Weitere Quellen für schicke Vorlagen

Die Vorlagen von Templated könnt ihr euch als ZIP-Datei herunterladen. Darin enthalten sind alle HTML5- und CSS-Dateien sowie die dazugehörigen Bilder. Wenn ihr trotz des umfangreichen Angebots kein Template findet, das euch zusagt, könntet ihr auch einen Blick auf W3Layouts werfen. Hier findet ihr etwa 500 Design-Vorlagen für responsive Websites. Auch diese Templates stehen unter einer Creative-Commons-Lizenz.

Noch mehr Inspiration findet ihr in unserem Artikel „Diese 15 Web-Templates musst du gesehen haben“.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Semantisches HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt http://t3n.de/news/semantik-html5-2-584087/ 2014-12-14T14:47:55Z
Eines der wichtigsten Features von HTML5 ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Gerade Googles Hummingbird zeigt uns, wohin die Reise gehen wird. In diesem Artikel …

Eines der wichtigsten Features von ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Gerade Googles Hummingbird zeigt uns, wohin die Reise gehen wird. In diesem Artikel zeigen wir euch, wie semantisches HTML5 zu schreiben ist. Mit dabei: Die Unterschiede zwischen em, i, strong und b.

Was bedeutet „Semantik“ in HTML5?

Web 3.0 oder das „Semantic Web“ – heutzutage dreht sich fast alles um Semantik und so natürlich auch in HTML5. Nicht umsonst. Das Semantische Web ist im Rahmen des „Internet der Dinge“ eine Notwendigkeit, um der schieren Datenflut durch die Zuordnung von bloßen Daten zu einem Kontext Herr zu werden und auch Suchmaschinen wie bevorzugen semantische Websites. Stichwort: Googles Such-Alogrithmus Hummingbird. Schon Ende 2013 beeinflusste der neue Algorithmus schon 90 Prozent aller Google-Suchanfragen und leitete damit einen wichtigen Schritt zu Tim Burners-Lees semantischem Web ein.

In einem Satz: Ihr setzt euren Inhalt durch Code in einen Kontext. Anders gesagt: Eure Inhalte brauchen Metainformationen, damit sie interpretiert und automatisiert weiterverarbeitet werden können.

sprache
Ein Crawler durchsucht deine HTML5- Website nach semantischen Inhalten. (Foto: © athomass - Fotolia.com)

Ein Beispiel: „String“ ist für Entwickler ganz klar eine Zeichenkette, für Physiker eine Theorie und für andere Unterwäsche. Ein Wort, drei unterschiedliche Bedeutungen. Das heißt, der abstrakte „String“ wird erst in einem Kontext zur Realität. Und das selbe Problem gibt es auch bei der Datenverarbeitung. Das Semantische Web – oder Web3.0 – soll durch HTML5 Abhilfe schaffen. Und so vermeidet ihr die häufigsten Fehler im Umgang mit HTML5:

1. Aufmerksamkeit erzeugen: Das i-Element ist nicht einfach nur „italic“

„Das gibt es doch gar nicht mehr, das wurde ja durch em ersetzt!“ Diesen Satz hört man inzwischen ziemlich oft, aber: Er ist falsch.

Das i-Element wurde nicht gestrichen, sondern es kennzeichnet Wörter, die anders betont, beziehungsweise ausgesprochen werden. Gründe dafür sind: Fremdsprachen, Transkription, Eigennamen oder um Fachbegriffe zu kennzeichnen. Wenn ihr das i-Element aufgrund einer Fremdsprache verwendet, vergesst nicht, die Sprache über das lang-Attribut anzugeben.

2. HTML5 und das em-Element

Dieses Element wird genutzt, um einzelner Wörter, oder ganzer Sätze herauszuheben beziehungsweise anders zu gewichten. Mit diesem Element könnt ihr die Bedeutung eines Satzes ändern, nur indem ihr einzelne Abschnitte betont:

<em>Bier</em> ist ein gutes Getränk
Bier <em>ist</em> ein gutes Getränk
Bier ist ein <em>gutes</em> Getränk

Jeder dieser Sätze ist für einen Computer identisch, durch die Betonung, die uns die Sprache ermöglicht, entsteht erst ein Unterschied. Dieses Element sorgt also dafür, dass diese drei Sätze unterschiedlich erfasst werden können, denn die Gewichtung ist bei jedem Satz eine andere.

Das em-Element ist also nicht ein allgemeines Element um „italic“ darzustellen. Genauso wenig wie es dazu da ist, um „Wichtigkeit“ zu vermitteln.

3. Das strong-Element

Wichtigkeit oder Dringlichkeit wird mit dem strong-Element gekennzeichnet. Dabei können Sätze mit strong gekennzeichnet werden, um wirklich Wichtiges von Unwichtigem trennen zu können. Das gleiche gilt, wenn eure Benutzer etwas zuerst lesen müssen, noch vor allem anderen.

Wichtig ist, dass die relative Wichtigkeit der einzelnen strong-Elemente, abhängig zu der Anzahl vorheriger strong-Elemente ist. Jedes strong-Element erhöht die Wichtigkeit seines Inhalts. Was meine ich damit? Im Gegensatz zu em oder i wird der Satz also in keinster Weise verändert.

Somit ist das folgende Beispiel durchaus sinnig, wenn „Kapitel 1:“ nur eine Formalität und der eigentliche und wichtige Inhalt „Die Praxis“ ist.

<h1>Chapter 1: <strong>The Praxis</strong></h1>

4. HTML5 und das mark-Element

Dieses Element wird benutzt, wenn etwas markiert werden muss, dass weder wichtig noch besonders zu lesen ist. Das mark-Element stellt den Text in einen anderen Kontext, als vom ursprünglichen Autor beabsichtigt. Wenn ihr also das Augenmerk auf eine besondere Texstelle legen wollt, die vom Autor nicht als besonders erachtet worden oder nur in einem bestimmten Kontext wichtig ist, dann muss die Wahl auf das mark-Element fallen.

Ein Beispiel: Es wird ein Text nach dem Wort „Bier“ durchsucht, das auch gefunden wird. Dieses Wort muss jetzt gekennzeichnet werden, um die Aufmerksamkeit des Lesers auf dieses Wort zu lenken. Dabei bleiben natürlich Inhalt und Sinn unverändert. Hier ist das mark-Element richtig eingesetzt. Oder: Eine Zahlenangabe in einem Textblock bezieht sich auf eine Zahl in einem Bild. Das Element zeigt also Relevanz an – nicht Wichtigkeit.

5. b-Element in HTML5

Das letzte Mittel, um Aufmerksamkeit zu steuern, ist das b-Element. Dabei werden Textstellen gekennzeichnet, die weder die Aussprache verändern, noch Wichtigkeit oder Relevanz kennzeichnen. Somit ist der Einsatz des b-Elements richtig, wenn die Aufmerksamkeit des Lesers gelenkt werden soll, semantisch aber keine Wichtigkeit vorliegt. Das liegt zum Beispiel vor, wenn ihr die erste Zeile eures Absatzes hervorheben wollt (zum Beispiel mit einer Fettung).

6. Der Zeilenumbruch mit br

Gerade von WYSIWYG-Editoren wird und wurde das br-Element regelmäßig falsch eingesetzt. Dabei handelt es sich um einen Zeilenumbruch, um Inhalte wie zum Beispiel Gedichte strukturieren zu können. Um Abstände zu generieren, sollte CSS verwendet werden, das heißt: Wenn ihr br-Elemente nur benutzt, um den Abstand zwischen zwei DOM-Objekten zu vergrößern, dann nutzt ihr das Element nicht der Dokumentation entsprechend.

Bonus: &nbsp;

Zugegeben, bei &nbsp; handelt es sich nicht um ein Element, sondern um eine „Character Entity“. Trotzdem wird sie häufig – ähnlich wie das br-Element – als Zeilenumbruch eingesetzt, was falsch ist.

Dabei handelt es sich eigentlich um ein geschütztes Leerzeichen. Wenn ihr also zwei Informationen durch eine Leertaste trennen wollt, da das eine ohne das andere keinen Sinn ergibt, dann solltet ihr diese Entity einsetzen. Beispiele für die Nutzung dieses Leerzeichen sind Werte und dazugehörige Maßeinheiten wie zum Beispiel 12&nbsp;m oder 200&nbsp;US-Dollar. Übrigens: Eine ausführliche Liste der Entitäten findet ihr hier.

7. Das Kleingedruckte: small-Element

Dieses Element ist ausschließlich dazu da, um rechtliche Hinweise oder kurze Disclaimer zu kennzeichnen. Ein praktisches Beispiel ist, unter welcher Lizenz ein Stockfoto steht oder die Kennzeichnung von Preisen, die keine Umsatzsteuer enthalten. Dabei wäre der Hinweis so zu schreiben: EUR 20<small>exkl. USt.</small>

Das Impressum oder die AGB sollten nicht mit dem small-Element gekennzeichnet werden, denn in diesem Fall sind die AGB der eigentliche Hauptinhalt der Seite.

8. Das hr-Element

Semantisch gesehen respresentiert das hr-Element einen thematischen Bruch auf Absatz-Ebene. Bei einem Szenenwechsel innerhalb eines Theaterstücks kann dieses Element eingesetzt werden, um diesen thematischen Bruch semantisch darzustellen.

Der Grund warum bei so einem Wechsel nicht das section-Element benutzt wird ist, dass aus der Perspektive der Semantik der Inhaltsabschnitt unverändert bleibt. Das Theaterstück ist immer noch das selbe Theaterstück – der Wechsel erfolgte „nur“ auf thematischer Ebene, was im Sinne der Semantik zu vernachlässigen ist.

Wichtig zu wissen ist, dass das hr-Element sich nicht auf den Outline-Algorithmus auswirkt.

9. Adressen mit dem address-Element?

Dieses Element wird häufig dazu benutzt, um die postalische Anschrift auf der Kontakt-Seite zu kennzeichnen. Das kann richtig sein, muss es aber nicht, denn in der Regel ist das p-Element ausreichend für postalische Anschriften.

Das address-Element bedeutet mehr – nämlich die semantische Darstellung einer Kontaktmöglichkeit des im DOM naheliegendsten article- oder body-Eltern-Elements. Ist also das address-Element im body-Element, gelten die Kontaktinformationen für dieses eine body-Element beziehungsweise diese Seite – sie könnten sich aber auch auf ein article-Element beziehen. Üblicherweise befindet sich das address-Element in einem footer-Element.

Wichtig dabei ist, dass dieses Element nicht nur postalische Informationen beinhalten kann, sondern auch Links. Es ist also nicht definiert, welche Art von Kontaktinformation angegeben werden kann, sondern nur DASS welche, in Relation zu anderen DOM-Objekten, angegeben werden können.

10. Zitate mit blockquote, cite und q

Beim Zitieren merkt man, dass das Web der akademischen Welt entsprungen ist. Das cite-Element wird benutzt, um eine Referenz auf ein kreatives Werk setzen zu können. Es kann den Titel des Werks, den Namen des Autors oder eine URI beinhalten. Dabei gilt als Werk:

Creative works include a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a web site, a web page, a blog post or comment, a forum post or comment, a tweet, a written or oral statement, etc.W3.org

Das heißt, das cite-Element bildet die Herkunft beziehungsweise eine Referenz ab, und dient somit nicht zur Darstellung des eigentlichen Zitats. Folglich ist dieses Codefragment falsch:

<p><cite>This is wrong!, said Hillary.</cite> is a quote from the 
   popular daytime TV drama When Ian became Hillary.</p>

Für Zitate ist das q-Element zu verwenden. Das obige Beispiel in der semantisch richtigen Form sieht so aus:

<p><q>This is correct, said Hillary.</q> is a quote from the 
   popular daytime TV drama <cite>When Ian became Hillary</cite>.</p>

Somit wird die eigentliche Phrase des Zitats mit dem q-Element umschlossen, wobei der Herkunft durch das cite-Element beschrieben wird. Allerdings muss nicht immer ein cite-Element angegeben werden, und q-Elemente sind auch ineinander verschachtelbar.

Das blockquote-Element ist semantisch nicht auf dem Text-Level, sondern gruppiert Inhalte. Da es keine einheitliche Regelung gibt, wie Zitate auf Code-Ebene mit blockquote dargestellt werden sollen, wird zur Referenzangabe aber die Verwendung des footer- oder cite-Elements vorgeschlagen.

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
 <footer>— <cite>Stephen Roberts</cite></footer>
 </blockquote>
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...
<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

Alle drei oben genannten Varianten sind richtig und möglich. Das blockquote-Element kann aber auch Überschriften, Listen und sogar Bilder enthalten und ist somit für umfangreichere Zitate konzipiert, kann aber das q-Element auch ersetzen.

Wenn ihr mehr über article-, section-, aside-, nav- und header-Elemente lesen wollt, dann werdet ihr im Artikel „Semantik im Web 3.0: Wir zeigen euch, wie HTML5 dem Web mehr Bedeutung verleiht“ fündig. Oder ihr kämpft euch durch die HTML5-Dokumentation.

Was ist eure Meinung zum Semantischen Web?

]]>
Mario Janschitz
Der schönste Tag eures Lebens: W3C stellt HTML5 fertig http://t3n.de/news/html5-fertig-575078/ 2014-10-29T09:27:47Z
Heute schon in HTML5 geschrieben? Spätestens jetzt ist der richtige Zeitpunkt dafür, denn die W3C hat HTML5 zur „Recommendation“ gekührt, was de facto den Abschluss des Standardisierungs-Prozes …

Heute schon in geschrieben? Spätestens jetzt ist der richtige Zeitpunkt dafür, denn die W3C hat HTML5 zur „Recommendation“ gekührt, was de facto den Abschluss des Standardisierungs-Prozesses bedeutet. HTML5 ist fertig.

Eines Vorweg: Für Nutzer wird dieser Meilenstein nichts verändern. Ganz anders sieht das für Entwickler aus, die endlich eine standardisierte Web-Plattform nutzen können, an der sich auch die Browserhersteller orientierten können. Keine Hacks, -vendor-Prefixe oder „Polyfills“ mehr – zumindest sobald alle Browser den neuen Standard implementiert haben.

HTML5: Standard wird 6 Jahre früher fertig als geplant

Ursprünglich war die Fertigstellung des Standards mit 2020 geschätzt, doch mit dem „Plan 2014“ des W3C wurde Sorge getragen, dass wir HTML in der fünften Version schon jetzt verwenden können. Aufgrund anfänglicher Schwierigkeiten und Fokus auf XML und erst nach dem Gründen der „Web Hyptertext Application Technology Working Group“ (WHATWG), Mitte 2004, wurde HTML5 vorangetrieben. HTML5 hat somit insgesamt zehn Jahre benötigt, um den Standardisierungs-Prozess abschließen zu können. Dabei war und ist die Aufgabe von HTML5, folgende Ziele zu erfüllen:

Kompatibilität: Inhalte, die bereits exisitieren, müssen weiterhin unterstützt werden, wobei neue Sprach-Elemente den bestehenden Inhalt nicht negativ beeinflussen dürfen.

Sicherheit: HTML5 berücksichtigt Sicherheitsaspekte

Konsistenz: HTML und XHTML können gemeinsam in einem DOM abgebildet werden, daher können auch Teile von XML aus XHTML-Anwendungen in HTML5 verwendet werden.

Verwendbarkeit: HTML5 soll Entwicklerprobleme lösen, aber funktionierende Lösungen sollen nicht neu erfunden werden.

Universalität: HTML5 soll unter Verwendung aller Weltsprachen auf allen Endgeräten darstellbar sein.

Barierefreiheit: HTML5 soll die Barrierefreiheit von Inhalt und auch von Funktion der Anwendung sicherstellen.

Mit der Standardisierung von HTML5 hat sich das Leben von Entwicklern schlagartig vereinfacht, und eine neue Ära wurde eingeleitet.

Was ist für euch das Key-Feature von HTML5?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
WieWoWas? t3n-Leser fragten nach: Hootsuite-Alternativen, MRM-Tools, Responsive Webdesign, HTML5 und Google Analytics http://t3n.de/news/wiewowas-t3n-leser-fragten-nach-574816/ 2014-10-28T13:24:17Z
Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen …

Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen dann die interessantesten und brisantesten Fragen und Antworten der t3n-Community zusammengefasst in einem Artikel.In den Fragen dieser Woche geht es um Hootsuite- und Wunderlist-Alternativen, Responsive Webdesign, HTML5, Google Analytics und mehr.

1. Social-Media-Management-Tools

Hootsuite ist eines der beliebtesten Social-Media-Management-Tools. Gibt es auch gute Alternativen? Welche nutzt ihr und warum?

Zur Frage: Was ist die beste Hootsuite Alternative?

2. Bezahlbares MRM-Tool

Wir befinden uns gerade in der Gründungsphase eines E-Commerce-Projektes und arbeiten bereits mit einigen Tools. Was uns fehlt: Ein (bezahlbares) Marketing-Resource-Management-Tool, das uns eine zentrale Planung (Timetables, etc.) und Evaluierung (über KPIs, etc.) unserer Marketingaktivitäten ermöglicht. Gerne auch aus dem Bereich SaaS.

Was empfehlt ihr?

Zur Frage: Gibt es ein (bezahlbares) MRM-Tool für Start-ups? 

3. Responsive Webdesign-Einstieg

Ich habe mich in den letzten Tagen etwas näher mit Responsive Webdesign auseinandergesetzt und bin immer wieder über den Ansatz „Mobile First” gestolpert. Was würdet ihr empfehlen? Mit der Version für mobile Geräte zu beginnen und sich hochzuarbeiten oder andersrum anfangen?

Zur Frage: Responsive Webdesign-Einstieg: "Mobile First" oder "Desktop First"?

4. HTML5-Tags

HTML5 ist ja noch kein verabschiedeter Standard, sondern noch in der Entwicklung. Kann man die Tags trotzdem schon bedenkenlos einsetzen?

Zur Frage: Kann/sollte man HTML5-Tags schon heute einsetzen?

5. Google Analytics in WordPress integrieren

Ich habe eine WordPress-Installation und würde da gerne Google Analytics einbinden. Als Theme nutze ich Twenty Thirteen. Wie mache ich das am besten?

Zur Frage: Wie kann ich Google Analytics in WordPress integrieren?

6. Wunderlist-Alternative

Welche alternativen ToDo-Listen nutzt ihr? Setzt ihr auf kostenpflichtige oder kennt ihr gute Freeware?

Zur Frage: Was ist die beste Wunderlist-Alternative?

 

Tausch dich mit der Community aus: Stell deine Frage, oder lass die Anderen von deinem Wissen profitieren – auf t3n.de/fragen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos http://t3n.de/news/thecodeplayer-css-html5-javascript-online-kurs-570072/ 2014-10-06T08:01:47Z
TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr …

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr seine Form annimmt.

Web-Entwicklung im Zeitraffer: Bei theCodePlayer schaut ihr Entwicklern über die Schulter. (Screenshot: theCodePlayer)
Web-Entwicklung im Zeitraffer: Bei TheCodePlayer schaut ihr Entwicklern über die Schulter. (Screenshot: TheCodePlayer)

TheCodePlayer: Innovativer Online-Kurs setzt auf Timelapse-Videos

Kurse und Tutorials für Entwickler gibt es im Netz unzählige. TheCodePlayer will sich von der Konkurrenz jedoch mit einem völlig neuen Konzept abheben. Statt Erklärungen dazu, was der Code bewirkt, bekommt ihr lediglich die Eingabe des Codes im Zeitraffer angezeigt. Direkt daneben seht ihr das Ergebnis, das sich nach und nach weiterentwickelt. Dabei springt TheCodePlayer im Verlauf eines Videos von HTML zu CSS und Javascript – je nachdem was der Autor des Codes gerade bearbeitet.

Im Grunde könnt ihr bei theCodePlayer also einem Entwickler direkt über die Schulter blicken. Damit ihr auch alles nachvollziehen könnt, lässt sich das Video pausieren und ihr könnt die Abspielgeschwindigkeit bestimmen. Zwar gibt es jeweils einen kurzen Begleittext, dort steht aber nur worum es bei dem gezeigten Projekt geht. Der Code selbst wird im Gegensatz zu gängigen Tutorials nicht direkt erklärt. Was der Entwickler gerade macht, müsst ihr aus dem angezeigten Ergebnis ableiten.

TheCodePlayer bietet eine interessante Auswahl an HTML/JavaScript-Projekten. (Screenshot: TheCodePlayer)
TheCodePlayer bietet eine interessante Auswahl an HTML/JavaScript-Projekten. (Screenshot: TheCodePlayer)

TheCodePlayer zeigt euch interessante HTML5-, CSS- und JavaScript-Projekte

Für blutige Anfänger ist TheCodePlayer nicht geeignet. Die Grundlagen von HTML5, CSS und JavaScript solltet ihr mindestens beherrschen, um den Timelapse-Videos folgen zu können. Dann kann die Seite aber durchaus interessant für euch sein. Immerhin bekommt ihr einen direkten Einblick in die Arbeitsweise anderer Entwickler.

Derzeit könnt ihr euch die Entstehung einiger interessanter Projekte anschauen. Wer den Machern seine E-Mail-Adresse hinterlässt, kann sich außerdem zusätzliche Walkthroughs anschauen. Die Idee ist definitiv spannend. Interessant wäre aber vermutlich auch ein Audio-Kommentar oder eine ähnliche Möglichkeit, um auf den Denkprozess des Entwicklers einzugehen. Dann würde aber die variable Abspielgeschwindigkeit nicht mehr wirklich funktionieren.

Wer nach weiteren hilfreichen Quellen sucht, sollte einen Blick auf unseren Artikel „Programmieren lernen: Die besten Quellen für den Einstieg“ werfen.

via www.producthunt.com

]]>
Kim Rixecker