A Digital Creative Revolution Will Ignite In 2012 Says IAB CEO Rothenberg
http://www.adexchanger.com/online-advertising/2012-predictions-rothenberg/
Building 'Recession Road' in HTML5
Recently, Michael Williamson began his journey photocasting the recession across America on Recession Road. While Williamson was busy gearing up with his latest tools of the trade (a smart phone and Intersect), we were developing a game plan for how Washington Post users would engage with the product online.
Intersect by nature provides a fantastic, almost real-time photo-blogging platform in which users can “intersect” with each other’s stories and build a more encompassing narrative. We’ve teamed up with Intersect before in projects such as the Rally to Restore Sanity and/or Fear, which was executed in a blog post form. In this instance we decided that photography was the driving force of the project and we wanted to showcase this aspect in a gallery-like experience while also giving attention to the location and caption of each post. We settled on a vertical photo stream in reverse chronological order with a 3D thumbnail navigation. Users can also view tags and map Williamson’s location with the accordion in the bottom left corner.
With the number of tablets and smart phones increasing, we’re trying to mitigate the amount of repurposing we have to do for different platforms and devices. For this reason, we opted to use HTML5 and JavaScript, with the content driven from a JSON feed from Intersect.
HOW WE DID IT
I was able to achieve most of the effects and transitions that I wanted through jQuery. The thumbnail 3D effect was definitely a little more difficult to execute. In order to achieve this effect, I experimented with the HTML5 canvas element and the drawImage method. One of the most frustrating things about working with HTML5 is making sure there is proper fallback for browsers that don’t yet support it. In order to provide alternate content for users with these browsers, I leveraged used Modernizr, a JavaScript library that detects support of HTML5 elements.
STREET VIEW
One of my favorite “extra” features is the Google Map street view. Since Intersect uses geolocation to map where each photograph is taken, users can get a great sense of place surrounding each photograph. In some cases, the user can literally look at exactly what Michael was looking at when he snapped the shutter.
Use your favorite HTML5-enabled browser or tablet and check out Williamson’s last stop on the road.
Grace Koerber / Web designer
URL Hunter!
probablyinteractive.comAn experimental game using the URL bar as the game screen.
Now you can enjoy Game Boy Color games in your browser with the magic of HTML 5
Thanks to HTML 5, you can now play a bevy of Game Boy Color games in your browser with absolutely no plug-in required. You can either play games from a preloaded selection (including nostalgia-inducing classics like Pokémon Blue, Red and Yellow, The Legend of Zelda: Link’s Awakening, and Super Mario Land) or drag and drop your own game files into the emulator.
HTML 5 Auszeichnung für Autoren
insidesearch.blogspot.comNeue Attribute rel=”Author” und rel=”me” für redaktionellen Content
HTML5 Apps: 10 Cool HTML 5 Web Apps
Via Scoop.it - New Digital Media
HTML5 apps are quite possibly the future of the web. In this post, I’ve gathered up 10 cool HTML5 apps that will show you just a bit of the power of HTML5.
►Mini Matmian:
If you are a heavy Twitter user, I highly recommend taking a gander at Hootsuite.
It’s a fantastic web based App for managing all you daily Tweeting activity with scheduling, tabs to separate search streams and lists etc.
CSS 3.0 maker is pretty cool but as I have said in a previous post, I suggest you learn how to code solo without these WYSIWYG type things. It will benefit you a great deal in the long run.
Show original
HTML 5 to be used in eBooks for Amazon
blog.ziggytek.com
via ziggytek.com
Tutorial Teil1: HTML Grundlagen
Willkommen beim ersten Teil meiner Tutorial Reihe. Ziel des ganzen ist es am Ende ein kleines Grundgerüst und das nötige Wissen zu besitzen eine kleine Website zu basteln mit folgenden Funktionen:
- Animierte Bildergallery
- Benutzer Login
- Kleiner Blog
- Animiertes Menü
- Datei Downloads per HTTP
- Kleines JAVA Tool (Applet)
Das ganze werden Wir mit HTML 5, PHP, SQL, JAVASCRIPT und JAVA realisieren.
Auch werde ich auf das Benutzen und verwenden von Frameworks wie JQuery, Smarty oder dem Zend Framework mit MVC (Modell View Controller) eingehen.
Zum erstellen einer Website braucht man einen Editor. Der Standard Editor würde schon reichen. Man muss die Datei nur als *.html abspeichern. Für mehr Komfort empfehle ich entweder für Windows Benutzer Notepad++ oder für Linux Benutzer SciTE die die wichtigsten Wörter Farblich Markieren oder wer Hilfe beim schreiben möchte, wie Autovervollständigung, dem empfehle ich die Plattform unabhängige Eclipse IDE oder Microsoft WebMatrix.
Fangen wir nun mit den Grundlagen zu HTML an.
Zuerst mal soll geklärt sein das HTML !KEINE! Programmiersprache ist sondern eine Auszeichnungssprache. HTML steht für Hypertext Markup Language. Wir sagen dem Browser nur wie er unsere Website “malen” soll.
Eine wichtige Anlaufstelle sei im Vorhinein schon einmal erwähnt: http://de.selfhtml.org/
HTML wurde am 03.11.1992 zum ersten mal veröffentlicht. Aktuell wird HTML vom W3C weiterentwickelt und ist momentan in der Version 4.01, Version 5 ist momentan in Entwicklung. Für mehr Informationen schaut unter Wikipedia.
Nun aber zum Grundgerüst.
Legen wir für den Anfang eine Datei mit dem Namen “index.html” an. Dies wird unsere Startseite auf der Website sein. In diese Fangen wir nun an unsere Website zu bauen.
Der wichtigste Tag ist der HTML-Tag. Ein Tag (sprich: täg) ist immer wie folgt aufgebaut <TAG> und muss für einen sauberen HTML Code immer mit </TAG> geschlossen werden. In HTML ist es aber egal wie man die Tags schreibt. <html> oder <HTML> beides ist richtig, aber man sollte sich für eins entscheiden und dies auch durchgehend beibehalten und nicht immer wechseln.
_____Code_____
<html>
</html>
_______________
Nun fügen wir unserer Seite einige Informationen hinzu. Diese werden später auf der Seite selbst nicht angezeigt.
Informationen zu einer Seite stehen im HEAD Teil.
_____Code_____
<html>
<head>
</head>
</html>
_______________
Geben Wir unserer Seite erstmals einen Titel. Dies erreicht man mit dem TITLE-Tag.
_____Code_____
<html>
<head>
<title>Test Seite</title>
</head>
</html>
_______________
Das sollte fürs erste einmal reichen. Später werden Wir uns noch mit META Daten beschäftigen, mit diesen kann man sehr präzise angaben machen welcher Inhalt auf einer Seite existiert. Ein wichtiger Tag der im HEAD Bereich steht sei aber noch erwähnt, der STYLE-Tag. Im STYLE-Tag kann man das aussehen seiner Website bestimmen. Dies erledigt CSS für uns. CSS steht nicht für das gleichnamige Spiel sondern für Cascading Style Sheet. In folgendem Beispiel werden wir die Hintergrundfarbe auf Blau und die Schriftfarbe auf Weiß setzen, außerdem verändern wir die Schriftart und Schriftgröße.
_____Code_____
<html>
<head>
<title>Test Seite</title>
<style type=”text/css”>
body{
background-color: blue;
color: white;
font-family: Fantasy;
font-size: large;
}
</style>
</head>
</html>
_______________
In einem STYLE-Tag muss immer angegeben werden um welchen Typ es sich handelt. Das gängigste ist “text/css”. Bei einer COLOR Eigenschaften wie color oder background-color kann man entweder eine Farbe in Englisch schreiben. Es gibt aber nur einige bestimmte Farben die sich in Wörtern schreiben lassen. Besser ist es eine Farbe im Hexadezimal Code anzugeben. #FFFFFF entspricht weiß und #000000 entspricht schwarz, nachprüfen könnt Ihr dies hier. Bei SIZE angaben gibt es die Möglichkeiten entweder die Größe in pt (point), px (Pixel) oder cm (Zentimeter) anzugeben aber es gibt auch Schlagwörter. Diese sind: xx-large, x-large, large, medium, small, x-small und xx-small.
Innerhalb des STYLE-Tag gibt man an welches HTML Element man Manipulieren möchte. Wir möchten denn kompletten BODY Bereich manipulieren. Das bedeutet das es die ganze Website betrifft da alles innerhalb des BODY-Tag steht. Und zu diesem kommen Wir nun.
_____Code_____
<html>
<head>
<title>Test Seite</title>
<style type=”text/css”>
body{
background-color: blue;
color: white;
font-family: Fantasy;
font-size: large;
}
</style>
</head>
<body>
</body>
</html>
_______________
Innerhalb des BODY-Tag können Wir nun Unseren text schreiben und diesen mithilfe von HTML beeinflussen. Die wichtigsten Tags Liste ich nun auf und werde diese gleich in unsere bisherige Website einarbeiten.
- <p> - Zwischen <p> und </p> ist ein Text Absatz.
- <br/> - Dieser Tag darf so geschrieben alleine stehen und bewirkt einen Zeilenumbruch.
- <h*> - Das * steht für eine beliebige Zahl von 1 bis 8. <h1> Überschrift 1 </h1> || <h2> Überschrift 2 </h2> || usw…
Damit kann man schon strukturierte Texte auf eine Website bringen.
_____Code_____
<html>
<head>
<title>Test Seite</title>
<style type=”text/css”>
body{
background-color: blue;
color: white;
font-family: Fantasy;
font-size: large;
}
</style>
</head>
<body>
<h1> Test Seite Überschrift </h1>
<h2>Erster Absatz</h2>
<p>
Die ist nun Unser erster Absatz mit <br/> einem Zeilen
Umbruch. Wenn Ihr euch das Ergebnis anschaut werdet Ihr merken <br/> das nur an
BR-tag der Text umgebrochen wird aber die eigenen Umbrüche ignoriert werden.
</p>
<h2>Zweiter Absatz</h2>
<h3>Grundlagen bestanden</h3>
<p>
Nun besitzt Ihr alle Grundlagen für Eine eigene Website. <br/>
Natürlich gibt es noch viel zu Lernen und zu Entdecken. Aber ohne HTML haben Sprachen wie PHP oder JAVASCRIPT keine Grundlage mit der sie Interagieren können.
</p>
</body>
</html>
_______________
Für Größere Ansicht
“Rechtsklick”->Grafik Anzeigen
Ich Bedanke mich für das Lesen meines ersten Tutorial und würde mich über Rückmeldungen, egal ob Positive oder Verbesserungen, sehr Freuen da Ich mich auch weiter bilden möchte um es in Zukunft noch besser zu machen. Wenn Ihr Fragen habt, ganz oben und ganz Unten findet Ihr ein Fragezeichen bzw. den Text “Noch Fragen?”, wenn Ihr dort drauf klickt könnt Ihr mir eine Frage Stellen die Ich dann beantworten werde. Auch Kritik oder Verbesserungen könnt Ihr mir darüber senden.
Im nächsten Teil werden Wir Fortgeschrittene Techniken für HTML lernen und uns mit .css Dateien beschäftigen.
Das Tutorial als Offline PDF hier klicken.
Mit Freundlichen Grüßen
Euer Marvin
Amazing Personalized HTML5 Music Video
thewildernessdowntown.com%2F&h=uAQA45A8OAQCnwi9PQ_gIFbxFLWrARid98IuQFUAPR-OQkwOnly open with Google Chrome, as it is currently the only browser that can read this coding. Amazing what will be possible with HTML5.
Top 5 HTML 5 Web Resources
HTML 5 is the coolest new markup language. And those of you who want to dip your toes in this refreshing new stream of tags and elements, here are Top 5 websites which deal in HTML 5 and all its coolness.
- HTML 5 Doctor: I just love this web site’s design and especially its brilliant code snippets and Elements Index. Look around and you would soon learn a lot of things extremely quickly.
- W3 Schools HTML 5 Tutorial: If you want to learn HTML 5 and many other languages, this is one of the best sites. Very easy to breeze through and some very lucid explanations and examples.
- HTML Rocks: Brilliant. Just Brilliant. It has code playgrounds, which is like a sandbox, side-by-side tutorials, samples and all the elements of coolness attached to it.
- HTML Gallery: If you want some inspiration, this will give you plenty. It showcases some great websites which use HTML 5 in all its glory.
- Dive Into HTML 5: This is slightly lesser known but is one of the best websites on the subject and I love the design. Must Check!
