Apprendre et comprendre jQuery – 1/3 • Tous les articles Tutoriels jQuery Introduction rapide et en douceur à l’utilisation d’une des bibliothèques JS à la mode. Ou comment ajouter une couche d’interactions simplement et proprement à vos pages. NB : ce billet sera divisé en trois parties. Publié il y a déjà trop longtemps… Introduction jQuery est une bibliothèque JS développée principalement par John Resig. Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants. Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Les navigateurs supportés sont : Firefox 1.5+Internet Explorer 6+Safari 2.0.2+Opera 9+ La bibliothèque est utilisée par exemple sur des sites comme : DellGoogle CodeDiggNBCAmazonMozillaWordPressDrupalSPIPThe Zend Frameworketc Par ailleurs cette bibliothèque est compatible (elle n’entre pas en conflit) avec d’autres. Pré-requis Bases Appel <! Compression Une fonction etc.
The following are the possible ways to create professional animations in SVG: – Medium Export your SMIL animations from a graphics application. The standard way to produce SVG animations with SMIL is to create them in applications like Adobe Animate CC and similar others (see the section below for a list), and then using plugins like Flash2svg to export them in SVG. The Flash2svg add-on, created by the very talented Tom Byrne, is a marvel. With it you can export from Adobe Animate CC almost all animations+sound as a single self-contained SVG file. If you need to use the SVG animation for cartoon editing or video production, you can then import the resulting SVG file in your editing software, for example Adobe After Effects. If you need to use SVG animations on the web, being SMIL not supported by all browsers, you should add a polyfill to your web page. Demo page without the smil polyfill: And the same page with the smil polyfill:
Mise en forme de texte I. Introduction À l'origine, HTML devait décrire la structure du texte sans imposer sa représentation physique qui devait rester le choix de l'utilisateur et de son navigateur (voir le premier chapitre). Pour décrire la structure du texte, c'est à-dire la nature du contenu (nom, adresse...) on parle de formatage logique. Ce cours va présenter ces deux types de formatage et les balises qui leur sont associées. II. 1. Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise <title> précédemment) : ce sont les en-têtes de sections ou paragraphes. Il existe six niveaux de titres d'importance décroissante : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. >Retour à la TdM Exemple et code source avec chaque balise TITRE : Table 1. 2. a. Fonction : Un paragraphe comme celui que vous lisez est délimité par les balises <p> et </p> (voir le source de cette page). b. Fonction : Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe. 3. 4. 5. III.
25 Free jQuery Photo Gallery / Albums with Tutorials | VisonwidGet 30 Free Photo Gallery / Albums with Tutorials Details Category: Webdev Hits: 20172 jQuery image galleries and albums are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Since they are already so popular I believe you don’t need me to tell you more about it. A Cool Instagram “Gravity” Gallery This will be a script that runs a search on Instagram, fetches and displays the photos in a grid, and then uses the Box2D library to simulate physical interactions between them. {ads1} Fresh Sliding Thumbnails Gallery with jQuery and PHP In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. Thumbnail Grid With Expanding Preview The interesting part is to calculate the correct preview height and to scroll the page to the right position. Photo Booth Strips With Lightbox Free jQuery Photo Gallery ( Tutorial ) Polaroid Photobar Gallery with jQuery
The Fall and Rise of SVG SVG certainly crashed and burned before it rose like a phoenix from the ashes… Sometime in 1998, a former co-worker who had gone to work at Adobe came by my office at Bertlesmann to inform me of a brand new technology that she knew would excite me: PGML, or “Precision Graphics Markup Language.” This was the Adobe flavor of XML for Vector Graphics. As Jon Warnock put it at the time: “The PGML proposal solves a growing need for a precise specification that enables members of the Web community to readily and reliably post, control and interact with graphics on the Web.” I fell for it, hook, line and sinker, and ever since that time, I have followed the standards for XML-based vector graphics closely. Completely obvious in the year 2000 What made SVG so cool? Yet there was an added dimension to the coolness: unlike PostScript, SVG was expressed as declarative markup in a standard markup meta-language, XML. …in a text file, save that file, then load it into a browser and see the result.
HTML XHTML -L'encodage et les caractères spéciaux L'encodage des caractères Un bon exemple pour comprendre l'encodage des caractères est l'exemple du code morse. En morse, chaque caractère alphabétique est traduit par une de sons courts et/ou longs. Ainsi, 3 bips cours donnent un "S", 3 bip longs un "O", etc... En informatique, les caractères alphabétiques sont associés à des codes binaires, c'est à dire composés d'une suite de 1 et de 0. En ASCII, les caractères sont codés sur 7 bits, soit un code composé de sept chiffres qui sont tous égaux à 0 ou à 1. A l'origine, les fichiers HTML sont faits pour être encodé en ASCII, c'est à dire sans caractères spéciaux. Ajourd'hui encore, utiliser cette table de conversion permet de se prémunir contre les incompatibilités. Les caractères spéciaux en HTML En HTML, tous les caractères spéciaux peuvent être remplacés par un code commençant par & (esperluète ou « et commercial ») et terminant par ; (point virgule). Ces caractères peuvent également être utilisés en majuscule : L'avantage de l'UTF-8
Converting jQuery Code to a Plugin Martin Angelov When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this – your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse. This is why today we are going to demonstrate the process of converting code to a plugin. We are going to take the code from our jQuery & CSS3 Select Replacement tutorial, and turn it into a ready for use jQuery plugin. The Idea Writing a jQuery plugin is not at all difficult. Here are several problems that we need to solve when converting the tutorial code into a jQuery plugin: We need to give users the ability to control what markup is generated for the dropdown. The Code As you remember from the tutorial, our jQuery code scans the select’s option elements and builds an unordered list. This is, however, too specific for a plugin. jQuery
Guide des animations SVG (SMIL) Armez-vous de courage, voi ch'entrate... Voici le fameux guide de Sara Soueidan, pour tout savoir sur les animations SVG avec SMIL. Les animations SMIL permettent des choses impossibles avec CSS. Par Sara Soueidan Introduction de Chris Coyier : Sara a le don de plonger au coeur des fonctionnalités du web et de nous les expliquer à nous autres, simples mortels. Note du traducteur épuisé : guide épique s’il en est, et qui peut paraître ardu, surtout dans ses premiers paragraphes. Généralités Les graphiques SVG peuvent être animés au moyen d’éléments d’animation. <animate> - qui vous permet d’animer des attributs et propriétés scalaires sur une période de temps donnée. En plus des éléments d’animation définis dans la spec SMIL, SVG inclut des extensions compatibles avec ladite spécification. <animateTransform> - vous permet d’animer l’un des attributs de transformation SVG dans le temps, comme l’attribut <transform>. Pourquoi utiliser les animations SVG? //SVG <rect id="cool_shape" ...
Les colonnes factices Par Dan Cederholm Une des questions que l'on me pose le plus fréquemment à propos du design de mon site personnel est la suivante : Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ? En fait, l'idée est vraiment simple, c'est un concept que beaucoup parmi vous connaissent peut-être déjà. Pour les autres, la technique qui suit peut s'avérer une petite astuce bien pratique. L'étirement vertical Une des propriétés un peu frustrantes des CSS est le fait que, verticalement, les éléments s'étirent seulement aussi loin qu'ils en ont besoin. Cela devient un dilemme intéressant quand vous utilisez l'élément <div> pour diviser votre balisage, puis appliquez la feuille de style pour créer une mise en page en colonnes. Image 1 Il y a plusieurs techniques pour que ces colonnes apparaissent de longueurs égales, indépendamment de leur contenu. La triche Image 2 La feuille de style Cette règle CSS élémentaire est ajoutée à l'élément body : Image 3
Booklet - jQuery Plugin what is it? Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. Licensed under the MIT license. Want to check out the source? see it work jQuery Booklet This is a sample booklet! Content Variety You can place any sort of html elements inside of your booklet pages. Default Options The default options include: Manual Page TurningThis option requires jQuery UI, but will degrade and be usable if not included. Move to the next page by dragging or the arrow keys to see the animation in action!
Animer un SVG avec CSS Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours. Par Chris Coyier Il existe plusieurs façons d'animer une image svg, depuis la balise animate jusqu'aux bibliothèques comme Snap.svg ou SVG.js. Nous allons essayer autre chose ici, en utilisant SVG inline (c'est à dire le code SVG à l'intérieur de notre HTML) et en animant les parties de l'image avec CSS. Je me suis amusé avec ça dernièrement, Wufoo souhaitant rafraîchir le graphisme de ses pubs sur CSS-Tricks. La démo finale est ici. NdT : Pour une introduction générale à SVG, vous pouvez consulter l'excellent article de Chris Coyier Utiliser SVG. 1. Ça va ressembler à une leçon de dessin sommaire, mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Faire sauter les lettres dans la page. J'ai mis tout ça sur Illustrator : 2. 3. 4. 5. Fade in/out des mots 6. En anglais :
Full Screen Background Image - Pure CSS Code « Paul Mason This is a simple tutorial that teaches you how to create a full screen background image for any sized screen or browser window using pure css code. This method is cross-browser compatible and doesn't require any javascript or flash. View the Demo <body> <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> <div id="wrapper"> <p>Content goes here... Resources CSS3 full screen background image tutorial jQuery Animations: A 7-Step Program A dash of animation can spruce up a dull interface. In this tutorial, you'll learn how to do it the right way with jQuery. A Word From the Author Animation: a concept which often evokes divisive reactions from people. Some swear by its usefulness, whilst others rage at its overuse. Nevertheless, animations, when used right, often spruce up a user interface, and make it feel much more snappy and clean. Interested? Step 1: jQuery Basics jQuery is a JavaScript library which intends to make it easier for you, a developer, to construct better, feature rich, interactive web sites and user interfaces with as few lines of code as possible. A typical line of code looks like so: Let's take a look at each part: $ - Shorthand for the jquery object. Here, we are going to just stick with animation and effects related functionality. Step 2: Using the Baked-in Effects jQuery provides a ton of built in methods you can use right out of the box. speed denotes the duration, in seconds, of the animation. The HTML