HTML5
Une petite fonctionnalité qui peut faire beaucoup de différence sur le temps de développement : classList est une des propriétés d'un élément HTML (accessibles en JavaScript) assez méconnue. Et pour cause, elle n'est supportée qu'à partir d' Internet Explorer 10 , ce qui a longtemps freiné son utilisation (des scripts aidant les versions antérieures sont mentionnés au bas de cet article). L'API classList permet d'accéder à la liste des classes appliquées à un élément HTML, de manière simple et efficace via les méthodes suivantes : length : retourne le nombre de classes add( nom_classe ) : ajoute une classe contains( nom_classe ) : retourne true si une classe est présente et false sinon remove( nom_classe ) : supprime une classe toggle( nom_classe ) : ajoute ou supprime une classe, si elle est présente initialement ou non toString() : retourne la chaîne de texte complète
L'API classList
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface réelle
Comprendre le Viewport dans le Web mobile
CSS3 : Transformations 2D
CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l'apparence d'un élément grâce à un ensemble fonctions 2D : Syntaxe La syntaxe est simple d'emploi.Have you decided that you’re going to build a cross-platform HTML5 mobile application instead of going the native route? In this video from our recent Tech Talk , SDW’s Director of Technology, Hunter Loftis , shares some HTML5 mobile app development tips, tricks, and gotchas. The presentation is interactive so grab your phone and view some examples. In addition to real-world case studies from our shop, and a sweet, follow-along-demo , below are the 20 HTML development rules covered in the presentation that will improve your mobile applications and factor in many of the diverse smartphone and tablet hardware challenges. HTML5 Mobile App Development Tips
20 HTML5 Mobile Application Development Tips - Skookum Digital Works
Multimedia Troubleshooting
While I was researching HTML5 multimedia-related topics for my book, HTML5 Multimedia: Develop and Design , I noticed a number people struggling to get HTML5 audio and video working in different scenarios. From Twitter to Stack Overflow, the same questions kept cropping up, so I’ve put together a list of the most common problems (and some not so common) and their solutions (if there is one!). In most cases, the problems and solutions apply to both audio and video. I’ll note when something is specific to one or the other.Le Web mobile a depuis longtemps envahi notre quotidien de concepteur de sites web : aujourd'hui, smartphones et tablettes font partie intégrante du parc de périphériques sur lesquels nous jouissons de notre dose quotidienne d'Internet, sur lesquels nous consultons nos sites web préférés, et pestons - à juste titre - lorsque celui-ci ne s'affiche pas correctement. Afin de mieux dégrossir ce vaste sujet, voici une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique. Glossaire Application native Correspond aux logiciels à télécharger que l'on peut trouver sur les boutiques "stores" (AppStore pour Apple, GooglePlay pour Android,…) développés dans un langage spécifique à chaque plateforme : Objective-C pour Apple, Java pour Android, …
Web mobile : introduction et glossaire
Stockage des données locales : Web Storage
Nous connaissions les cookies. Maintenant nous disposons de Web Storage (ou DOM Storage) pour stocker des données locales. Faisons un tour du propriétaire ! Stockage des données dans le navigateur Web Storage est une solution adaptée aux besoins actuels de stockage de données variées, dans le navigateur. C'est aussi une technique plus puissante que les cookies, qui sont limités en taille (quelques Ko contre plusieurs Mo pour Web Storage) et qui engendrent un trafic HTTP supplémentaire pour chaque requête (que ce soit pour demander la page web, une image, une feuille de styles, un fichier javascript, etc).
introduction à HTML5
introduction Qui suis-je ? Arlo Borras Architecte Logiciel, Manager technique, DT e-TF1 Utilisateur/contributeur de logiciels Open source Notre métierSemantic
Mastering CSS3 Multiple Backgrounds
Our journey to the world of CSS3 shadows continues. Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3. There are many reasons why you may need to create a composition of multiple images to build your background. I think the most important are the following: to reduce bandwidth usage where the sum of the file sizes of separate images is less than the size of an image with merged layers (especially if your image contains repeating patterns), and to provide a way for independent manipulation of different layers (for example, if you are going to implement a parallax effect). I believe you may have other reasonable arguments. :)
<meter> et <progress>
Voici deux éléments très ressemblants mais n'ayant pas du tout la même fonction... <meter> et <progress> entrent dans la grande famille HTML5 et devraient en réjouir plus d'un ! On progresse et on jauge ! Il faut faire la distinction entre les éléments <progress> et <meter> .
HTML 4 était bien limité concernant les types de champs. HTML5 apporte énormément en terme de nouveautés. Ces innovations sont réunies sous un nom : les Web Forms (ou HTML5 Forms). Souvenez vous des éléments de saisie et de soumission de formulaire en HTML4 assez peu nombreux : <textarea> <select> ( <option> et <optgroup> ) <button> <input> ( text , password , file , radio , checkbox , submit , image , hidden , reset,button )
Formulaires HTML5 : nouveaux types de champs
HTML5 : attribut rel et relations
Philosophie de l'attribut rel Le monde du Web est construit sur la métaphore de la toile . Chacun des fils seraient la représentation des hyperliens, là où chaque point d'ancrage de la toile serait alors le représentant d'une page web. Le lien est un composant essentiel de la structure des documents. Il offre la possibilité de naviguer vers une autre ressources, et de mettre en relation des ressources similaires, complémentaires ou concurrentielles.Formulaires HTML5 : placeholder, required, pattern et validation
HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire.Et chaque chose en son <time> Nouvel élément HTML5, <time> répond au besoin de baliser sémantiquement une date (du calendrier grégorien ) ou une heure. Son intérêt réside également au niveau de l'indexation automatisée, pour les moteurs de recherche ou lors d'import de données dans un agenda si un quelconque algorithme (une extension navigateur, un script) est appelé. On le retrouvera pour indiquer l'heure d'un évènement, la date de publication d'un article ou d'une page, avec une précision du fuseau horaire ou non. Son utilisation est multiple : l'élément <time> peut se cacher derrière toute date ou heure mentionnée sur le document HTML.