Le navigateur

source: internetbrowsersoftware

Cet outil, qui vous sert à surfer sur le web, se doit de pouvoir afficher correctement votre site web. S'il n'en existait qu'un, cela serait simple, mais il en existe des dizaines ayant évolué de version en version... Mais l'utilisateur est parfois pas trop doué et il ferme les demandes de mise à jour, ou alors l'employé de bureau dépend du bon vouloir de l'administrateur informatique ne voulant pas trop se fouler le poignet (je caricature, j'aime beaucoup les administrateurs informatiques ).

Pour expliquer la difficulté, voici les principaux butineurs du web (il en existe d'autres, mais ils sont basés sur les même moteurs de rendu) :

• Internet explorer
• Google Chrome
• Mozilla Firefox
• Safari
• Opera

"5 seulement ? de la rigolade tout ça!"... c'était trop simple en effet, here comes a new challenger, les versions !

Les navigateurs évoluent ainsi pour adopter les nouvelles technologies du web, mais à des rythmes très variables. Le record de lenteur revenant certainement à Internet Explorer.

L'utilisateur est, au final, seul maître à bord et il convient donc de le sensibiliser sans arrêt afin qu'il mette à jour son navigateur. Pour cela il est, je pense, nécessaire de proposer des versions de son site un peu différentes. Le CSS3 permet ainsi d'ajouter des effets de bords arrondis, d'ombrages facilement. Sur un ancien navigateur, cela ne sera pas visible, sans pour autant gêner l'ergonomie du site. Le visiteur aura tôt ou tard l'occasion de voir ce site sur un autre ordi et constatera la différence ou pas, dans ce cas, tant pis pour lui . Je plaisante bien sur, le site doit rester beau sur un ancien butineur.

Qu'est-ce que le HTML5 et le CSS3... est-ce que cela aura de l'avenir ?

Je répond déjà à la seconde question : oui, c'est même l'avenir du web sans aucune hésitation ! Il est donc primordial de s'y intéresser dès aujourd'hui pour ne pas manquer le train.

Je ne vais pas me fatiguer et je vous copie/colle des explications de wikipedia.

CSS3 :

"CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML."

La version 3 est une évolution majeure apportant de nouveaux sélecteurs, des nouvelles propriétés (ombrage, background multiples, dégradés en tout genre, bordures complexes et j'en passe)... Voici un site permettant de générer des effets: CSS3generator.

HTML5 :

"HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est actuellement en développement. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été initié par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 2014, et encourage les développeurs Web à utiliser HTML 5 dès maintenant."

Comme vous le constatez, le HTML5 est une petite révolution pour le web, il ouvre la porte à des possibilités énormes et vient concurrencer, sinon compléter d'autres technologies comme le Flash, le PHP ou le javascript.

Dans cet article, je vais me focaliser sur les balises de structuration de page du HTML5 (en gros l'usage que l'on avait des balises xHTML), car je n'ai pas encore explorer les autres possibilités .

C'est bien jolie tout ça, mais j'en fait quoi aujourd'hui ?

Quelques astuces pour se mettre doucement au HTML5 et au CSS3 dès aujourd'hui

En préambule, je tenais à dire mon point de vu sur le cas Internet Explorer 6 (sorti en 2001). Il fait parti de la préhistoire du net, mais il est encore utilisé dans certaines entreprises en raison des applications développées uniquement pour ce navigateur avec ses ActiveX propriétaires. De ce fait, à mois que vous développiez un site pour entreprise, vous pouvez faire l'impasse de son support (à vous les display:inline-block et les images en PNG !!!). De plus, en terme d'usage à travers le monde, il représente un infime pourcentage.

Internet Explorer 7 (sorti en 2006) est un navigateur plus délicat, car il reste assez utilisé, mais de moins en moins en raison des mises à jours de Windows XP ainsi que de Windows 7 qui se répend assez rapidement. Je suggère de ne pas perdre trop de temps en fignolage pour ce navigateur.

Windows XP est encore beaucoup utilisé, il peut disposer d'Internet Explorer 8 (dernière version possible sur ce système), il est donc impératif de supporter ce navigateur ! Mais vous devrez recourir à de nombreuses astuces pour votre site web.

Astuce 1 :

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Cela permet, en HTML5, de forcer Internet Explorer 8 à ne PAS utiliser le mode compatibilité (mode Internet Explorer 7) et, s'il est installé, d'utiliser en priorité "Google Chrome Frame".

Astuce 2 :

Il est possible d'adopter la structuration et les balises HTML5 (hors vidéo et autre trucs trop avancés) dans tout les navigateurs internet Explorer, grâce à cette simple ligne à placer  dans le <head> :

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->

Pour résumer, si vous visitez votre site avec IE6, 7 ou 8, le script se chargera de faire reconnaitre les balises HTML5 au navigateur.

Ajout: il est nécessaire de transformer les nouvelles balises en type "block" avec ceci pour leur donner un comportement conforme. Ajoutez ceci sur votre feuille de styles:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

Astuce 3 :

<!--[if IE 7 ]> <html lang="fr" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="fr" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="fr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->

Vous remarquez que cela ajoutera une classe selon la version d'Internet Explorer. A vous de ruser sur votre feuille de style en ajoutant la classe correspondante pour spécifier les particularités des navigateurs.

Astuce 4 :

Vient le cas du CSS3... Je ne parlerais pas des transformations 3D, seulement compatibles avec webkit et encore sur des ordi pas trop vieux (cela ne fonctionnera pas si vous avez une vieille carte graphique), ni des transformations (qui fonctionnent déjà bien sous firefox, chrome et Safari et qui se dégradent correctement sous IE, mais sans l'animation bien sur).

Le standart CSS3 (tout comme HTML5) n'étant pas encore finalisé, chaque navigateur a ses propres propriété, heureusement très semblable, voir identiques. Il suffit d'ajouter des préfixes :

-moz- pour Firefox

-webkit- pour Chrome ou Safari

-o- pour opera

-ms- pour IE 9

Par exemple, voici comme ajouter une ombre :

standart : box-shadow:-2px 0 3px #000;

Fireofx : -moz-box-shadow:-2px 0 3px #000;

Vous vous retrouvez vite avec une feuille de styles gigantesque et très difficile à maintenir. Confronté à ce problème j'ai réfléchi à une solution côté serveur en PHP (il suffit de générer la feuille de style en concaténant les préfixes), mais j'ai trouvé une solution toute faite et très simple en javascript développée par Lea Verou, Prefixfree.

Télécharger le script, mettez le sur votre ftp et une simple ligne juste après l'appel de la feulle de style pour éviter l'effet de délais: 

 <script src="prefixfree.js"></script>

Et hop rien à faire de plus, à part effacer toutes les propriétés devenues inutiles dans votre CSS. En fait ce n'est pas aussi simple et cela nécessite une explication sur ce que réalise réellement ce script.

Il ajoute simplement, à la volée, les bons préfixes selon le navigateur utilisé. Cela ne fonctionne bien sur pas avec les propriétés "propriétaires" comme les dégradés dans les anciennes versions de safari ou iOS inférieur à la version 5. Cela ne rend pas Internet Explorer 8 compatible avec le CSS3 ! C'est uniquement pour faciliter la vie du développeur et c'est déjà pas mal . Comment d'habitude, lisez bien les explications/limites sur le site web de la développeuse.

Ma feuille de style est passée d'environ 500 lignes à 300 !

Astuce 5 :

Internet Explorer, ne faisant jamais comme les autres, bénéficie de filtres pouvant servir à créer des effets graphiques qui ne marcheront que chez lui... et encore en causant souvent des bugs, mais bon, cela permet parfois de faire des effets type CSS3. Je vous laisse chercher les filtres sur Google. Voici un exemple de site exposant les possibilités offertes :

top 10 des proprietes css3 compatibilite inter-navigateur

Il existe cependant une solution clé en main pour automatiser le support des effets, grâce à CSS3Pie.

J'y reviendrai quand je l'utiliserais dans mon nouveau design .

Alors, êtes-vous prêt à passer au HTML5 et au CSS3 ?

Pour présenter ce site, je vais tout d'abord parler de son développement. Il a été long, car il n'a pu se faire que sur mon temps libre très limité. Il a été long parce que j'apprenais en même temps à utiliser le framework Mootools, parceque j'ai suivi l'évolution du CSS3 en parallèle.

J'ai du refaire le site 2 fois afin d'en améliorer le code qui devenait toujours plus complexe et surtout afin d'utiliser intensivement le CSS3 en lieu et place des images. Je ne voulais pas manquer cette évolution majeure qui s'impose petit à petit. Le design du site n'utilise ainsi pas d'images mis à par les avatars, les illustrations/photos et les icones.

La conséquence directe à cela est qu'il vous faut un navigateur web moderne (Google Chrome, Mozilla Firefox, Apple Safari) mis à jour. Sous IE7 ou 8, le site devrait être utilisable, mais au design au minimum syndical ... avec Internet Explorer 9, il y encore des problèmes à régler avant que cela soit utilisable.

Ce site est donc un défit que je voulais relever. Je le souhaitais tourner vers l'Internaut, ce qui est à la fois une grande satisfaction pour moi, mais aussi une responsabilité vis-à-vis de vous.

J'espère que vous apprecierez le visiter, l'utiliser, l'habiter quelque part.

J'ai encore de nombreuses idées dans ma todo list, vous découvrirez donc quelques surprises à l'avenir .

Voici quelques exemples de ce dont les membres bénéficient :

- Le marque pages -

- L'éditeur d'avatars -

 - Le popup multi usage toujours accessible -

Steve Jobs est mort à l'âge de 56 ans le 5 octobre 2011. Co fondateur d'Apple, il avait été éjecté de la société, puis a été rappelé à son lit de mort pour la réanimer, ce qu'il fit de façon magistrale. Il est admiré de tous les chefs d'entreprises pour son génie, sa volonté et sa vision.

Le monde continu de tourner, mais les choses ne seront plus tout à fait comme avant.

Voici un discours qu'il prononça à l'université de Stanford et qui met le personnage à nu. Il y expose sa vie, le secret de sa réussite et il y fait l'éloge de la mort, "la meilleure invention de la vie". A écouter absolument !

[VOSTFR] Steve Jobs Stanford Commencement...

Salut l'artiste !

2 articles du site d'infos Macgénération:

- Steve Jobs

- Steve Jobs : réactions et hommages

Dans mes recherches de vols, je me suis "amusé" à essayer différents jours, différentes villes... et je tombe sur un vol Paris-Tokyo... via Beijing. Et là, ça a fait "tilt" (oui, ma tête fait des choses étranges parfois ).

Et si on regardait un vol Paris-Tokyo, Osaka-Beijing et Beijing-Paris, soyons fou... et ça marche . environ 760 euros par personne pour ces 3 vols (sans compter les changements) sur le site ebookers.

Ensuite s'organise le programme : réservations d'hôtels (hyper chers au Japon ), circuits de visite... Ca prend pas mal de temps afin d'optimiser au mieux une semaine au Japon. C'est si court pour découvrir un pays qui m'a fait tant rêvé depuis tout gamin. Pour la Chine, je laisse faire mon épouse et ses parents (et oui, ça a des avantages d'avoir une épouse chinoise avec des parents extrèmement gentils ).

Voici un résumé de notre voyage (qui débutera demain soir, samedi 3 septembre, dans l'avion) :

• Arrivée à l'aéroport de Narita et 3 jours à Tokyo (images et wikipédia)
• bus de nuit tout confort pour Kyoto (image)
• 3 jours dans cette ville superbe, véritable musée vivant (images et wikipedia)
• 1 nuit dans un Ryokan (super cher, mais expérience unique) (site web)
• Vol depuis l'aéroport de Kansai (Osaka) pour Beijing (images)
• là, grand mystère, je ne sais pas ce qu'on va faire lol
• 5 jours dans le Sichuan en tout cas, le pays des Panda avec des paysages à couper le souffle (images et wikipedia)

A mon retour, je partagerais avec vous photos, récis et vidéos de notre voyage en Asie... Si on ne se fait pas manger par les Pandas .

Elles ont commencé à disparaitre progressivement, Apple ayant été précurseur en retirant tout lecteur depuis 1998... dès le retour de Steve Jobs aux affaires . 

Sachez tout de même que Sony en a tout de même écoulé 12 millions en 2009... l'équivalent d'une face d'un simple disque blu-ray.

Que de souvenirs... les lecteurs mangeurs de disquettes, les disquettes moisies par l'humidité, les disquettes pleines de sable, les disquettes qui bloquent l'ordinateur, les disquettes vérolées, et même les disquettes instrument de musique :

Il va nous manquer ce son si particulier, qui, suivant ses variations, nous faisait craindre le pire... .

Enfin, le monde de l'informatique évolue sans cesse, mais n'oublions jamais les débuts, car ce que nous utilisons aujourd'hui appartiendra bien vite au passé.

- RIP -

... et le Big Brother en question n'est pas Google, mais un site communautaire dont tout le monde parle : Facebook !

Ce qui fait scandal, ce sont les nouvelles conditions d'utilisation qui ont été changées de façon discrète. Si auparavant les données personnelles étaient effacé si l'utilisateur cloturait son compte, cela ne sera plus le cas.

Face book conservera donc toutes vos données, mêem si vous fermez votre profil chez eux. Sachez que son créateur, Zuckerberg, est justement en train de réfléchir sur un moyen de monétiser son "petit" site.

Personnellement, j'ai très envie de l'aider, car cela ne doit pas être facile de se trouver dans sa position. Il pourrait très bien revendre les données des utilisateurs aux entreprises pour nous proposer des publicités ou des produits encore mieux ciblés. Il pourrait aussi les revendre au plus offrant...

J'ai bien fait de ne jamais m'inscrire dans ce genre de site sans éthique ni respect de ses utilisateurs !

source

Voici une bonne définition trouvée sur Wikipedia :

Ce que je vous propose, ce sont quelques démos venues de l'Amiga (vous êtes assez grand pour aller voir ce que c'est sur wikipedia), une machine mythique dans le monde de la démo. Pensez donc, 7 ou 14 mHz (oui, oui, pas de gHz !) suffisent pour faire tourner les démos suivantes. Le son était limité à 4 voix et 7 octaves... et pourtant, même si cela est surement du à une certaine nostalgie de ma part, ça le fait bien :-).

Je vous ai mijoté une petite sélection pour passer les fêtes avec une ambiance de foliiiiiizzzzz ;-) :

REPUGNANCE (Powerline - 1997)

STATE OF THE ART (Spaceballs - 1992) :

CONTROL (Oxygen - 1995) :

WORLD OF COMMODORE (Sanity - 1992) :

HARDWIRED (Crionics/The Silents - 1991) :

INTERFERENCE (Sanity - 1993) :

MOTION (Bomb - 1994) :

CAPTURED DREAMS (The Black Lotus - 1997) :

ARTE (Sanity - 1993) :

DESERT DREAM (Kefrens - 1993) :

... la suite ...

L'auteur de ce site vous propose de revivre avec lui son périple au pays du soleil levant, mais de deux façons complémentaires : le traditionnel, mais très bien illustré récit textuel qui sert de mise en bouche et de guide à la seconde option, la vidéo !

Il ne s'agit pas de simples vidéos brutes de décoffrage, mais de montages très imaginatifs mélant vidéos de l'auteur et séquences empruntées à la japanimation et aux classiques du cinéma japonais. Il montre et démontre même combien le montage est primordial pour faire vivre le tout. Ainsi, 10 petites minutes en paraissent 30 sans problème, car chaque minute compte.

Bon, trève de blablatages, cliquez sur ce lien, c'est impératif :

http://pocketjapan.over-blog.com/

Super Mario 3 parfaitement jouable

Et bien ce sont de vieilles consoles de jeux qui ont construites l'histoire de cet univers. Les 2 émulateurs fonctionnent vraiment très bien. Il y a juste un problème au niveau de la PCengine. En effet, parfois les jeux refusent de se lancer... il suffit de fermer et de rouvrir le navigateur et tout rentre dans l'ordre.

Superbe shoot-them-up sur PC-Engine

Bref, ce site est vraiment excellent pour tout passionné ou tout simplement pour se faire plaisir sainement.

Traduit en anglais, français... et chinois !

Sans plus attendre, voici le lien :

http://free4games.c.la