HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2014-12-14T14:47:55Z t3n Redaktion http://t3n.de/tag/html5 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?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
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
CSS3: Coole Animationen für im Grid angeordnete Bilder http://t3n.de/news/css3-animationen-grid-565807/ 2014-09-13T14:44:14Z
Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein …

Mit und stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein Portfolio oder Bilder-Blog visuell aufwerten kannst.

Viele Designer und Blogger setzen auf große Bilder, um ihre Arbeit oder ihre Beiträge in Szene zu setzen. Das Mansory-Layout ist dabei eine sehr häufig benutzte Anordnung, bei der Elemente gleichmäßig und passend über den Bildschirm beziehungsweise im jeweiligen Container verteilt werden. Infinite Scrolling und dynamisches Nachladen von Elementen gehören bei größeren Portfolios ebenfalls zum Standard-Repertoire. Häufig werden die neu hinzugeladenen Elemente einfach nur eingeblendet – was an sich vollkommen in Ordnung ist.

Für Visualisten: Nachladende Bilder aufpeppen mit CSS3

Luigi Petrut reicht das aber nicht, sodass er eine Sammlung von CSS-Animationen für Bilder in Grid-Layouts geschrieben und frei zur Verfügung gestellt hat.

Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)
Mit „Cool CSS Loading Effects for Grid Images“ verpasst du deinem Portfolio oder Bilder-Block ein nettes visuelles Extra. (Animation: tuxmix.com)

Die „Cool CSS Loading Effects for Grid Images“ getaufte Sammlung beinhaltet fast 40 verschiedene Animationen, mit denen nachgeladene Elemente in Szene gesetzt werden können. Von verschiedenen Fade-Animationen bis hin zu zwei- und dreidimensionalen Animationen ist alles vertreten. Die Animationen und die dazugehörigen Laderoutinen wurden im Chrome 36+, Firefox 31+, Opera 23+, Safari 5+ und Internet Explorer 11 getestet.

Auf der Demo-Seite kannst du die Animationen live testen. Den Quellcode und eine Anleitung zum Nachbauen der Demo findest du in Luigi Petruts Blog TutsMix.

]]>
Ilja Zaglov
Epiphany: Das kann der neue Raspberry-Pi-Browser http://t3n.de/news/epiphany-raspberry-pi-web-browser-565095/ 2014-09-02T11:30:13Z
Das Raspberry-Pi-Projekt hat einen optimierten Browser für den Mini-Rechner vorgestellt. Das Ziel ist eine bessere Multi-Tab-Experience sowie Bild- und HTML5-Video-Beschleunigung.

Das Raspberry-Pi-Projekt hat einen optimierten für den Mini-Rechner vorgestellt. Das Ziel ist eine bessere Multi-Tab-Experience sowie Bild- und HTML5-Video-Beschleunigung.

Raspberry Pi: Der optimierte Browser soll das Surfen deutlich angenehmer auf dem Mini-Rechner machen. (Screenshot: Raspberry Pi)
Raspberry Pi: Der optimierte Browser soll das Surfen deutlich angenehmer auf dem Mini-Rechner machen. (Screenshot: Raspberry Pi)

Epiphany: Raspberry Pi bekommt optimierten Browser

Während der Raspberry Pi für viele Einsatzgebiete der perfekte Begleiter ist, eignet er sich zum Surfen nur bedingt. Ein speziell für den Mini-Rechner optimierter Browser soll das zukünftig ändern. Bei der Software handelt es sich um eine angepasste Version des etwas verwirrend getauften Web-Browsers „Web“, der bis 2012 unter dem Namen Epiphany bekannt war.

Der Browser setzt auf WebKit 1.1 und bietet ein für den im genutzten ARM-Prozessor optimiertes 2D-Rendering. Ziel des Projekts war es unter anderem, ein responsiveres User-Interface und Scrolling zu erreichen. Außerdem soll der Browser YouTube-Videos schneller laden und er unterstützt die Hardware-seitige Dekodierung von Videos mittels gst-omx. Der Browser soll Videos bei einer Auflösung von 1.280 mal 720 Pixeln mit einer Bildwiederholrate von 25 Frames pro Sekunde sauber abspielen können.

Raspberry Pi: Der Browser bietet unter anderem HTML5-Video-Beschleunigung. (Screenshot: Raspberry Pi)
Raspberry Pi: Der Browser bietet unter anderem HTML5-Video-Beschleunigung. (Screenshot: Raspberry Pi)

Epiphany: Raspberry-Pi-Browser kann ab sofort getestet werden

Der angepasste Browser soll Speicher- und CPU-freundliches Tab-Management bieten und der Browserstart soll dreimal schneller sein. Die Beta-Version könnt ihr über die folgenden Befehle unter Raspbian installieren:

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install epiphany-browser

Allerdings haben bereits erste Nutzer über Probleme mit ihrem System nach der Installation berichtet. Daher solltet ihr vorher sicherheitshalber ein Systembackup per SD-Karte erstellen.

via www.theregister.co.uk

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 5) http://t3n.de/news/10-hilfreiche-tutorials-quellen-5-563884/ 2014-08-25T14:10:42Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; 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 …

, , 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 und -designer sind. Hier kommt der fünfte Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese 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.

quellen

Was ihr schon immer über Regex und JavaScript wissen wolltet

Regular Expressions in JavaScript sind nicht immer intuitiv. Bjorn Tipling poliert euer Wissen auf und zeigt euch die Beispiele auf JSFiddle.

Bildschirmfoto 2014-08-25 um 14.50.08

Jekyll und GitHub Pages: So geht's

Auf Smashing Magazine findet ihr eine gute Einführung wie ihr mit Jekyll und GitHub statische Websites aufbauen könnt.

Bildschirmfoto 2014-08-25 um 15.08.52

Jeder mag Essen. Jeder mag Icons. Eine grafische Symbiose.

kann man als Designer nie genug haben. Leider findet man gute Icons viel zu selten, oder es sind einfach nicht die dabei, die man benötigt. Auf Dribbble bekommt ihr 30 Icons rund ums Essen – kostenlos.

quellen-1

Das User-Interface als Styleguide: Styleguide-Driven-Development

SSD sorgt dafür, dass das UI zu 100% vom Backend und dem Anwendererlebnis getrennt ist. Warum das gut ist und wie ihr das umsetzt, lest ihr im Artikel von Envato.

Bildschirmfoto 2014-08-25 um 14.58.00

Beatuifulopen.com: Die schönsten Open-Source-Webprojekte des Webs

Das aufstrebende Archiv beautifulopen.com lässt euch Open-Source-Projekte finden und zeigt euch die schönsten Websites dazu.

Bildschirmfoto 2014-08-25 um 15.07.23

Abstraktion im Frontend: Eine aussterbende Fähigkeit?

Gerade bei großen Projekte regieren die KISS- und DRY-Prinzipien neben der Kunst der Abstraktion. Ben Frain eröffnet euch seine Perspektive auf „Enduring CSS“ und wie ihr mit der Sprache in großen Projekten umgehen könnt.

Bildschirmfoto 2014-08-25 um 15.00.08

Wie eure Leser Texte lesen

Jason Santa Maria klärt euch darüber auf, wie Menschen Texte wahrnehmen, und wie ihr das zu eurem Vorteil nutzen könnt.

Bildschirmfoto 2014-08-25 um 15.13.20

Logokit für Hipster oder Vintage-Liebhaber

PixelBuddha präsentiert euch den dritten Teil der Vintage-Logo-Kits. Hier geht es zum ersten und hier zum zweiten. Amazing.

Bildschirmfoto 2014-08-25 um 14.24.14

Icons. Minimalism. Schön.

Auf Behance findet ihr das kostenlose Set – gefüllt mit 65 minimalistische Icons im AI-, EPS-, und PSD-Format.

Bildschirmfoto 2014-08-25 um 14.31.22

Nie wieder: „Du kannst Teil von etwas ganz Großem werden!"

Speider Schneider zeigt euch, wie ihr euch stilvoll aus der Affäre ziehen könnt, wenn es wieder mal heißt: „Kannst du uns eine Website machen – das wäre eine Super-Referenz für dich.“

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

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

]]>
Mario Janschitz
Cloud-Hosting für HTML5-Apps: Aerobatic erspart euch das Server-Setup http://t3n.de/news/hosting-aerobatic-single-page-app-562792/ 2014-08-19T11:41:51Z
Aerobatic bietet Cloud-Hosting für Single-Page-Apps an und sieht sich selbst als eine Art Heroku für das Frontend. Features wie „Traffic Control“, ein intelligenter API-Proxy und integrierte …

Aerobatic bietet Cloud-Hosting für Single-Page-Apps an und sieht sich selbst als eine Art Heroku für das Frontend. Features wie „Traffic Control“, ein intelligenter API-Proxy und integrierte OAuth-Authentifizierung sollen Aerobatic zur perfekten Lösung dafür machen.

Aerobatic ist ein Cloud-Hoster für Single-Page-Apps. (Screenshot: aerobatic.io)
Aerobatic ist ein Cloud-Hoster für Single-Page-Apps. (Screenshot: aerobatic.io)

Aerobatic: Einfaches Cloud-Hosting für Single-Page-Apps

Aerobatic ist ein Platform-as-a-Service (PaaS) und dient als Cloud-Hosting-Lösung für Single-Page-Apps. Der Anbieter hat seinem Dienst eine Reihe von Funktionen spendiert, die ihn von anderen Hosting-Lösungen für statische Webseiten abheben sollen. So gibt es einen Simulator-Modus, mit dem ihr eure lokal entwickelten einfach in der testen könnt. Damit sollen etwaige Integrationsprobleme schnell erkannt werden können.

Ein weiteres interessantes Feature nennt sich „Traffic Control“. Letztlich könnt ihr damit über einen Regler bestimmen, welcher Teil des eingehenden Traffics eine andere Version eurer App zu Gesicht bekommen soll. Damit lassen sich auf einfache Art und Weise A/B-Tests durchführen. Außerdem könnt ihr mit „Traffic Control“ neue Funktionen zunächst nur einem Teil eurer Nutzerbasis zur Verfügung stellen, und euch Feedback einholen.

Aerobatic: Cloud-Hoster will Einsatz externer APIs und OAuth vereinfachen

Aerobatic versucht mit dem API-Proxy, ein Problem statischer Web-Apps zu umgehen. Damit API-Keys, Passwörter oder Token nicht direkt in die Seite eingebunden werden müssen, lassen sich diese bei Aerobatic hinterlegen und per AJAX-Callback aufrufen. Außerdem lassen sich API-Respones auch cachen. Das ist sinnvoll, wenn die Antworten mit einer Verzögerung kommen oder die Anzahl der API-Aufrufe limitiert ist.

Außerdem will es Aerobatic Entwicklern leicht machen, OAuth-Authentifizierung in ihren Apps einzusetzen. Die entsprechenden Schlüssel für OAuth-Anbieter wie Google, Facebook, Twitter oder GitHub lassen sich im Aerobatic-Dashboard abspeichern und der Anbieter kümmert sich dann um die eigentliche Authentifizierung der Nutzer.

Aerobatic kann derzeit kostenfrei getestet werden. Wie viel Geld der Anbieter später dafür verlangen wird, ist noch nicht bekannt. Der Dienst soll aber auch später noch in einer kostenfreien Version zu haben sein. Darüber hinaus ist aber auch eine kostenpflichtige Variante mit erweiterten Team-Features geplant.

]]>
Kim Rixecker
10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 4) http://t3n.de/news/10-hilfreiche-tutorials-quellen-4-559776/ 2014-07-29T12:44:16Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; 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 und -designer sind. Hier kommt der vierte Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese 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 2014-07-29 um 09.56.43

Native Apps waren Gestern?

Håkon Wium Lie ist der CTO von Opera und ein CSS- sowie Webstandards-Pionier und genau deswegen kann er sich diese Aussage leisten. Lesenswert.

Bildschirmfoto 2014-07-29 um 09.59.36

Use-Cases für den Einsatz von responsiven Bildern

Andreas Bovens erklärt im Entwickler-Blog von Opera den Einsatz des picture-Elements.

Bildschirmfoto 2014-07-29 um 11.39.54

Bildervergleich mit purem CSS

Lea Verou zeigt euch, wie sie nur mit einen Vergleichs-Slider von Bildern implementiert.

Bildschirmfoto 2014-07-29 um 10.04.10

Icon-Set: Clear Icons

Ein umfassendes Icon-Set mit 500 verschiedenen in zwei Größen und vier Formaten wird auf appzgear.com angeboten. Ob und wie viel ihr bezahlt bleibt euch überlassen.

Bildschirmfoto 2014-07-29 um 10.07.48

text-decoration ist so 90iger

Mary Lou stellt auf tympanus.net auf atemberaubende Weise vor, wie Inline-Links aussehen können.

Bildschirmfoto 2014-07-29 um 11.42.42

Mintie Flat Icons

Oliver Soian stellt auf pixelbuddha.net sein Icon-Set vor. Flat Icons für Liebhaber.

Bildschirmfoto 2014-07-29 um 10.28.53

Virtuelle Maschinen. Web. Vagrant.

Nicholas Cerminara zeigt euch, wie ihr die Vagrant Cloud (insbesondere Vagrant Share) optimal ausnutzen könnt.

Bildschirmfoto 2014-07-29 um 10.34.33

CSS-Columns? Hier steht alles was du wissen musst

Katy Decorah zeigt euch auf css-tricks.com, wie ihr mit den CSS-Columns umgehen könnt und an welche Grenzen ihr stoßen werdet.

Bildschirmfoto 2014-07-29 um 10.50.45

Material Design und Polymer: Eine Fusion

Googles „Material Design“ ist in aller Munde – auf scotch.io findet ihr hier und hier zwei Tutorials, die euch an dieses Thema heranführen.

Bildschirmfoto 2014-07-29 um 10.57.29

Clipping mit CSS und SVG

Sara Soueidan erklärt euch, wie ihr in Zukunft clip-path und <clipPath> meistern könnt. Jeder, der das SVG-Format kennt, sollte sich in diesen Text einlesen.

Wenn euch diese Liste gefallen hat, findet ihr hier den dritten und hier den zweiten 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 3) http://t3n.de/news/10-hilfreiche-tutorials-quellen-2-554795/ 2014-07-01T12:58:04Z
HTML5, CSS3, UX-Design, Icon-Packs &amp; 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 und -designer sind. Hier kommt der dritte Teil. Tagtäglich stolpern wir über atemberaubende Tutorials, leider verschwinden diese 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 2014-07-01 um 13.54.02

Wunderbare :hover-Effekte

Auf Codrops findet ihr :hover-Effekte der Extraklasse – inklusive detaillierter Beschreibung.

Bildschirmfoto 2014-07-01 um 13.57.02

100 kostenlose Icons als PSD, AI oder Webfont

Freebisbug.com stellt euch 100 zu verfügung – kostenlos und in den wichtigsten Formaten.

Bildschirmfoto 2014-07-01 um 13.56.47

Showcase zu Daten-Visualisierung für mobile Geräte

Auf MobileVis findet ihr eine Quelle der Inspiration wenn es darum geht, Daten auf mobilen Geräten darzustellen. Definitiv einen Bookmark wert.

Bildschirmfoto 2014-07-01 um 13.55.26

Iconset im Flat Design

Smashing Magazine stellt euch ein Iconset – inklusive einer alternativen Version – zur Verfügung. Flat-Desig par excellence und ein absoluter Hingucker.

Bildschirmfoto 2014-07-01 um 13.54.43

Die Zukunft von WordPress

Das Team hinter Envato stellt sich die Frage, wie eine mögliche Zukunft von aussehen könnte. Ein Exkurs über JavaScript, WordPress als Enterprise-Lösung und Wachstum.

Bildschirmfoto 2014-07-01 um 13.54.23

Sexy Inline-Links

Eine weitere Tutorial-Perle von Codrops. Diesesmal beschäftigt sich Mary Lou mit der Formatierung von Links mit SVGs und Pseudo-Elementen.

Bildschirmfoto 2014-07-01 um 14.00.38

Bocoup stellt sich die Frage: overflow:auto|hidden|visible

Auf Bocoup stellt Greg Smith die Frage nach einem Default-Wert für overflow in dem Raum und erklärt, warum diese Frage wichtig ist.

Bildschirmfoto 2014-07-01 um 14.04.19

Wird das will-change-Property alles ändern?

Genau diese Frage stellt Sara Soueidan in ihrem Artikel für Opera – und liefert auch Antworten.

Bildschirmfoto 2014-07-01 um 14.09.39

Der Endgegner CSS?

In diesem Artikel lest ihr, wie ihr den Seitenaufbau durch CSS optimieren könnt. Lesenswert.

Bildschirmfoto 2014-07-01 um 14.11.57

Das Hamburger-Icon verfehlt seinen Zweck

Das omnipresente „Hamburger-Icon“, das Navigationsmenüs anzeigt, hat ein Problem: Es ist benutzerunfreundlich. Dieser Artikel zeigt euch warum und wie ihr das Problem lösen könnt.

Wenn euch diese Liste gefallen hat, dann findet ihr hier den zweiten, und hier den ersten Teil der Serie.

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

]]>
Mario Janschitz