background preloader

<html5> par l'exemple - Le site français de démo des balises HTML5 et de test du support des navigateurs.

<html5> par l'exemple - Le site français de démo des balises HTML5 et de test du support des navigateurs.
Related:  ah.creation.lyon

Ressources HTML5 Ressources HTML5 Compatibilité HTML5 et navigateurs du marché : en plus chaque feature est un lien vers des explications et exemples en français ! : tables de compatibilités mises à jour pour chaque élément html/api js/element css3 par navigateur/version : site recommandant ce qu'il est bon et pas bon d'utiliser dans HTML5/CSS3 si on ne veut pas avoir de soucis, indique les solutions alternatives :t est interactif de votre browser pour mesurer son support HTML5 Sites intéressants généraux sur HTML5 en particulier contient un très bon tutorial de base sur les CANVAS. Tutoriaux spécialisés Sur l'utilisation du Canvas Pour les plus curieux et pour ceux qui ont fait du processing en Licence, une version 100% HTML5+Javascript existe : les démos sont assez impressionnantes. File API Web Sockets SVG et HTML5

TagCanvas function reference « Return to TagCanvas page Skip to: TagCanvas 2 has several functions, and the way they are called differs slightly between the stand-alone and jQuery versions. The buttons beneath the example cloud below each call one of the functions. Example cloud I've set the minSpeed option for this example cloud to make it easier to see the “Pause” and “Resume” buttons working. A Javascript function updates some of the tags every 5 seconds so that you can see the effect of the “Reload” and “Update” buttons. The “TagToFront” and “RotateTag” buttons call their functions with a randomly-chosen tag to move. Starting the cloud The start functions start or restart the cloud animation. When the tag list ID is not provided, TagCanvas will use any links it finds inside the canvas element for the tags - though this will not work in IE versions before IE9. // stand-alone version TagCanvas.Start(canvasId, tagListId, options); The jQuery version gets the canvas from the selector. Pausing the cloud animation

List of XML and HTML character entity references - Wikipedia, th Although in popular usage character references are often called "entity references" or even "entities", this usage is wrong.[citation needed] A character reference is a reference to a character, not to an entity. Entity reference refers to the content of a named entity. Character reference overview[edit] A numeric character reference refers to a character by its Universal Character Set/Unicode code point, and uses the format &#nnnn; or &#xhhhh; where nnnn is the code point in decimal form, and hhhh is the code point in hexadecimal form. In contrast, a character entity reference refers to a character by the name of an entity which has the desired character as its replacement text. &name; where name is the case-sensitive name of the entity. Standard public entity sets for characters[edit] ISO Entity Sets: SGML supplied a comprehensive set of entity declarations for characters widely used in Western technical and reference publishing, for Latin, Greek and Cyrillic scripts. Notes: See also[edit]

5 awesome HTML5 demos You’ve probably seen a bunch of tutorials or articles about HTML5 on design blogs recently, but didn’t try to use it because most users will not be able to view it anyway. Now to motivate you, I compiled a few HTML5 demos that should make you want to start learning this new markup. Be aware that you may not be able to see some of the demos. To know what elements of HTML5 your browser supports, take a look at this chart. 1. If you only have time to watch one of the demos suggested in this article, take a look at this great slideshow by APIrocks. 2. Ready to see some videos in your browser with no plugin or flash required? 3. This will probably not only blow a video in your browser, it will also blow your mind. 4. The screenshot that you see under this text is taken from the Tetris 3D created in javascript by Ben Joffe using the HTML5 canvas element. 5. Another HTML5 demo using canvas, it shows you some molecules in a rotation. And much more On the HTML5 demo site, go take a look there.

CSS : on reprend tout à zéro ! (épisode 3) Par Joe Gillespie Cet article est le troisième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Troisième étape : appliquer du style au texte Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. La police d'écriture Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Voici une indication courante de famille de polices sans-serif : font-family: Verdana, Geneva, Arial, sans-serif; Voici une famille de polices serif : font-family: Georgia, "Times New Roman", Times, serif; Remarquez que lorsque le nom d'une police contient plus d'un mot, l'ensemble doit être placé entre guillemets à l'anglaise : "Times New Roman". Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne. Notre page en police sans-serif >> Les titres

HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres

Visualisation interactive de données sur internet. Souvent illustrés à partir de liens et de noeuds, les différents systèmes de visualisation de données rendent visible des interactions complexes entre plusieurs facteurs. Ils transmettent ainsi une ou plusieurs informations sous la forme visuelle. L'idée d'un langage universel décryptant une thématique ou un questionnement est souvent rappelée pour présenter cette discipline entre analyse statistique et art visuel. Sur internet une quantité importante de données sont enregistrées, archivées et accessibles, voici quelques exemples de visualisation de ces informations en version animée et interactive. Wind Map, visualisation dynamique des vents Extrait en image ci-dessus, Wind Map propose une visualisation en direct (ou avec un léger différé) des vents aux Etats-Unis. Map Your Moves, exploration visuelle des déplacements Map Your Moves est une exploration visuelle interactive des déplacements des habitants de New York dans d'autres villes et pays.

Web Browser Standards Support This document will summarize the level of support for web standards and maturing technologies in popular web browsers. It covers the Internet Explorer, Firefox, and Opera web browsers, with focus on the HTML, CSS, DOM, and ECMAScript technologies. How to interpret these tables Up Each row corresponds to a feature of the particular web standard or maturing specification. Some features are listed as a summary of another group of features on the tables. Some summary features summarize a feature breakdown that is not written out on these tables but is obvious in the standard's specification, such as a predefined set of possible values for an attribute in HTML. The tables on this page and the summary page are in summarized form. Some feature ratings have explanations associated with them, particularly for those with an “I” rating. There are three families of web browsers shown here by default: IE, Firefox, and Opera. How features are rated Specification maturity levels About other browsers

My JS1K Demo - The Making Of Now, whenever size is an issue, the best way to make a small program is to generate all data on the fly, i.e. procedurally. This saves valuable storage space. While this might seem like a black art, often it just comes down to clever use of (high school) math. And as is often the case, the best tricks are also the simplest, as they use the least amount of code. To illustrate this, I'm going to break down my demo and show you all the major pieces and shortcuts used. Unlike the actual 1K demo, the code snippets here will feature legible spacing and descriptive variable names. Initialization JS1K's rules give you a Canvas tag to work with, so the first piece of code initializes it and makes it fill the window. From then on, it just renders frames of the demo. Animating the wiresRotating and projecting the wires into the camera viewColoring the wiresAnimating the camera All of this is done 30 times per second, using a normal setInterval timer: setInterval(function () { ... }, 33); Drawing Wires

Basic Structure of a Web Page While this reference aims to provide a thorough breakdown of the various HTML elements and their respective attributes, you also need to understand how these items fit into the bigger picture. A web page is structured as follows. The Doctype The first item to appear in the source code of a web page is the doctype declaration. This provides the web browser (or other user agent) with information about the type of markup language in which the page is written, which may or may not affect the way the browser renders the content. It may look a little scary at first glance, but the good news is that most WYSIWYG web editors will create the doctype for you automatically after you’ve selected from a dialog the type of document you’re creating. The doctype looks like this (as seen in the context of a very simple HTML 4.01 page without any content): <! In the example above, the doctype relates to HTML 4.01 Strict. The Document Tree Figure 1. html Here’s an example of an XHTML transitional page: <! head <!

Web 71 ressources en ligne Haut de page Schnaps.it, le générateur de template HTML5 Alsacréations est fier de vous annoncer la naissance de Schnaps.it, notre nouvel… Rendu par défaut des éléments HTML Outil conçu par Julien Royer, permettant d'observer les différences de rendu par… MobileHTML5 MobileHTML est un tableau de compatibilité récapitulatif à destination des plate-formes… ReformedApp Chronophage, redondant et fastidieux... Haut de page Prepros Prepros est un "environnement de travail" (workflow) graphique destiné aux projets… LearnLayout LearnLayout est un mini-site d'apprentissage dédié au positionnement en CSS. Accessibilité Haut de page Tanaguru Contrast-Finder Un outil de plus pour vérifier si les couleurs sont accessibles ? Développement Haut de page Manuel PHP Le manuel PHP est le seul, l'unique, la bible de ce langage ! Javascript Haut de page Web Haut de page Formats, encodage, XML Haut de page Validateur RSS et Atom Validateur officiel de flux RSS et ATOM du W3C. Webdesign Haut de page

Les Maisons en bois

Related:  HTML5htmlGENERALITES CODEShtml5/css3pasrod