JavaScript – 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 :

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 :

Pdf.js : Fonctionnement du lecteur PDF JavaScript & HTML5

TiChou — Mon, 31 Oct 2011 17:00:28 +0000

La fondation Mozilla levait au courant de l’été le voile sur son projet de développement d’une visionneuse PDF basée sur de l’HTML 5 et du JavaScript : pdf.js. Le futur lecteur PDF de Firefox a depuis cette date bien évolué, proposant les fonctionnalités essentielles à la lecture de tels fichiers sur internet : pagination, zoom, impression, téléchargement, recherche et marque-page sans parler de l’affichage des contenus textuels et autres images.

Retrouvez via la vidéo suivante (~30 min) toutes les informations à propos de Pdf.js ; du projet au rendu des fichiers PDF en passant notamment par la structure des documents à afficher, les problèmes auxquels sont confrontés les développeurs et finalement le travail qui reste à faire.

Pdf.js est un projet intéressant à suivre de prêt !

Source : Blog Mozilla Labs

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 :

Doodle Google : Les logos commémoratifs fêtent leurs 13 ans

TiChou — Mon, 12 Sep 2011 14:30:13 +0000

Google exhibait ses premiers logos commémoratifs en 1998, pour rendre hommage à des personnalités ou à des moments importants de notre histoire. Ces doodles, bien connus, attendus et appréciés des internautes, représentent un travail conséquent pour une visibilité sur la page d’accueil du moteur de recherche de seulement 24 heures. Les créations bénéficient donc d’un affichage limité dans le temps mais d’une audience incroyable de par leur emplacement.

A l’occasion de ce 13ème anniversaire, l’AFP réalisait il y a quelques jours un reportage sur le travail de l’équipe en charge du doodle quasi-quotidien – en confrontant toutes les déclinaisons de Google – pilotée par Ryan Germick.

Sans surprise, les technologies employées ont beaucoup évolué, notamment ces dernières années. Alors qu’il s’agissait initialement d’images statiques, les logos sont désormais souvent dynamiques grâce à de la vidéo, du JavaScript ou encore de l’HTML 5.

Hasard du calendrier, la vidéo présente justement le doodle de Freddie Mercury, l’une des plus belles réussites selon moi, avec le jeu vidéo Pacman et le guitariste Les Paul.

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 :

Adobe Edge : Animations en HTML5, CSS3 et JavaScript

TiChou — Tue, 02 Aug 2011 16:00:35 +0000

Adobe Systems, société éditrice de nombreux logiciels graphiques reconnus comme Photoshop, Illustrator ou encore InDesign, annonce la disponibilité prochaine d’un nouvel outil nommé Edge.

Plutôt que de convertir des fichiers Flash en HTML 5 avec Adobe Wallaby (ou Google Swiffy), la firme californienne propose une application capable de générer des animations en HTML5, CCS3 et JavaScript via de simples clics de souris et autre glisser-déposer d’éléments au sein du projet.

Explication du fonctionnement d’Adobe Edge en vidéo :

De nombreux formats d’images sont compatibles (PNG, JPG, GIF et SVG) et, comme vu dans la présentation, l’auteur de l’animation peut jouer sur différentes transformations (couleur, transparence, taille, etc.) de composants sur la ligne de temps.

A noter que le moteur de rendu intégré à Adobe Edge est ni plus ni moins que WebKit et que le framework JavaScript sollicité est basé sur l’excellent jQuery.

De quoi proposer un contenu dynamique pour les navigateurs de nos ordinateurs mais aussi ceux des tablettes graphiques et autres appareils mobiles tels que nos smartphones.

Pour plus de détails ou pour télécharger la preview de Edge (avant qu’il ne devienne payant ?), rendez-vous dans les labs Adobe.

Source : Clubic

Articles similaires :