Ondersteuing van .Net-framework, een deepzoom feature, advertentie weergave en betere beveiligde drm (Digital Rights Management) zijn nieuwe toevoegingen voor de nieuwe versie van Silverlight. Ook de GUI-objecten (Graphical User Interface) uit Silverlight hebben een grote verandering ondergaan, hierdoor is de applicatie overzichtelijker geworden, zowel voor de programmeur als voor de beginner in Silverlight.

Door de ondersteuning van .Net-framework is in Silverlight nu mogelijk om applicaties te maken in C#, Javascript, IronPython en IronRuby.

Silverlight 2 is downloaden op de site van Microsoft Silverlight. Huidige installaties van Silverlight worden automatisch geüpdate.

De grootste verbetering van het programma is dus het ’showen’ van 3D-objecten in een flash-animatie. In de eerder deze maand uitgebrachte Adobe Flash CS4 is een tool gebouwd om gemakkelijk 2D-objecten te converteren naar 3D-objecten. De nieuwe tool in het programma is de ‘authoringtool’ en kan ingezet worden op elk figuur, zowel op tekst als op een graphic.

De layout van tekst kan in Flash CS4 verbeterd worden dankzij de nieuwe Flash Player. Zo kan de tekst meerdere opmaken krijgen en je kan per Frame deze opmaak ook werkelijk veranderen. Shadow en Glow zijn nieuwe onderdelen die tijdens het afspelen van de tekst-animatie blijven bestaan, maar hierdoor krijgt de GPU het soms wel moeilijk. Daarom is het bij het maken van dit soort animaties handig om de GPU aan te spreken op zijn gedrag en eventueel een andere versnelling van de GPU in te stellen.

Ook wat totaal niet mocht ontbreken in de nieuwe Flash Player is het animeren van HD-kwaliteit video’s, waarbij de gemiddelde HD-kwaliteit ligt op h.264 formaat. Hierdoor zullen animaties en applicaties nog mooier worden dan in de Flash Player 9 formaat. Flash Player 9 had soms in de applicaties nog moeite met oudere versies van Flash maar dat is met versie 10 helemaal verhopen. De compabiliteit van versie 10 is erg verbeterd ten opzichte van versie 9.

Flash Player 10 is beschikbaar voor Windows, MacOS x en Linux en is te downloaden op de website van Adobe Flash Player. Op die website zie je meteen ook al een klein voorproefje van de toekomst van de flash-animaties.

Afgelopen week werd Silverlight 2 ook al uitgebracht door Microsoft en bezit ook vele extra’s. Probeer zelf uit te vinden welke player jij het beste vind werken!

Ik zit dus met een dilemma. Aan jullie de vraag: Wat is de reden dat jij wel of geen gebruik maakt van “_blank”? Van alle reacties maak ik een nieuwe post met de voor en nadelen en dan moet een keuze maken ook makkelijker worden.

1. Je website werkt in elke browser
2. Je pagina maakt gebruik van een makkelijke lay-out structuur met div’s ipv. tabellen
3. Je volgt grotendeels bij (x)HTML en CSS de regels van het W3C (= valid)
4. Je website is gestructureerd met behulp van de semantiek

Je hebt met het gebruik van de webstandaarden vele voordelen maar echter één nadeel. Dat nadeel is het goed leren van scripten, door je websites ‘valid’ te laten zijn. Het kijken hoever je daarin staat, of wat je fouten zijn kun je bijvoorbeeld doen met xHTML – CSS, voor HTML & CSS en/of W3C HTML & W3C CSS.

De belangrijkste voordelen die je hebt bij het gebruik van de webstandaarden zijn:

• Browsers die in de toekomst uit komen zijn “compatible”; als je momenteel een code schrijft en deze is niet HTML/CSS valid, is de kans groot dat deze straks niet meer wordt geaccepteerd en zullen de verschillende browsers (zoals Internet Explorer, FireFox, Opera en Safari) je code niet begrijpen.

• Webpagina’s worden sneller gedownload en uitgelezen; Hoe minder een combinatie van HTML tags, CSS, Javascript, hoe minder groot bestand er gedownload moet worden en hoe sneller deze uitgelezen wordt.

• Gemakkelijk te onderhouden; de websites die HTML/CSS valid zijn zullen makkelijker te onderhouden en aan te passen zijn. Ook als anderen in je code kijken, deze sneller begrijpen dan dat je een rare manier gebruikt om te coderen. (Het is belangrijk dat andere ook van jou kunnen leren.)

• Aanpassingen; als het HTML document netjes is opgebouwd, is deze makkelijk om te bouwen. Bijvoorbeeld je wilt ook je website laten zien op een mobiele telefoon of gewoon een ander design, dan hoef je enkel maar de CSS om te bouwen en je kan een andere website maken, zonder aan de HTML te komen.

• Bekend in zoekmachines; als een zoekmachine – zoals Google jou geschreven code snapt zal je veel beter ‘gerankt’ staan in de zoekmachine. Veel meer bezoekers zullen naar jouw site komen!!

Klik op de afbeelding voor een vergroting

Het werken van een website in verschillende browsers is wel iets anders dan hetzelfde eruit te laten zien in verschillende browsers. Het zorgen dat een website er in elke browser hetzelfde uitziet is bijna onmogelijk, omdat niet iedere browser dezelfde webstandaarden heeft (waaronder IE7 heel erg afwijkt van FireFox of Opera, maar dit zal met de komst van IE8 deels worden verholpen).

Er zijn wel hacks die dit kunnen verhelpen. Dit zijn ‘conditional comments’ die laden een andere CSS in een verschillende browser (werkt overigens alleen voor Internet Explorer). Deze comments zet je in de HTML.

Alle versies van Internet Explorer
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->

Aangeven voor aparte versies van Internet Explorer (Je kan de 5.0 veranderen voor elke versie van Internet Explorer, 5.0 5.5 6.0 7.0) Echter hoef je hier vaak 1 versie niet tussen te zetten, je maakt namelijk een CSS bestand voor 1 van de versies en maakt hier een hack in voor de andere versies.
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->

Je kan ook aangeven dat het alleen om eerdere versies gaat die die hack moeten dragen. Dan gebruik je in de comment de letters LT
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="……" />
<![endif]-->

Deze webstandaarden zullen dus de toekomst worden, meest steeds meer komende media-configuraties die websites kunnen uitlezen, zoals bijvoorbeeld een mobieltje of een spelcomputer. Meer weten over webstandaarden? Kijk dan zeker op: http://www.webstandaarden.org/

Deze standaarden helpen zoekmachines in het ’sorteren’ van een pagina. Zo is een stuk tekst in een kopje belangrijker als gewone inhoud. Tekst in een lijst heeft met elkaar te maken en een paginatitel is belangrijk dan een tussenkopje. Als een zoekmachine je site goed kan begrijpen zal hij hem ook goed kunnen doorzoeken.

Hierdoor en door andere waarden (zoals veel links naar de pagina) kan er een hoge ranking behaald worden. Met een hoge ranking word bedoelt dat de pagina voor een zoekmachine erg belangrijk is. Hij zal in de zoekresultaten hoger staan dan een andere, minder belangrijke pagina. Zeker nu er veel ‘gegoogled word’ is de SEO dus erg belangrijk.

Laten we beginnen met een voorbeeld van een snippet met een goeie structuur.
<h1>Paginatitel</h1>
<h3>Tussenkop</h3>
<p>
En de tekst hierbij
</p>

Erg belangrijk een duidelijke structuur. Veel gemaakte fouten die ik zie zijn divs zetten om een paragraaf, maar geen <p></p>. Natuurlijk mag je wel een div gebruiken, maar zet daar dan wel een <p> in. Dat helpt zoekmachines met zoeken door je pagina. Voor de paginatitel gebruik je natuurlijk een hoge H (<h1>/<h2>) en voor een tussenkop een kleinere.

<ul>
<li><a href="home/">Home</a></li>
<li><a href="contact/">Contact</a></li>
</ul>

Ook iets wat vaak fout gedaan word, menu-items staan in verband met elkaar. Zet ze dus in een lijst!


<table>
<tr>
<td>Tussenkop</td>
<td>
<p>
En de tekst hierbij
</p>
</td>
</tr>
</table>

Wees maar niet bang, dit was een voorbeeld hoe het dus niet moet. Tabellen is bedoelt om informatie te geven die van elkaar afhangt. Zoals deze tabel:

Stukken tekst moeten worden neergezet als in het 1e voorbeeld. Een ander iets waarvoor mensen vaak tabellen gebruiken zijn formulieren, deze kan je het beste met CSS stijlen. Door labels te gebruiken.


<label for="test">Naam: </label><input type="text" id="test" name="naam" value="Naam"/>
<label for="test2>eMail: </label><input type="text" id="test2" name="mail" value="eMail"/>

Dit allen kan je tegenover elkaar positioneren door div’s, met divs bepaal je dus het grote geheel.

<div style="float:left;">
<h3>Tekst</h3>
<p>En nog meer tekst over tekst.</p>
</div>
<div style="float:left;">
<ul>
<li><a href="home/">Home</a></li>
<li><a href="contact/">Contact</a></li>
</ul>
</div>

Hier zal bijvoorbeeld het menu naast de tekst staan.

Mijn vraag aan jullie in de reacties, wat zie jij vaak fout gedaan worden? En hoe moet het dan volgens jou?

Je kent ze vast wel de bekende iconen in de adresbalk en tabbladen, ze zorgen niet enkel voor een mooi compleet beeld van je website, het zorgt ook voor herkenning in je tabbladenbalk en bladwijzerlijst. We pakken bijvoorbeeld: en je ziet direct dat het van Google afkomstig is, is Microsoft en jawel… Geenstijl. Kortom een fav(orite)-icoon staat niet alleen leuk, het bouwt ook herkenbaarheid op.

Een favicon voor je website is geen noodzaak, maar het helpt je bezoekers wel jouw website eruit te plukken, in bijvoorbeeld de bladwijzerlijst. Laten we dus uiteenzetten hoe we het favicon plaatsen op je website.

Formaat:
Het favicon bevat altijd de afmeting 16 breed en 16 hoog, dit is het universele formaat waarin je icoon zeker goed wordt weergegeven.

De afbeelding moet worden opgeslagen worden in het ico-formaat hier zijn verschillende programma’s voor:

• Favicon Editor (online)
• ICOFormat (photoshop plugin)
• PNG to icon converter

Plaatsen:
Je favicon plaats je in de root van je website, dus op de plek waar in 9 van de 10 gevallen zich ook het index.html bestand bevind. Zodra je hem hebt geüpload naar de root, zouden browsers hem automatisch moeten herkennen en weergeven.

Gebeurd dit niet of wil je de favicon in een andere directory stallen dan kun je door middel van de link tag hem in je website zetten:

<link href="./favicon.ico" link rel="shortcut icon" type="image/x-icon" />

<html>
<head>
<title>Mijndomein.nl</title>
<link href="./stylesheet.css" rel="stylesheet" type="text/css" media="all" />
<link href="./favicon.ico" link rel="shortcut icon" type="image/x-icon" />
</head>
<body>

Opmerking:
Mocht je het opslaan als ico-formaat lastig vinden, dan wijk je hier vanaf en maak je een gif-afbeelding en vul je in het href-attribuut gewoon: “favicon.gif” in.
<link href="./favicon.gif" link rel="shortcut icon" type="image/x-icon" />
Let op: Dan wordt hij niet automatisch door browsers herkent en zul je op iedere pagina deze regel moeten plaatsen.

Inspiratie:
Op het prachtige inspiratieblog Smashing Magazine vind je 5 blogposts om inspiraties op te doen voor jouw eigen unieke favicon:

• Inspire Yourself: 50 Remarkable Favicons
• Inspire Yourself: More Creative Favicons
• Creative Favicons: When Small Is Beautiful
• Creative Favicons: Tiny Artwork
• Favicons Episode 5: The Delicate Beauties

Tips bij het maken

1. Trek een gelijkenis met je website; Zorg dat je icoon overeenkomt met je website, is je website simpel en strak? Zorg voor een simpel en strak icoontje. Verwerk de kleuren van je site in het icoon. Of pak de eerste letter van je logo.
2. Houd het simpel; Je hebt maar 16×16 als grootte, dat is klein en ga dus geen ingewikkelde afbeeldingen er in verwerken die worden meestal niet herkend.
3. Transparante icoontjes; Onthoud dat met een achtergrondkleur je favicon een blok wordt en dus niet samengaat met je adresbalk. Als voorbeeld het oude favicon van webmasterplein: