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

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 :

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 :

WordPress : Booster les performances de son site en infographie

TiChou — Fri, 28 Jan 2011 19:11:20 +0000

A quels niveaux est-il possible d’intervenir pour optimiser le fonctionnement du célèbre CMS WordPress et ainsi améliorer les performances de son site internet mais aussi son référencement ? Configurations et autres couches de cache sont sans surprise la clé de la réussite.

Explications à travers l’infographie suivante.

A vous de jouer pour proposer aux internautes un surf plus agréable mais aussi pour permettre une meilleure prise en compte de votre site web par les moteurs de recherche.

Articles similaires :

Chromeless : Créer son navigateur web en HTML, CSS et JS

TiChou — Fri, 17 Dec 2010 16:17:39 +0000

La fondation Mozilla lève le voile sur un nouvel outil à travers ses laboratoires : Chromeless. Actuellement en version 0.1, Chromeless offre ni plus ni moins que la possibilité, via des technologies très accessibles telles que l’HTML, le CSS et le JavaScript, de développer son propre navigateur internet ; de la structure à des contrôles plus avancés, en fonction des envies et/ou besoins.

Techniquement, Chromeless est constitué du XULRunner accompagné d’une surcouche de composants divers. Vient s’ajouter le browser code, complètement personnalisable, qui hébergera les sites visités sur le web.

Présentation de Chromeless en vidéo :

Cette esquisse de projet, compatible Windows, Mac OS et Linux, n’offre pour l’instant que de maigres fonctionnalités dont notamment :

tracking du chargement de la page
notification de connexion sécurisée (SSL)
enregistrement de données dans un profil utilisateur

Intéressés et autres passionnés, à vos claviers pour construire votre navigateur personnalisé et pourquoi pas contribuer à développer Chromeless.

Source : Blog Mozilla Labs

Articles similaires :

Google Chrome 8 : Lecteur PDF intégré et Chrome Web Store

TiChou — Fri, 03 Dec 2010 18:54:14 +0000

Google Chrome 8 était dévoilé mi-octobre 2010 sur le canal de développement, seulement une vingtaine de jours avant l’annonce de la disponibilité de Google Chrome 9 sur ce même canal suite à la promotion du premier sur le canal bêta.

C’est aujourd’hui qu’est poussé Google Chrome 8.0.552.215 sur le canal stable. Cette version finale apporte, par rapport à Google Chrome 7, pas moins de 800 corrections de bugs et autres dysfonctionnements du navigateur web, tant au niveau de la sécurité que de la stabilité. Google Chrome 8 embarque qui plus est de nouvelles fonctionnalités plutôt attendues.

La première concerne le lecteur PDF intégré, basé sur une implémentation maison et proposé par défaut aux utilisateurs pour visualiser leurs fichiers PDF. Tout cela dans un bac à sable (sandbox) pour, comme on peut s’en douter, des question de sécurité.

Est finalement mis en avant le Chrome Web Store, la place de marché pour applications web gratuites et payantes développées en HTML/HTML 5, Flash ou même C++.

Un passage rapide dans les prochaines semaines de Google Chrome 9 sur le canal bêta pour laisser le canal de développement à Google Chrome 10 ?

Source : Blog Google Chrome

Articles similaires :

Gecko reflow : Composition d’une page web en vidéo

TiChou — Thu, 25 Nov 2010 22:15:39 +0000

Comment se fait la construction d’une page internet par le navigateur après que celle-ci ait été délivrée au client par le serveur web ?

Voici deux vidéos qui illustrent parfaitement l’agencement progressif via CSS des différents blocs/conteneurs HTML constituant une page de site internet.

Pour mozilla.org :

Pour wikipedia.org :

Impressionnante structuration du moteur de rendu Gecko (Firefox).

Source : Blog Mozilla

Articles similaires :

Opera 11 bêta : Les groupes d’onglets et extensions dévoilés

TiChou — Tue, 23 Nov 2010 22:14:26 +0000

Après deux versions alpha dont la dernière il y a quelques jours seulement, la société norvégienne annonce la disponibilité d’Opera 11 bêta.

Est en premier lieu à souligner le nouveau Tab snacking. Pour pallier au problème des onglets trop nombreux au sein de nos fenêtres, l’éditeur propose, à l’instar des répertoires pour classer des fichiers, la création de groupes permettant un gain de place considérable.

Explications en vidéo :

Opera 11 se voit qui plus est doté d’extensions venant, tout comme pour Firefox et Chrome, apporter des fonctionnalités supplémentaires au navigateur. Rendez-vous dans la galerie pour faire votre choix. Côté développement de tels modules complémentaires, seront à l’honneur l’HTML et le CSS accompagnés de l’incontournable JavaScript.

D’autres améliorations sont finalement à noter dont notamment au niveau de la gestion de la navigation à la souris (mouse gestures), de la prise en charge de l’HTML 5 via le moteur de rendu Presto et des performances JavaScript.

Source : Blog Opera

Articles similaires :