Wisibility

Tutorial Illustrator : Gérer la surimpression (jeu., 17 mai 2012)

>> Lire la suite

Formation Pas à Pas : Dreamweaver CS6 - Les fondamentaux (mar., 15 mai 2012)

>> Lire la suite

Le Creative Cloud est disponible ! (ven., 11 mai 2012)

>> Lire la suite

Amnesty International, un nouvelle PUB poignante (ven., 11 mai 2012)

>> Lire la suite

Super concept d'appareil photo Instagram (mer., 09 mai 2012)

>> Lire la suite

Interview de l'artiste Neopen pour la collection TEN (mer., 09 mai 2012)

>> Lire la suite

Tutorial InDesign : Grep et Feuilles de styles (mar., 08 mai 2012)

>> Lire la suite

Formation Pas à Pas : Photoshop CS6 - Les nouveautés (ven., 04 mai 2012)

>> Lire la suite

Grafikart.fr

Ressource : Audio Player Canvas/HTML5 (ven., 18 mai 2012)
Fruit d'une "coding night" ce script permet de transformer une balise audio en un player arrondit. Ce player est avant tout une expérimentation, le principe étant de créer une interface originale sans utiliser d'image. Le système fonctionne en utilisant les canvas (ça fonctionne donc sur les navigateurs comprenant la balise <audio>). D'ailleurs pensez à utiliser les différent formats audios pour un support maximum. Si vous souhaitez faire évoluer ce plugin et coder de nouvelles fonctionnalités n'hésitez pas à m'envoyer un mail, je mettrais le code source sur GitHub.
>> Lire la suite

Tutoriel vidéo Merise : Modèle Conceptuel des Données (mer., 16 mai 2012)
Dans cette vidéo je vous propose de découvrir la partie MCD, Modèle Conceptuel des Données, de la méthode Merise. Le principe de la modélisation est de vous permettre de décrire l'architecture de vos données et les liaisons entre ces dernières.
>> Lire la suite

Alsacreations.com - Actualités

DOM : querySelector et querySelectorAll ()
L'API Selectors définit des méthodes pour accéder aux noeuds DOM, c'est-à-dire aux éléments HTML présents, à l'aide de fonctions de recherche. Leur intérêt est de faciliter la manipulation des noeuds en JavaScript, et d'aller bien au-delà des quelques fonctions qui équipaient les premières versions de l'interface DOM : getElementById() : recherche un élément d'après son identifiant (attribut id), getElementsByTagName() : recherche un élément d'après son type (balise), getElementsByClassName() : recherche un élément d'après sa classe (attribut class) Ces 3 méthodes sont performantes mais limitées. Avec des pages ou applications complexes, elles se révèlent peu souples car nécessitent de faire appel à des boucles, diverses opérations algorithmiques et des filtres sur les résultats obtenus pour pouvoir obtenir une liste d'éléments. Avec deux nouvelles fonctions introduites par l'API Selectors, la syntaxe permet de faire appel aux sélecteurs CSS. On applique en général ces deux méthodes à partir de la racine document. querySelector() : retourne le premier élément trouvé satisfaisant au sélecteur (type de retour : Element) querySelectorAll() : retourne tous les éléments satisfaisant au sélecteur, dans l'ordre dans lequel ils apparaissent dans l'arbre du document (type de retour : NodeList) Ces deux méthodes retournent null si aucun objet correspondant n'est trouvé. Brève comparaison Les exemples suivants cherchent toutes les cellules <td> contenues dans un élément <table id="matable">. // Version DOM native var table = document.getElementById("matable"); var tbodies = table.tBodies; var rangees = null; var cellules = []; for (var i = 0; i < tbodies.length; i++) { rangees = tbodies[i].rows; for (var j = 0; j < rangees.length; j++) { cellules.push(rangees[j].cells[1]); } } Il faut une dizaine de lignes de code pour pouvoir obtenir un tableau de cellules, ce qui est dissuasif et chronophage. La popularité des frameworks JavaScript tels que jQuery équipé de Sizzle est initialement venue de ce manque de simplicité au niveau natif : ils permettent de rechercher des éléments HTML sur la page à l'aide d'une seule instruction, et de surcroît avec la syntaxe CSS plus compacte et lisible, en effectuant en interne tous les parcours pour arriver au bout de la recherche dans le document. // Version jQuery ou Sizzle var cellules = $('#matable td'); Les deux inconvénients avec le passage par jQuery sont de devoir charger la bibliothèque (poids du fichier au téléchargement, requête HTTP supplémentaire, et temps d'interprétation) ainsi que de faire appel à des instructions en JavaScript non natives, moins performantes que des instructions directement codées dans le navigateur. Remarque : le type des données obtenues avec jQuery est différent, il s'agit d'un tableau d'objets jQuery qui sont prévus pour utiliser les autres méthodes du framework, et non d'une simple liste de noeuds DOM. On peut néanmoins retomber sur ce niveau inférieur avec la méthode .get(). C'est pour obtenir ce type de fonctionnement au niveau natif que l'API Selectors fut mise au point. // Version API Selectors var cellules = document.querySelectorAll('#matable td'); Ses avantages sont d'être très performante (voir le benchmark en ligne SlickSpeed comparant les méthodes natives et les frameworks JavaScript) et disponible sans charger de fichier JavaScript supplémentaire... mais elle n'est pas supportée par les anciens navigateurs (notamment IE6 et IE7, voir tableau de support). Exemples variés Pousser le principe très loin et alors aisé, la seule limite étant la connaissance des sélecteurs CSS par le navigateur. var cellules = document.querySelectorAll("#matable>tbody>tr>td:nth-of-type(2)"); var survol = document.querySelector(":hover"); // ... De la même façon que l'on peut sélectionner plusieurs éléments séparés par des virgules dans une feuille de styles, le principe est applicable à l'API Selectors. Sans cela, ce même résultat nécessiterait de faire appel au moins deux fois à getElementsByClassName. var paragraphes = document.querySelectorAll("p.intro, p.suite"); Si plusieurs possibilités sont passées de la sorte à querySelector() - qui est donc limitée à retourner un seul résultat - alors seul le premier élément satisfaisant l'une des conditions est retenu. L'ordre de l'énumération n'a pas d'importance, le critère de choix se base uniquement sur l'ordre d'apparition dans le DOM HTML. var paragraphe = document.querySelector("p.intro, p.suite"); Dans ce cas de figure, seul un élément p.intro ou p.suite sera retourné, en réalité le premier qui sera rencontré dans le code source, quel que soit l'ordre de l'énumération passée à querySelector(). Pour utiliser le jeu d'éléments retourné par querySelectorAll(), il est bien souvent nécessaire d'itérer sur la liste à l'aide d'une boucle, démarrant à l'index 0 et aboutissant à la longueur du tableau définie par la propriété .length. var cellules = document.querySelectorAll("#matable td"); for (var i = 0; i < cellules.length; i++) { // Faire quelque chose avec cellules.item(i) ou cellules[i] } Les méthodes querySelector() et querySelectorAll() ne sont pas vouées à être appliquées uniquement au document. Elles sont exploitables sur un noeud DOM, mais seront toujours évaluées dans le contexte général du document. var matable = document.getElementById("#matable"); var paragraphes = matable.querySelectorAll("p"); Que peut-on en faire ? Une fois les noeuds sélectionnés dans le document, toutes les instructions ECMAScript/JavaScript sont applicables, par exemple... Affecter un style particulier, de manière dynamique : var importants = document.querySelectorAll('.important'); for (var i = 0; i < importants.length; i++) { importants[i].style.backgroundColor = 'yellow'; } Masquer/afficher un élément : var monmessage = document.querySelector('#message'); monmessage.style.display = 'block'; // Afficher // ... monmessage.style.display = 'none'; // Masquer Affecter un gestionnaire d'événements au clic sur un élément pour en afficher un autre : var monbouton = document.querySelector('#afficherMessage'); monbouton.onclick = function() { document.querySelector('#message').style.display = 'block'; } Et ainsi de suite. Tableau des compatibilités Navigateurs Versions Internet Explorer 8+ Firefox 3.5+ Chrome 4+ Safari 3.1+ Safari iOS Mobile 3.2 Opera 10+ Opera Mini 5+ Opera Mobile 10+ Android 2.1+ Avertissements Étant donné que ces méthodes de recherche exploitent directement le moteur du navigateur, elles sont limitées à ce qu'il reconnaît nativement en termes de sélecteurs. Par exemple il s'agira de CSS 2.1 sur IE8, et uniquement en mode conforme aux standards. Par ailleurs, ce navigateur ne retournera pas les éléments visés par les pseudo-classes :visited ou :link pour des raisons de sécurité. Il serait en effet possible de savoir en JavaScript si un visiteur est allé sur une adresse précise en sélectionnant des liens concernés par ces filtres et en étudiant leurs couleurs. Les autres navigateurs devront traiter tous les liens de la page comme non visités pour ne pas se trahir.
>> Lire la suite

Web Designer Wall - Design Trends and Tutorials

5 Useful CSS Tricks for Responsive Design (mer., 16 mai 2012)
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...] Advertise here with BSA
>> Lire la suite

Dezignus.com

Silhouettes Pregnant Women (ven., 18 mai 2012)

>> Lire la suite

Webdesigner Depot

Our favorite tweets of the weekMay 14 – May 20, 2012 (dim., 20 mai 2012)
Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of [...]
>> Lire la suite