CSS – Waebo

CSS3 Logos : Logotypes en HTML & CSS3, sans images ni JS

TiChou — Thu, 05 Jan 2012 17:35:15 +0000

Pas d’images ni de JavaScript. Un brin d’HTML accompagné de CSS3 donne désormais naissance à de belles créations graphiques. Preuve en sont les réalisations (animées ou non) ci-dessous tirées d’une galerie de logos CSS3.

A noter que les plus talentueux pourront proposer leurs créations sur ledit site internet afin de compléter la liste des logos actuellement visibles.

Pour découvrir les techniques et astuces mises en oeuvre ou juste pour le plaisir des yeux, rendez-vous sur le site CSS3 logos.

Source : W3sh

Articles similaires :

Internet Explorer 10 : Platform Preview 4 du navigateur

TiChou — Wed, 30 Nov 2011 17:00:06 +0000

Microsoft publiait la première Platform Preview d’Internet Explorer 10 en avril 2011 soit il y a plus de sept mois. Après IE10 PP2 dévoilé en fin juillet 2011 et IE10 PP3 mi-septembre, c’est au tour de la quatrième Platform Preview d’être aujourd’hui poussée au public.

Sans surprise, de nouvelles fonctionnalités sont présentées, bien différentes de celles sur lesquelles se concentraient les développeurs dans les versions précédentes (glisser-déposer, correction orthographique, tactile) si ce n’est la prise en charge améliorée de l’HTML5 et du CSS3.

Présentation des nouvelles fonctionnalités en vidéo :

De nombreuses nouveautés sont à souligner, dont notamment :

Support de Cross-Origin Resource Sharing (CORS) pour des requêtes XMLHttpRequest sécurisées inter-domaines
Support de l’API File Writer avec blobBuilder afin de permettre la manipulation de gros objets binaires au sein du navigateur
Support des tableaux typés en JavaScript pour un stockage et une manipulation efficaces de données typées
Support de la propriété CSS3 user-select définissant les possibilités de sélection de l’internaute dans une page internet ou application web
Support des sous-titres et fichiers de sous-titres dans les vidéos insérées à partir de la balise HTML5, incluant time-code (TC) et position

Cette version introduit de plus une mise à jour du mode de compatibilité (quirks mode) se rapprochant de ceux proposés par les navigateurs concurrents que sont Firefox, Chrome, Safari, et Opera.

A noter qu’Internet Explorer 10 Platform Preview 4 est uniquement disponible sur Windows 8. Windows 7 sera également servi lors de la release finale, mais rien pour Windows Vista ni Windows XP.

Source : IEBlog

Articles similaires :

Firefox 10 : Les outils pour développeurs présentés en vidéo

TiChou — Wed, 30 Nov 2011 11:00:03 +0000

Je vous parlais il y a deux jours des outils pour développeurs actuellement nativement disponibles sur Firefox 10. Cette release, présente sur le canal Aurora, sera publiée en version finale en début d’année 2012. De quoi parcourir le code HTML et autres propriétés CSS sans installation de module complémentaire, en plus de pouvoir bénéficier de la Console Web et du Scratchpad pour exécuter du JavaScript.

La fondation Mozilla, éditeur du navigateur internet, vient de publier une vidéo présentant ces nouveaux outils à destination des développeurs, intégrateurs et autres graphistes :

Pour rappel, la jeunesse du projet qui devrait à terme remplacer le célèbre Firebug implique sans surprise le manque de certaines fonctionnalités, notamment au niveau des actions sur le code HTML.

Firefox pourrait bien reconquérir le coeur de certains utilisateurs passés à Google Chrome…

Source : Blog Firefox

Articles similaires :

Firefox 10 : Examiner le code avec les outils pour développeurs

TiChou — Mon, 28 Nov 2011 11:00:39 +0000

Depuis de nombreuses années déjà Firefox est doté d’un extraordinaire module complémentaire qui ne manque pas de quotidiennement simplifier la vie aux nombreux développeurs que le navigateur internet compte dans ses fidèles utilisateurs : Firebug. Initialement créée par Joe Hewitt, cette extension vivait un moment délicat cet été à l’annonce du départ de son contributeur principal John J. Barton qui partait se pencher sur la prochaine génération d’outils pour développeurs de Google Chrome.

La fondation Mozilla travaille quant à elle sur un projet visant à offrir ses propres outils à destination des développeurs. C’est ainsi que Firefox 10, encore sur le canal Aurora, propose un inspecteur de code dont les fonctionnalités sont similaires à celles de Firebug.

Disponible depuis le menu (Examiner), dans le menu contextuel (Examiner l’élément) via un simple clic droit de souris sur la page web ou au travers d’un raccourci clavier, l’inspecteur permet de parcourir les éléments et de facilement accéder au code source associé. On appréciera la fluidité des transitions entre les balises avec le mulot.

Le code HTML est visible dans le volet inférieur surmonté d’un breadcrumb qui permettra d’aisément accéder aux éléments parents et enfants mais aussi frères, respectivement à gauche, à droite et sur l’élément sélectionné.

Le style CSS est quant à lui affiché dans le volet latéral droit. D’un fonctionnement semblable à celui de Firebug, celui-ci met en évidence les propriétés et valeurs des IDs et classes de la balise examinée mais autorise également l’ajout de nouvelles entrées, la modification ou la désactivation via la checkbox en regard de chaque ligne. A noter que deux vues sont ici disponibles : par Règles et par Propriétés.

Petit retour sur la Console Web dans laquelle il est possible d’avoir accès à l’élément inspecté via la variable $0.

Vient s’ajouter à cette collection d’outils pour développeurs le Scratchpad déjà intégré depuis Firefox 6.

De par sa jeunesse, l’inspecteur (HTML + CSS) manque encore de fonctionnalités essentielles comme l’édition et la suppression d’une balise (et son contenu) ou l’autocomplétion de propriétés CSS. En espérant que ces améliorations soient rapidement apportées afin de soumettre à la communauté un outil en mesure d’être présenté comme un concurrent crédible à Firebug.

Articles similaires :

jQuery Mobile 1.0 : Framework JavaScript mobile stable

TiChou — Sat, 19 Nov 2011 07:05:44 +0000

C’est au courant de l’été 2010 qu’était dévoilé le projet de version mobile du célèbre framework JavaScript jQuery, nommé sans surprise jQuery Mobile. Après une première version alpha en octobre 2010 et de longs mois de travail, la version finale était enfin publiée il y a trois jours.

C’est un outil de taille qui est diffusé là aux développeurs. jQuery Mobile permet en effet la conception simplifiée de sites internet en HTML5 sans se soucier des différents appareils (smartphones, tablettes et liseuses) et plateformes mobiles – comprenez surtout navigateurs – depuis lesquels seront exécutées les applications web.

L’équipe en charge du développement annonce une importante hausse de performances en terme de temps nécessaire au rendu des pages entre jQuery Mobile RC2 et la Release Candidate 3 qui est à la base de la version stable : de 30% à 50% !

Est également dévoilé ThemeRoller for Mobile, un outil WYSIWYG de création de thèmes. Il est ainsi facile de créer des templates personnalisés via de simples glisser-déposer, sans écrire une seule ligne de CSS. Le résultat peut ensuite être partagé via une URL et/ou téléchargé au format ZIP pour une application directe ou des modifications ultérieures.

De très nombreux plugins et extensions mais aussi articles et tutoriels sont d’ores et déjà disponibles pour jQuery Mobile. De quoi se lancer rapidement dans le développement d’une déclinaison mobile de son site internet.

Pour plus d’informations, rendez-vous sur le site officiel de jQuery Mobile.

Source : Blog jQuery Mobile

Articles similaires :

Firefox 8, 9 & 10 : Toutes les dernières nouveautés du navigateur

TiChou — Mon, 14 Nov 2011 17:40:57 +0000

C’est sans surprise par rapport au cycle de développement du navigateur qu’est dévoilé Firefox 8, six semaines après la sortie de Firefox 7. Une des nouveautés phares de cette release concerne sans doute les extensions. Pour des questions de performances mais aussi de sécurité, Firefox désactive en effet par défaut les modules complémentaires installés par des tiers. Le butineur offre de plus la possibilité aux utilisateurs d’interroger Twitter via un champ de recherche supplémentaire.

Firefox annonce qui plus est – et pour la énième fois – une meilleure gestion de la mémoire vive mais aussi un support accru du WebGL, de l’HTML5 (WebSockets, balises audio & vidéo) et du CSS3 en plus des corrections de bugs et autres améliorations de l’existant.

Finalement, la restauration des derniers onglets et fenêtres utilisés – soit la dernière session du navigateur – fait enfin son entrée. Dans ce sens, afin de ne pas surcharger le navigateur au démarrage, le chargement des onglets peut être reporté via une préférence : Ne pas charger les onglets tant qu’ils ne sont pas sélectionnés.

Firefox 9

En toute logique, Firefox 9 atteint de son côté le canal bêta. Cette version du navigateur met l’accent sur les performances JavaScript. Ainsi, afin de ne pas se laisser distancer par Chrome et son moteur V8 couplé au compilateur Crankshaft, la fondation Mozilla travaille sans relâche et annonce des gains de plus de 30% sur les benchmarks Kraken et V8. Pour se faire, SpiderMonkey se voit soutenu par le compilateur JIT JaegerMonkey auquel a été intégré l’inférence de types (TI – Type Inference) ; fonctionnalité permettant de déterminer le type d’une variable sans qu’il ait été déclaré dans le code.

Firefox 10 vient quant à lui d’échouer sur le canal Aurora et le constat est difficile à accepter. Une sur-consommation de la RAM qu’on pourra difficilement manquer : près de 500MB avec 4 onglets ouverts peu après le lancement et 1GB quelques minutes plus tard avec 6 onglets. Espérons qu’il s’agisse d’une fuite mémoire qui sera rapidement corrigée ou un tel comportement pourrait se solder par l’abandon du navigateur pour… Google Chrome.

Aucune nouvelle du compilateur à la volée IonMonkey.

Articles similaires :

Prefix Free : Propriétés CSS sans préfixe vendeur

TiChou — Tue, 18 Oct 2011 16:30:01 +0000

Tout graphiste, intégrateur ou autre personne ayant un jour écrit quelques lignes de CSS avancées a été confronté aux préfixes vendeurs. Différents selon les navigateurs internet ou plus exactement selon les moteurs de rendu, ceux-ci sont nécessaires pour bien des propriétés CSS. Il est ainsi rapidement fastidieux de préciser ces particules, d’autant plus que leur prise en compte évolue avec le temps.

Afin de se passer de cette importante contrainte, Lea Verou dévoile -prefix-free. Cet outil se présentant sous la forme d’un fichier JavaScript minifié (prefixfree.min.js) de seulement 4Kb se propose, via une simple inclusion, d’ajouter les préfixes nécessaires en fonction des besoins de l’internaute visitant la page d’un site web. En d’autres termes en fonction de son navigateur.

A titre d’exemple, la propriété CSS3 pour contrôler la durée des transitions – transition-duration – donnera :

Firefox : -moz-transition-duration
Opera : -o-transition-duration
Chrome & Safari : -webkit-transition-duration

A noter que cette initiative est saluée par Eric Meyer, auteur de la célèbre feuille de reset CSS.

Pour plus de renseignements et/ou télécharger Prefix Free, rendez-vous sur le site officiel.

Articles similaires :

Facebook : Barre de navigation fixe et visibilité permanente

TiChou — Fri, 16 Sep 2011 13:00:52 +0000

Facebook dévoile aujourd’hui une légère modification technique au niveau de son interface utilisateur. Est ainsi modifiée une simple propriété CSS de position et la barre de navigation devient omniprésente. Graphiquement, le résultat est là !

Après un test concluant auprès d’un groupe restreint de personnes sélectionnées, le réseau social fixe le fameux bandeau contenant les liens essentiels à la navigation, les notifications et le moteur de recherche pour le plus grand plaisir des membres.

Comme visible sur la capture ci-dessous, la barre de navigation est désormais visible à tout moment, peu importe la position de l’internaute dans la page.

Articles similaires :

Internet : Evolution des technologies web et des navigateurs

TiChou — Tue, 06 Sep 2011 08:00:38 +0000

Le géant de la recherche annonçait la disponibilité de son navigateur internet début septembre 2008. A l’occasion du troisième anniversaire de ce butineur en pleine forme, Google dévoile une infographie interactive de l’évolution du web.

Y sont ainsi présentés sur un axe de temps les technologies et navigateurs web qui ont fait et font encore actuellement internet tel que nous le connaissons. De 1990 à 2011, retrouvez des protocoles (HTTP, SSL), langages ou assimilés (HTML & HTML 5, CSS, JavaScript, Flash, XML, AJAX) ainsi que nos fidèles browsers dont certains sont actuellement dépassés (Mosaic, Netscape, Opera, Internet Explorer, Safari, Firefox, Chrome).

Google va jusqu’à préciser ce qu’on pourrait assimiler aux futurs des navigateurs, ces systèmes d’exploitations minimalistes comme Chrome OS.

Pour découvrir cette infographie construite en HTML5, rendez-vous sur le site suivant : L’évolution du Web.

Source : Blog Google Chrome

Articles similaires :

Firefox 7 : Nouvelles fonctionnalités du navigateur

TiChou — Mon, 05 Sep 2011 15:00:14 +0000

Difficile de suivre les nouveautés de Firefox avec le nouveau rythme de développement de six semaines adopté par la fondation Mozilla.

Firefox 6 sortait mi-août, dévoilant de nombreux changements aux utilisateurs (internautes et développeurs) dont notamment : simplification de l’URL et mise en emphase du nom de domaine, bloc-notes JavaScript Scratchpad et Permission Manager, WebSocket full-duplex, console Web déplaçable, amélioration de Firefox Sync ainsi que du démarrage du navigateur internet et finalement de nouvelles possibilités HTML 5 et CSS 3.

Firefox 7, actuellement en version bêta, se focalise quant à lui sur l’amélioration de la consommation mémoire grâce au projet MemShrink. Des gains de 20% à 30% sont ainsi globalement notables, allant jusqu’à 50% dans certains cas. Sans sollicitation, le navigateur ne consommera donc pas plus de mémoire et une partie de cette dernière est libérée à chaque fermeture d’onglets.

Même si aucun benchmark n’existe actuellement, le projet projet MemShrink semble selon plusieurs tests porter ses fruits.

A l’heure à laquelle le projet Electrolysis n’est toujours pas intégré, Firefox trouve un moyen d’améliorer sa stabilité, limitant ainsi les risques de crash.

On notera finalement la correction de bugs divers, la synchronisation immédiate des éléments avec Firefox Sync, le support de l’accélération matérielle avec Azure Direct2D pour la restitution des éléments Canvas ainsi que la prise en charge de la propriété CSS 3 text-overflow: ellipsis; et de la spécification Web Timing permettant de mesurer le temps de chargement d’une page web.

Firefox 7 est attendu en version finale pour la fin du mois de septembre 2011.

Source : Blog de Nicholas Nethercote

Articles similaires :