domainepublic.net

Pompage .net

• 12 juin - Traduit ailleurs : Comment fonctionnent les navigateurs
  Une plongée dans les entrailles de deux moteurs de rendus utilisés par de nombreux navigateurs.
• 26 mai - Fenêtres sur le Web - par Karen McGrane
  Quels sont les mécanismes à éviter ou à mettre en place pour faciliter un accès homogène aux mêmes données, quel que soit le périphérique ou le moment choisis ? Lisez cet article de Karen McGrane pour en savoir plus !
• 25 mai - Traduit ailleurs : Apprendre à apprécier les parties les moins sexy de (...)
  Tout le monde parle des nouvelles méthodes de mise en page et des effets graphiques incroyables bientôt permis par CSS3. Mais il est encore temps de s'intéresser aux rouages du langage : sélecteurs, unités, fonctions. Voyez pourquoi ces parties peu sexy méritent votre (...)
• 26 avril - Les pixels, voilà l'ennemi ! - par Dave Rupert
  Les terminaux offrent des écrans de plus en plus sophistiqués, qui poussent les concepteurs de sites à proposer des images à haute définition. Dans cette course au pixel effrénée, comment garder à l'esprit les contraintes des utilisateurs (...)
• 27 mars - Un peu de classe : l'héritage en Javascript - par Mark Dalgleish
  Les fonctions orientées objet de Javascript, telles que les constructeurs et les chaines de prototypes sont probablement les concepts les plus incompris de ce langage. Revenons sur leur fonctionnement.
• 28 février - Conception responsive : obtenir une validation sans maquettes - par Matt Griffin
  Matt Griffin revient sur la conception d'un site web …dans un navigateur web.
• 17 février - Traduit ailleurs : Comprendre z-index et les contextes d'empilement
  Comment fonctionne la propriété z-index ? A priori, rien de plus simple, mais cet article nous montre que ce que ne nous prenons pour acquis n'est pas toujours aussi simple qu'il n'y paraît. À lire avant de s'arracher les cheveux sur des problèmes de mise en page (...)

OpenWeb group

• 4 juin - Continuons d'avancer - par Nicolas Hoffmann
  Vous l'aurez peut-être remarqué, OpenWeb continue discrètement sa mue. Emmanuel a retravaillé la typographie et continue d'ailleurs de plancher (au sens propre) sur la suite du redesign. Pour ma part, je me suis dit : « c'est quand même dommage, je pense qu'il ne faudrait pas grand chose pour que son (...)
• 1er juin - Responsive Webdesign – présent et futur de l'adaptation mobile - par Walter Stéphanie
  La problématique du responsive est bien plus complexe que ce qu'on peut lire sur certains blogs qui essaient de nous faire croire qu'il suffit aujourd'hui, pour optimiser un site pour mobile, d'ajouter 2 Media Queries pour l'iPhone et l'iPad et redimensionner toutes les images. Le Responsive Web (...)
• 31 mai - L'état du responsive design - par Elie Sloïm
  Le responsive design est un sujet éminemment à la mode en ce moment. Il s'agit d'un ensemble de technologies et de pratiques permettant de proposer un site qui s'adapte aux conditions de consultation des utilisateurs. Au premier abord, c'est un sujet très simple, et de fait, le responsive design (...)
• 29 mai - Le programme de Paris Web 2013 - par Le collectif Openweb
  Ce n'est pas nouveau, mais nous avons toujours le même plaisir à en parler : tout le collectif OpenWeb soutient Paris Web, dont l'édition 2013 se déroulera du 10 au 12 octobre. Le programme vient récemment d'être publié ! Vous pourrez y croiser bon nombre des membres d'OpenWeb, que ce soit dans le (...)
• 28 mai - HTML Media Capture - par Nicolas Hoffmann
  Parmi les nombreuses nouvelles API d'HTML5, une en particulier est particulièrement simple à mettre en place et permet des choses plutôt sympathiques : HTML Media Capture. Présentation HTML Media Capture permet de prendre des images, d'enregistrer de la vidéo ou de l'audio depuis un champ input de (...)
• 22 mai - Les commentaires conditionnels : passé, présent et futur - par Nicolas Hoffmann
  Les commentaires conditionnels ont eu une certaine évolution dans leur pratique, Nicolas Hoffmann vous propose une rapide mise en perspective de ce système autant haï qu'apprécié, et un regard sur l'avenir d'une telle possibilité. Le système des commentaires conditionnels Les commentaires (...)
• 4 mai - Kiwi Party 2013 - par Le collectif Openweb
  La Kiwi Party est reconduite dans une nouvelle édition cette année, OpenWeb ne saurait trop vous recommander de vous intéresser à cet événement ! La Kiwi Party est un événement gratuit organisé par Alsacréations réunissant conférences et ateliers, autour des thèmes de la conception web et de ses bonnes (...)

Alsacréations

• 31 mai - Article : Responsive Webdesign – présent et futur de l’adaptation (...) - par Stéphanie W.
  La problématique du responsive est bien plus complexe que ce qu'on peut lire sur certains blogs qui essaient de nous faire croire qu'il suffit aujourd'hui, pour optimiser un site pour mobile, d'ajouter 2 Media Queries pour l'iPhone et l'iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d'être parfaite et en constante évolution. Beaucoup de choses sont aujourd'hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine. [...]
• 23 mai - Tutoriel : Les multicolonnes en CSS3 - par Raphael
  Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie. Encore peu usité, ce module est pourtant loin d'être en brouillon car il s'agit d'une spécification élevée au rang de Candidate Recommendation, donc stable, au sein du W3C depuis avril 2011. Compatibilité de multicolumn Le positionnement multicolonnes est - contre toute attente -  plutôt bien supporté par le collège des navigateurs. Les anciennes versions d'Internet Explorer faisant bien entendu exception à la règle. En pratique, il est actuellement utilisable sans problème en production sur les navigateurs mobiles que l'on retrouve sur smartphones et tablettes. Tableau des compatibilités Navigateurs Versions Détails Internet Explorer 10+ Sans préfixe Firefox Firefox Mobile Toutes versions avec préfixe -moz- Certaines propriétés ne sont pas reconnues Chrome Chrome Mobile Toutes versions avec préfixe -webkit- Opera 11.1+ Opera Mobile 11.1+ Sans préfixe Safari 3.2+ Safari Mobile 3.2+ Avec préfixe -webkit- Android Browser 2.1+ Avec préfixe -webkit-   Mise en oeuvre Le positionnement multicolonnes s'applique aux éléments de type block, table-cell ou inline-block et en répartit équitablement le contenu en plusieurs colonnes. Les deux principales propriétés de ce module sont column-width et column-count : column-width : Valeurs : auto (par défaut) ou longueur supérieure à zéro (pas de valeur en pourcentage) Correspond à la largeur "optimale" de la colonne. En réalité, s'adaptera à l'espace disponible et pourra être plus large ou plus réduite. column-count : Valeurs : auto (par défaut) ou nombre entier supérieur à zéro Correspond au nombre "optimal" de colonnes. Si column-width est fixé, alors column-count représente le nombre maximal de colonnes. div { column-width: 100px } Remarque : La propriété raccourcie, combinant column-width et column-count, est la propriété columns (avec un "s" à la fin - comme "alsacréations") : div { columns: 3 100px } Voir un exemple de columns Remarque : les boîtes de conteneur de colonnes ne peuvent pas servir de référents à des descendants positionnés en absolute ou fixed. Les gouttières Il est possible de fixer la valeur de l'espace entre chaque colonne grâce à la propriété column-gap qui accepte toute largeur à l'exception des pourcentages. Sa valeur par défaut est "normal". div { column-gap : 3rem} Voir un exemple de column-gap Le liseré de séparation Un trait de séparation peut être affiché entre les colonnes, les propriétés qui le définissent sont comparables à celles des bordures CSS classiques : column-rule-color : couleur du séparateur, column-rule-style : style du séparateur (parmi les valeurs solid, dotted, dashed, groove, ridge, etc.) column-rule-width : largeur du séparateur propriété raccourcie pour l'ensemble : column-rule div { column-rule: 3px solid rgba(0,0,0,.4) } Voir un exemple de column-rule Débordements : par défaut dans le modèle d'affichage multicolonnes, les éléments "longs" (mots ou images) doivent être rognés au niveau du centre de la gouttière. Les sauts de colonnes Les spécifications prévoient d'autoriser, empêcher ou au contraire forcer des sauts de colonnes avant, après ou au sein des éléments via les propriétés break-before, break-inside et break-after. Les valeurs de ces propriétés sont nombreuses (auto, always, avoid, left, right, page, column, region, avoid-page, avoid-column, avoid-region) notamment parce que certaines d'entre-elles existent depuis CSS2, mais également parce qu'elles peuvent concerner d'autres modules de positionnement. Les principales valeurs utiles en multicolonnes sont : auto : saut autorisé mais non forcé (valeur par défaut) column : force un saut de colonne avant ou après l'élément avoid-column : interdit le saut de colonne avant, dans ou après l'élément div blockquote { break-inside: avoid-column } Compatibilité : Seuls Opera et IE10 reconnaissent les propriétés de saut de colonne. Cependant une alternative pour le moteur Webkit (Chrome <28, Safari) existe sous la forme d’une syntaxe propriétaire : -webkit-column-break-after et qui fonctionne de la même manière que break-after (de même pour -webkit-column-break-before). Pour information, il est possible d'empêcher la coupure au sein d'un élément en le transformant en display: inline-block Voir un exemple de saut de colonne La répartition sur plusieurs colonnes La propriété column-span offre à un élément la faculté de s'étaler sur une (valeur none) ou toutes les colonnes à la fois (valeur all) : div h1 { column-span: all } Voir un exemple en ligne Compatibilité : column-span n'est pas supporté par Firefox à l'heure de publication de cet article. Quelques démonstrations pratiques Démonstrations diverses et variées Bac à sable à la volée Menu de navigation responsive Autre menu de navigation responsive Liste numérotée Les alternatives Peu d'alternatives aux multicolonnes CSS3 existent pour les anciens navigateurs, il s'agit de polyfills en JavaScript : CSS3MultiColumn qui reprend (et met à jour) un ancien script de 2005 Columnflow l'outil produit et utilisé par le Financial Times Ressources et articles Pour finir, voici quelques saines lectures pour enrichir ce sujet : Create Columns Easily With The CSS3 Multi-Column Layout Module sur Vanseodesign CSS3 Multi-column layout par Opera How to use CSS3 columns sur Webdesigner Depot Retrouvez l'intégralité de ce tutoriel multi-pages en ligne
• 10 avril - Tutoriel : Créer une police d’icônes facilement à partir d’illustrations (...) - par Stéphanie W.
  Les polices d'icônes ou "font-icon" popularisées depuis Bootstrap sont de plus en plus utilisées sur le web. Certains services proposent de piocher des icônes dans différents packs pour se créer sa propre "police". Dans ce petit tutoriel nous verrons comment, grâce au service en ligne IcoMoon, il est facile de se créer sa propre police d'icônes à partir d'illustrations et fichiers vectoriels. [...]Retrouvez l'intégralité de ce tutoriel multi-pages en ligne
• 8 avril - Astuce : La méthode insertAdjacentHTML - par dew
  La méthode insertAdjacentHTML est peu connue en JavaScript et pourtant bien utile. Si vous avez déjà souhaité manipuler dynamiquement du contenu HTML dans une page ou application web, vous avez certainement déjà utilisé les méthodes createNode() + appendChild() ou la propriété innerHTML, qui donne un accès direct au contenu d'un élément : Exemple de code avec innerHTML <div id="mondiv"></div> <script> document.getElementById('mondiv').innerHTML = 'Et hop ! <img src="saucisse.png" alt="">'; </script> Mais cela remplace directement tout le contenu de l'élément (à moins de le récupérer avant par une pirouette). Pour insérer du contenu en choisissant l'emplacement exact, on pourra plutot se servir de insertAdjacentHTML() qui va prendre en paramètres : la position d'insertion avec les mots clés : beforeBegin avant l'élément (équivalent à before en jQuery) afterBegin à l'intérieur au début (équivalent à prepend en jQuery) beforeEnd à l'intérieur à la fin (équivalent à append en jQuery) afterEnd après l'élément (équivalent à after en jQuery) le code HTML à insérer Exemple de code avec insertAjdacentHTML <ul id="maliste"> <li>Printemps</li> <li>Été</li> <li>Automne</li> </ul> <script> document.getElementById('maliste').insertAdjacentHTML('beforeEnd','<li>Hiver</li>'); </script> Prise en charge Au niveau compatibilité, c'est une méthode désormais largement reconnue par les moteurs de navigateurs. Navigateurs Versions Internet Explorer 4+ Firefox 8+ Chrome 1+ Safari 4+ iOS Safari Mobile 5+ Opera 7+
• 13 mars - Astuce : Le contexte de formatage block en CSS - par Raphael
  Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ? Qui n'a pas été une fois au-moins dérouté par des marges verticales venues de nulle part ? Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel. Voyons comment déchiffrer cette ressource cruciale… Block et Inline sont sur un bateau (qui float) Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks. Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça Les éléments “block” (block level) sont ceux affectés par : display: block, mais aussi display: list-item, et display: table ils s’inscrivent dans un contexte de formatage block. Les éléments “inline” (inline level) sont ceux affectés par : display : inline, mais aussi display: inline-table, et display: inline-block ils s’inscrivent dans un contexte de formatage inline. Note : CSS3 étend ces valeurs, mais on ne va pas se compliquer la vie inutilement ici. Mais c’est quoi un “contexte de formatage block” ? La spécification précise que certains éléments créent un “contexte d’affichage” pour les enfants qu’ils contiennent. Ce contexte peut être de type “block” (les enfants - quels qu’ils soient - de ce contexte s’affichent les uns sous les autres) ou de type “inline” (les enfants s’affichent les uns à côté des autres). Pour générer ce fameux “contexte de formatage “block””, le conteneur doit bénéficier de l’une des règles suivantes : float: left ou float: right position : absolute position : fixed (ajouté dans les specs CSS3) display : inline-block display : table-cell display : table-caption display : table (indirectement via création d’un élément anonyme table-cell) overflow : hidden overflow : scroll overflow : auto Note importante : vous aurez remarqué qu'un élément en display: block ne crée pas de “contexte de formatage block”. Des sortes de “super éléments” ? Les éléments générant un contexte de formatage block deviennent des sortes de “super éléments” ayant un certain nombre de super responsabilités : ils deviennent entre-autre garants de l’affichage de leurs enfants (qu’ils soient blocks ou inline). Ces super éléments acquièrent également des super pouvoirs très pratiques, et c'est là que ça devient intéressant : Ils contiennent des flottants Ils ne s’écoulent pas autour des flottants Ils ne subissent pas la fusion de marges Et plein d’autres petites fioritures En passant, on pourrait comparer ces super-pouvoirs à ceux propriétaires de Microsoft par le HasLayout d’Internet Explorer (on pense au désormais célèbre zoom: 1). Démonstrations en image… 1- Débordement de flottants : Des éléments flottants, hors du flux, "débordent" généralement de leur parent, c'est normal : Par contre, lorsque ce parent dispose d'un contexte de formatage, il est capable de "contenir les blocs" descendants : 2- Ecoulement autour d’un flottant : Le contenu qui suit un élément flottant s'écoule naturellement autour de ce flottant : Si ce contenu bénéficie d'un contexte de block, il ne s'écoule plus et reste calé à droite du flottant : 3- Fusion de marges : Les marges verticales des enfants se répercutent sur leurs parents, c'est la fusion de marges (ici le margin-top de l'enfant ne s'applique pas sur l'enfant mais sur son parent) : La fusion de marge n'a pas d'effet sur un éléments de "contexte block". Ainsi, dans cette seconde illustration ci-dessous, margin-top s'applique sur l'élément et non pas sur son parent : Ressources sur ce sujet : http://www.w3.org/TR/CSS2/visuren.html http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
• 5 mars - Tutoriel : Une application HTML5 sous Windows Phone 8 - par dew
  Microsoft propose un SDK (Software Development Kit) compréhensible pour qui souhaite développer une application HTML5 sous Windows Phone. D'autres types de projets peuvent être réalisés grâce à ce kit, mais ici ne sera abordé que le côté HTML+CSS+JavaScript, qui intéresse bien sûr tout développeur web sachant déjà manier ces langages. C'est là tout l'intérêt : réaliser des applications rapidement, avec des connaissances déjà maîtrisées, et des ressources souvent déjà disponibles (serveur, images, styles, icônes, polices, scripts, etc). En réalité, l'application HTML5 sera hébergée dans une page XAML, équipée d'un composant WebBrowser piochant les ressources localement, c'est-à-dire les fichiers web regroupés dans le package installé. Il n'y aura pas nécessité absolue d'une connexion, bien que l'on puisse faire appel à des requêtes distantes (avec de l'AJAX par exemple) si l'on veut une interaction avec un service en ligne. Le SDK Windows Phone se compose principalement de Microsoft Visual Studio Express 2012 for Windows Phone et d'un émulateur qui permettra (développement de votre application ou non) de lancer une machine virtuelle tournant sous Windows Phone pour effectuer vos tests. Cet émulateur donne aussi accès aux applications livrées en standard sous ce système, et donc à Internet Explorer mobile, ce qui en fait un outil de test bien pratique. De façon très simplifiée, Windows Phone 8 utilise le même noyau que Windows RT (alias Windows 8 pour ARM). Premiers pas Si vous ne souhaitez pas vous consacrer au développement Windows Phone, sautez directement à la fin de ce tutoriel pour les derniers mots sur la machine virtuelle et le navigateur Internet Explorer embarqué. L'installation du SDK n'est par contre possible qu'à partir de Windows 8 (environ 1.6 Go seront téléchargés). Après les différentes étapes, l'icône VS Express for Windows Phone s'ajoutera à l'écran de démarrage, qui basculera automatiquement en mode desktop - plus approprié pour le développement que l'interface Modern UI. Le plus simple est de passer par la création d'un nouveau projet (menu Fichier/File, New Project). Plusieurs types de projets seront proposés, celui nous intéressant ici est "Windows Phone HTML5 App". Un modèle de base est fourni, il n'est pas nécessaire de le modifier pour lancer l'application et l'émulateur. L'éditeur dévoile le fichier MainPage.xaml utilisé comme vue principale de l'application, dans laquelle le composant WebBrowser (Internet Explorer) est placé au sein d'un élément <Grid>. Plus loin, l'élément ApplicationBar définit l'apparence de la barre de navigation. Sur la partie gauche, un éditeur visuel traduit ces instructions. Cliquez sur le bouton Emulator dans la barre d'outils. Une liste déroulante permet de choisir - si nécessaire - la résolution de l'écran simulé, et la configuration matérielle (ARM, x86). Au bout de quelques secondes, une fenêtre épurée symbolisant un mobile lance le système mobile Windows Phone et l'application en train d'être développée. Par défaut, le projet étant quasiment vide, il n'y a qu'une page d'accueil avec un titre. Pour personnaliser ce modèle de base, il faudra aller explorer les ressources via le panneau de droite (Solution Explorer). Le dossier Html regroupera par défaut un fichier index.html (la page affichée au lancement) et un dossier css contenant le fichier phone.css. Un clic sur ces noms les ouvrira directement dans l'éditeur pour les modifier. On remarque que le fichier HTML principal est en réalité ouvert dans une vue interprétant du... HTML (zone à fond noir par défaut avec l'icône d'Internet Explorer en blanc). Ce fichier contient une structure assez classique de document web : en-tête <head>, corps <body>, avec des blocs <div>, et le tout fait appel à une feuille de styles CSS pour la présentation. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="/html/css/phone.css" /> <title>Windows Phone</title> </head> <body> <div> <p>MY APPLICATION</p> </div> <div id="page-title"> <p>page title</p> </div> </body> </html> On peut constater que dans le code CSS, délivré par défaut avec le projet initial, des Media Queries sont appliquées pour modifier l'apparence de l'application selon l'orientation. @media all and (orientation:portrait) { @-ms-viewport { width:320px; user-zoom: fixed; max-zoom: 1; min-zoom: 1; } } @media all and (orientation:landscape) { @-ms-viewport { width:480px; user-zoom: fixed; max-zoom: 1; min-zoom: 1; } } html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; } body { font-size: 11pt; font-family: "Segoe WP"; letter-spacing: 0.02em; background-color: #000000; color: #ffffff; margin-left: 24px; } #page-title { font-size: 24pt; } À partir de ce moment c'est à vous de jouer et d'utiliser vos connaissances web pour articuler l'application autour de différentes vues HTML stylées par des propriétés CSS. Avertissement : il faut activer JavaScript dans le composant WebBrowser pour s'en servir (voir ci-après). Développer une application HTML5 Quelles sont les outils et API à disposition ? Le moteur intégré actuellement est celui d'Internet Explorer 10. WebStorage pour le stockage de données locales IndexedDB pour les bases de données Web Workers Web Sockets Multi-touch <audio> et <video> Application Cache Page Visibility AJAX (JavaScript / XMLHttpRequest) Canvas Géolocalisation etc... voir la liste plutot complète sur HTML5Test Au niveau de la présentation, toute une panoplie de modules CSS3 sont disponibles, avec entre autres les dégradés (gradients), les transformations 3D, les transitions et animations, les polices WOFF, CSS Grid Layout, Flexbox, le multi-colonnage, box-shadow et text-shadow, etc. Le moteur d'Internet Explorer 10 pour Windows Phone est proche de la version de "bureau", mais dispose de quelques fonctionnalités en moins, comme par exemple les sites épinglés, le Drag & Drop, le champ <input type="file"> et d'autres subtilités propres à ces systèmes. Une application de démonstration Pour introduire quelque peu plus en avant cette démonstration, il s'agira de créer une (très modeste) application récupérant les dernières offres d'emploi sur emploi.alsacreations.com via un flux JSON et un appel AJAX. Sachant qu'il est également possible de le développer avec un projet "non HTML5" en XAML et C#, voir How to create a basic RSS reader for Windows Phone. À chaque modification du code (hors fichier XAML verrouillé par un petit cadenas dans son onglet), il est inutile de relancer l'émulateur totalement, il suffit d'arrêter le débogage de l'application en cliquant sur le bouton stop (carré rouge) dans la barre d'outils puis de relancer l'installation et l'exécution dans la machine virtuelle via le bouton Emulator ou encore plus simple en une seule action avec Restart (flèche circulaire) : Activer JavaScript Première action préalable : autoriser l'exécution de code JavaScript dans le composant WebBrowser. Pour ceci, il faut ajouter l'attribut IsScriptEnabled="True" dans la balise <phone:WebBrowser ...> du fichier MainPage.xaml. Sans cela, le code sera ignoré. Structure HTML, JavaScript En partant du code HTML proposé par défaut, on ajoute quelques éléments pour recevoir les informations, nommés par des attributs id afin d'interagir rapidement avec JavaScript : un élément <span id="nb-offres"> pour afficher le nombre total d'annonces dans la liste un élément <div id="offres"> pour ajouter successivement des blocs correspondant aux liens reçus La page principale reçoit aussi un logo, on peut aller beaucoup plus loin en personnalisation graphique mais ce n'est pas le but de cet exemple. Un fichier JavaScript (nommé ici kiwi.js) contiendra toutes les instructions pour aller charger le contenu et l'afficher dans la page HTML. Il sera donc essentiel au bon fonctionnement de l'application. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="/html/css/phone.css" /> <title>Alsacreations</title> </head> <body> <h1><img src="/html/img/logo.png" alt="Emploi" /></h1> <div id="page-title"> <p><span id="nb-offres"></span> offres d'emploi</p> </div> <div id="page"> <p id="message">Chargement des offres...</p> <div id="offres"></div> </div> <script src="/html/kiwi.js"></script> </body> </html> Pour ajouter une ressource image, on crée un nouveau dossier dans la racine Html grâce au menu contextuel en choisissant Add et New Folder. Un glisser-déposer dans ce dossier du fichier PNG suffira amplement pour bénéficier de l'image dans l'application en indiquant le bon chemin : /html/img/logo.png. Quelques nouvelles propriétés CSS modifient la couleur des liens par défaut et la largeur de l'image du logo pour s'adapter automatiquement à l'espace disponible à l'écran. a { color:#B8D940; } h1 img { max-width: 80%; } Le noyau de l'application se déroule côté JavaScript : Dès le chargement, une requête va être envoyée via l'interface XMLHttpRequest (alias AJAX). Si tout se déroule bien, un code HTTP 200 sera obtenu. Le serveur interrogé va renvoyer un fichier au format JSON (plus d'informations sur JSON, AJAX et jQuery), ce qui est à peu près le format le plus léger et efficace pour ce type d'échange de données. La réponse (au format texte pur) va passer par la moulinette JSON.parse() pour être convertie en objet exploitable directement par JavaScript. Les données JSON ayant été structurées dans un tableau, il faut itérer sur chacun des éléments de ce tableau pour en extraire individuellement les informations de l'annonce et les injecter progressivement en tant que paragraphes/liens. (function () { "use strict"; var JSON_object = {}; var oRequest = new XMLHttpRequest(); var sURL = "http://emploi.alsacreations.com/offres.json"; oRequest.open("GET",sURL,true); oRequest.onreadystatechange = function () { if (oRequest.readyState == 4 && oRequest.status == 200) { JSON_object = JSON.parse(oRequest.responseText); var nb_offres = JSON_object.annonces.length; document.getElementById('nb-offres').innerHTML = nb_offres; document.getElementById('message').style.display = 'none'; for(var i=0;i<nb_offres;i++) { var paragraphe = document.createElement('p'); paragraphe.innerHTML = '<a href="'+JSON_object.annonces[i].link+'">'+JSON_object.annonces[i].titre+'</a>'; paragraphe.innerHTML += '<br>'+JSON_object.annonces[i].societe+' ('+JSON_object.annonces[i].lieu+')'; document.getElementById('offres').appendChild(paragraphe); } } else if(oRequest.readyState == 4 && oRequest.status != 200) { document.getElementById('page').innerHTML = 'Erreur lors du chargement'; } }; oRequest.send(null); })(); Pour avoir plus de renseignements quant au fonctionnement de ce code, penchez-vous sur tout ce qui concerne XMLHttpRequest et JSON. Cet exemple fonctionne parfaitement dans n'importe quel navigateur et n'est pas spécifique à Windows Phone ou Internet Explorer (heureusement). Et voilà le travail : Finaliser une véritable application Pour cette démonstration, cette application ne fait qu'afficher une liste de liens, qui ouvrent directement le navigateur du système au clic. Si l'on veut faire les choses proprement et ne pas "sortir" de cette application, il faut intercepter le clic et aller charger une autre vue HTML avec les informations récupérées (éventuellement toujours en AJAX). C'est quelque peu hors sujet pour cette introduction minimale, mais les exemples de codes fournis donnent déjà des pistes. Pour augmenter les performances, une solution à base de Web Storage est envisageable. Pour personnaliser les icônes de l'application, explorez le dossier Assets, qui pourra héberger des tuiles ajustables selon la résolution. Et enfin, il ne restera plus qu'à publier votre application (j'insiste : la vôtre, pas cette démo) sur le Windows Phone Store en suivant la procédure pour créer un package suivi d'une certification, d'un manifeste et de captures d'écran. Télécharger les sources du projet démo N'hésitez pas à consulter les nombreuses autres ressources en ligne guidant pas à pas pour le développement d'applications HTML, que ce soit spécifiquement sous Windows Phone ou avec d'autres environnements. ... ou juste tester l'OS et Internet Explorer Si vous n'êtes pas intéressés par le développement d'applications, le SDK vous permet tout de même de lancer la fenêtre de simulation. L'émulation peut être plus ou moins rapide selon la puissance de la machine hôte. Elle fonctionne également sur une tablette Windows 8. Qui dit Windows Phone, dit également navigateur Internet Explorer Mobile intégré par défaut. Il pourra être exécuté pour consulter le rendu de n'importe quel site web. En cliquant sur le bouton "fenêtres"  vous aurez accès aux applications, dont le projet HTML décrit précédemment et Internet Explorer. La barre d'icônes placée sur le côté de la fenêtre du simulateur donne accès aux paramètres d'orientation (portrait/paysage) mais aussi à 4 onglets avancés via " » " pour jouer avec l'accéléromètre, modifier le positionnement géographique, faire une capture d'écran ou consulter les propriétés de connexion réseau. Et voici la dernière capture, le résultat de la version Responsive d'Alsacreations sur Internet Explorer mobile. Enfin, sachez qu'il existe un Windows Simulator pour avoir un aperçu du rendu des applications (non mobiles) dans le style Windows 8 avec du touch.Retrouvez l'intégralité de ce tutoriel multi-pages en ligne
• 12 février - Tutoriel : Introduction à Canvas - par idsquare
  Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de grandes avancées pour rendre ce média attractif : audio, vidéo et Canvas pour disposer de fonctionnalités de dessin en 2D et 3D dans le navigateur. L'élément qui nous intéresse ici est <canvas>. Il s'agit d'un espace de pixels initialement transparents, armés de JavaScript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu'aux animations et jeux vidéo. Le nombre de démonstrations existant aujourd'hui sur le web est impressionnant, il serait difficile de toutes les lister ici pour en donner un avant-goût complet des possibilités. Flash est-il mort ? De nombreux parallèles avec la technologie Flash ont été réalisés et diffusés. Il est vrai que Canvas est attendu en tant que standard du web pour remplacer Flash jusqu'à un certain point, en combinaison avec JavaScript pour l'interaction, <video> pour la vidéo et <audio> pour la partie sonore. Cependant, la situation est plus complexe que cela, chaque technologie a ses avantages et inconvénients, ses partisans et ses détracteurs, le débat est long et vaste, et ne sera pas abordé ici. Voici quelques avantages de Canvas : il s'agit d'un standard développé par le W3C et le WhatWG il fonctionne très bien en osmose avec les autres standards (HTML, JavaScript) il est performant et accéléré matériellement sur la plupart des navigateurs et systèmes il est mieux pris en charge sur les mobiles (notamment sur iOS pour les iPhone, iPad, iPod qui ont été les premiers à mettre de coté Flash, mais aussi Android, Opera Mobile, Firefox Mobile, etc). De quels outils dispose-t-on ? L'inconvénient encore actuel de Canvas est que ses usages sont si variés et modulaires (dépendant de librairies, d'images chargées, d'interactions) qu'il n'existe pas d'outil miracle ou d'IDE (Environnement de Développement Intégré) pour produire le code nécessaire sans devoir toucher directement au code JavaScript. Adobe a tenté une approche avec Edge Animate, qui a encore du chemin à faire mais reste promis à un bel avenir. Tout comme pour HTML et CSS, rien ne remplacera une parfaite maîtrise du code source. D'autres programmes peuvent néanmoins simplifier la vie de l'artiste, par exemple Ai to Canvas, une extension produisant le code correspondant à une forme depuis un export Illustrator. Qu'en est-il de SVG ? Attention, il ne faut pas confondre Canvas, qui est une surface de dessin bitmap pilotable en JavaScript spécifique à HTML, et SVG, qui est un format de fichier pour le dessin vectoriel, décrit en XML. Bien souvent, on néglige de penser à SVG comme alternative à Flash, alors que celui-ci serait plus approprié (aussi conçu pour être vectoriel, animé, léger et modulaire). Support navigateur Lancé en 2004 par Apple sur Safari et implémenté dans Gecko (moteur de Firefox) en 2005, Canvas est supporté à l'heure actuelle par tous les navigateurs modernes. Pour les plus anciens (Internet Explorer 6 à 8), le projet Explorer Canvas leurs permet de profiter des joies de Canvas, avec toutefois une perte de performances. Support de <canvas>   Navigateurs Versions Firefox 2.0 Chrome 4.0 Internet Explorer 9 Opera 9.0 Safari 3.1 Création du canvas et principes généraux Canvas étant un nouvel élément, il ne déroge pas à une structure HTML classique, avec des dimensions précisées par les attributs width et height (ou via CSS). <canvas id="mon_canvas" width="350" height="350"> Texte alternatif pour les navigateurs ne supportant pas Canvas. </canvas> À partir de ce moment, tout se passe du côté de JavaScript, qui va se servir de cet élément HTML pour accéder à la surface de dessin. Pour ceci, deux fonctions sont appelées : getElementById() qui va permettre d'aller chercher et cibler l'élément <canvas> identifié par son attribut id unique (ici mon_canvas), puis la méthode getContext() de l'élément ainsi récupéré pour savoir dans quel contexte de dessin (2D ou 3D) le script va pouvoir agir, et de quelles fonctions il pourra disposer. Le contexte sera l'élément central de gestion de Canvas. <script type="text/javascript"> var c = document.getElementById("mon_canvas"); var ctx = c.getContext("2d"); // Le reste du script ici... </script> Tous les exemples suivants dans ce tutoriel feront appel à cette structure (élément Canvas + élément script + appel à getElementById + getContext) qui ne sera pas reprécisée à chaque fois. Après cette étape préliminaire de mise en place, il faut se plonger dans l'ensemble des méthodes de dessin 2D. Celles-ci vont toutes exploiter le même système de coordonnées : Le point de référence (0,0) est situé en haut à gauche L'axe horizontal (x) est défini par la première coordonée L'axe vertical (y) est défini par la seconde coordonnée Ces valeurs correspondent à la grille entourant les pixels, et non pas aux pixels eux-mêmes Par exemple le point de coordonnées (4,2) sera situé 4 pixels à droite du coin supérieur gauche, et 2 pixels en-dessous. Si l'on trace un polygone entre les 3 points présents sur ce schéma, on obtiendra un triangle. Cet article concerne uniquement la version 2D de Canvas, car la manipulation de la 3e dimension fait appel à des compétences radicalement différentes et son support est plus limité. Pour utiliser Canvas en 3D, le nom du contexte est ''webgl'', mais change ensuite du tout au tout les fonctions disponibles et les méthodes de tracé.Retrouvez l'intégralité de ce tutoriel multi-pages en ligne

css Zen Garden

• Avril 2008 - #213 - 17 Apr 2008
  'Under the Sea!' by Eric Stoltz
• Avril 2008 - #212 - 17 Apr 2008
  'Make 'em Proud!' by Michael McAghon and Scotty Reifsnyder
• Avril 2008 - #211 - 17 Apr 2008
  'Orchid Beauty' by Kevin Addison
• Avril 2008 - #210 - 17 Apr 2008
  'Oceanscape' by Justin Gray
• Novembre 2007 - #209 - 21 Nov 2007
  'CSS Co., Ltd.' by Benjamin Klemm
• Novembre 2007 - #208 - 21 Nov 2007
  'Sakura' by Tatsuya Uchida
• Novembre 2007 - #207 - 15 Nov 2007
  'Kyoto Forest' by John Politowski