Posted: octobre 17th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3, jquery, Web Applications | Tags: appcelerator, html5, jquerymobile, phonegap, senchatouch, titanium | 2 Comments »
#jQuerymobile ou #Senchatouch ? Voila 2 principales questions qu’un développeur devra se poser à partir de maintenant lorsque son client lui demande de lui créer une application web mobile avec HTML5.
En effet, comme John Resig l’avait annoncé sur son compte twitter, jQuery mobile est enfin disponible depuis ce Samedi 16 Octobre 2010. jQuerymobile est un framework développé avec jQuery. Il permet de créer des applications web pour les plateformes des téléphones mobile de type smartphones tels que IOS (iPhone), Android, Blackberry, Bada, Windows Phone, Symbian, Palm Web OS et Meego.
Senchatouch est un concurrent très sérieux de jQuerymobile. La différence est que Senchatouch ne fonctionne correctement que sur IOS et Android d’après ce qui est annoncé sur leur site officiel. Il faut payer une licence pour le faire fonctionner correctement. D’un point de vue marketing, jQuery est le gagnant dans l’histoire. Aussi, comme jQuery est plus facile d’accès et plus utilisé que Sencha, ce nouveau framework jquerymobile trouvera facilement sa place.
Mon choix portera évidemment sur jQuerymobile. Ceci parce que ce framework a de l’avenir devant lui. La communauté de développeur qui enrichit jQuery grâce à leurs plugins est très grande. Ceci ne sera pas prêt de s’arrêter avec jQuerymobile.
HTML5 fait maintenant partie du quotidien des développeurs souhaitant créer des applications mobiles. Ce qui est impressionnant, est qu’il est possible actuellement de créer des applications natives avec du HTML5, CSS et Javascript. Un logiciel propriétaire Appcelerator a commencé à se lancer dans l’aventure. Il a été suivi par Phonegap.
Posted: septembre 5th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | 3 Comments »
Il est impossible de faire fonctionner du HTML5 et encore moins avoir des beaux effets CSS3 avec le navigateur Internet Explorer jusqu’à la version 8.
Toutefois, quelques outils et scripts existent et permettent de pallier à ce problème.
Selectivizr
Il s’agit d’un émulateur en Javascript de 19 pseudo-classes, 2 pseudo-élements et tous les attributs en CSS3 pour les version de 6 à 8 de Internet Explorer. Il suffit juste d’inclure le script téléchargeable sur le site Internet de l’éditeur dans l’entête de la page HTML c’est-à-dire entre les balises <head></head> et Selectivizr s’occupe du reste. Une autre librairie Javascript telle que (jQuery, Mootools, Django…) est nécessaire au bon fonctionnement de Selectivizr. En revanche, il n’est plus nécessaire de créer plusieurs feuilles de styles CSS pour les navigateurs non compatibles.
L’appel dans l’entête d’une page se fait tout simplement comme ce bout de code :
1
2
3
4
5
| <script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> |
Pour que ces élements CSS3 soient bien interprétés, il faut qu’ils soient inclus :
- Soit dans la balise <link />
- Soit avec la propriété @import dans la balise <style></style>
Aussi, la feuille de style doit être située sur le même serveur.
PIE (Progressive Internet Explorer)
PIE est un fichier .htc (behavior) qui permet à Internet Explorer 6 et 7 de reconnaître et d’interpréter les propriétés CSS3 suivantes : border-radius, box-shadow, border-image, rgba et gradients
IE-CSS3 est un autre fichier htc qui permet de faire les mêmes manipulations que PIE mais ne reconnaît que les propriétés suivantes : border-radius, box-shadow et text-shadow
html5shiv
html5shiv est un script Javascript créé par le développeur Remy Sharp. Ce script permet d’accepter les nouvelles balises du HTML5 avec les navigateurs Internet Explorer de 6 à 8.
Il suffit d’appeler le bout de code suivant dans l’entete de la page HTML :
1
2
3
| <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> |
Internet Explorer UA Style Sheets
Internet Explorer User Agent Style Sheets est une grande liste tabulaire permettant au développeur de mieux comprendre l’interprétation par défaut des balises par les navigateurs Internet Explorer 6 à 8.
Par exemple, une balise <body> possède une marge différente selon les navigateurs :
- Internet Explorer 6-7 – appliquent une marge supérieure et inférieure de 15px, et une marge gauche et droite de 10 pixels.
- Internet Explorer 8-9 et les navigateurs Opera, Webkit, firefox- appliquent une marge de 8 pixels.
Posted: août 25th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3, jquery | No Comments »
Parmi les types de champs classique d’un formulaire HTML4, on a :
- Un type text (une seule ligne), textarea (champ texte multiligne) ou un password
- Un type checkbox ou bouton radio.
- Un bouton de validation submit, de réinitialisation reset ou bouton simple button
- Un bouton avancé button.
- Une liste déroulante select avec ses items option.
- Un champ fichier file.
- Un champ caché hidden.
Read the rest of this entry »
Posted: août 12th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | Tags: html5Boilerplate, html5doctor, reset | No Comments »
HTML5 encore lui et toujours lui…Et ca ne fait que commencer. Parmi tous les navigateurs les plus utilisés, seul Internet Explorer 8 n’est pas totalement prêt alors qu’il détient quand même le maximum d’utilisateurs. La Beta de la version 9 de IE devrait sortir d’ici le 15 Septembre 2010 On pourra donc confirmer que HTML5 sera le nouveau standard pour créer des pages web en 2011.
Posted: avril 4th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | Tags: canvas, html5, rgraph | No Comments »
RGraph est un script javascript qui permet de créer des graphiques avec du HTML5 en utilisant la nouvelle balise <canvas></canvas>.
Parmi les possibilités offertes, on peut trouver :
- Des diagrammes, des camemberts, des graphiques sous forme d’entonnoirs, un gantt, des courbes, un rapporteur, des nuages de points.
Ce script fonctionne avec les navigateurs récents qui supportent le HTML5 et aussi avec Internet Explorer 8.
Posted: mars 25th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3, Technologie | Tags: css3, findmebyip, html5 | No Comments »
Et c’est parti pour les développeurs web, webdesigner, éditeurs, et les webmaster dans un nouvel apprentissage. C’est une nouvelle aventure qui s’ouvre dès maintenant, on peut le dire puisque presque tous les nouveaux navigateurs en ce moment supportent le HTML5 et les nouvelles propriétés du CSS3.
Le site findmebyip.com a dressé un tableau comparatif des propriétés du CSS3 et les navigateurs qui supportent actuellement ces propriétés. Pas de surprise au niveau des navigateurs de Microsoft. Toutefois, ils nous ont annoncé récemment que la version 9 de Internet Explorer allait supporter le HTML5 et le CSS3.
Les grands gagnants de l’aventure sont Chrome 4,5 et Safari 4 d’après le tableau.
Posted: mars 9th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | Tags: bubbles, css3, speech | No Comments »
Bientôt, on n’aura plus besoin de passer par photoshop pour dessiner des images ou faire des petits dégradés.
Comment cela est possible me diriez vous? et bien tout simplement grâce à la magie de CSS et plus particulièrement de la version 3 qui vient en parrallèle avec le HTML5.
Admirez plutôt le résultat ici : http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
Posted: février 11th, 2010 | Author: rabehasy | Filed under: HTML5 / CSS 3 | Tags: crossbrowser, html5, video | No Comments »
Video for Everybody est un bout de code HTML qui permet d’afficher une vidéo avec la nouvelle balise <video> du nouveau consortium HTML5.
A l’heure actuelle, le HTML5 n’est pas supporté par tous les navigateurs mais les navigateurs récents tels que Firefox, Chrome ou Opera 10 commencent à bien le supporter.
Ce bout de code va encore plus loin puisqu’il detecte si votre navigateur supporte la balise et propose une alternative dans le cas contraire.
Dans firefox, à partir de la version 3.5, comme la balise video est bien supportée, on a un bon affichage. En revanche, sur Internet Explorer en version 7. Le plugin Quicktime est appelé pour lancer la vidéo. Si quicktime fait défaut, alors le flash prend la main sur l’affichage.
Voici le rendu avec les navigateurs suivants :
Firefox 3.6
Chrome 4.0
Opera 10
Internet Explorer 8.0
Safari 4.0
(Edit 4 Septembre 2010) A côté de ce player, citons également FryPlayer qui est aussi fait en HTML5. Ce lecteur est construit avec jQuery. Il est skinnable. JWPlayer de longtailvideo, a récemment créé une version HTML5 de son célèbre lecteur.
Posted: février 9th, 2010 | Author: rabehasy | Filed under: HTML | Tags: rte, wysiwyg | No Comments »
TinyEditor est un RTE (Editeur de Texte Enrichi) qui possède les avantages suivants :
- Son poids est de 8Ko.
- Il peut être installée sur n’importe quel serveur et ne nécessite aucune autre librairie Javascript.
- Il possède plusieurs paramètres.
