INF04 HTML5 1 Langages et structure du Web. Benoît Habert
|
|
- Justin Thibodeau
- il y a 8 ans
- Total affichages :
Transcription
1 INF04 HTML5 1 Langages et structure du Web Benoît Habert
2 Plan du cours Programmation côté client (4 séances) BH HTML5 Nouvelles balises «sémantiques» Rich media : audio, vidéo CSS3 (transitions, animations, rotations) Canvas 2D B. Habert 2013 Langages du Web - HTML5 1 2
3 Plan du cours Programmation avancée côté serveur (5 séances) LM Rappel : SOAP et REST AJAX (échanges asynchrones Web sockets : communication bidirectionnelle client/serveur Web RTC (Real-Time Communication) Web storage Requêtage cross-domain B. Habert 2013 Langages du Web - HTML5 1 3
4 Plan du cours Programmation Web mobile (3 séances) LM Responsive Web Design (design adaptatif) Récupération d'information (géolocalisation, orientation). Savoir se servir d'une interface tactile. Compilation en applications Web ou natives. B. Habert 2013 Langages du Web - HTML5 1 4
5 Séance 1 Présentation d HTML5 Histoire Statut actuel Ajouts de structure et formulaires Mises en œuvre Formulaires Autopsie/amendement d un environnement reposant sur HTML5 B. Habert 2013 Langages du Web - HTML5 1 5
6 INTRODUCTION À HTML5 B. Habert 2013 Langages du Web - HTML5 1 6
7 Etat des lieux : avant Ajustements : interaction avec une BD (re)structuration logique : XML et XSLT Structuration grossière de la page : HTML Mise en place d accroches : <div>, <span> Rendu d empans identifiés (structure, classes, éléments nommés de manière unique) : CSS Interactions côté client : JavaScript B. Habert 2013 Langages du Web - HTML5 1 7
8 Accroches de rendu <div> : conteneur de type bloc <span> (traduction : empan) : conteneur de type en ligne Aucun des deux n a de valeur sémantique. L élément (la balise) permet d associer un rendu Ajout d un attribut id ou class pour associer des règles CSS B. Habert 2013 Langages du Web - HTML5 1 8
9 (di con)vergences W3C en 1998 Figement de HTML (4.01) Spécification de XHTML Groupe (Opera, Mozilla, Apple) non convaincu par la XMLisation du Web : WHATWG (Web HyperText Application Technology Working Group) Reprise par/avec W3C entre 2006 et 2009 B. Habert 2013 Langages du Web - HTML5 1 9
10 HTML5 : un nécessaire compromis Tension entre l instituant et l institué (le «patrimoine» de pages existantes Prise en charge différenciée entre les moteurs de rendu et les navigateurs Instabilité des «genres» du Web si bien qu est limitée l avancée vers un balisage plus «sémantique» B. Habert 2013 Langages du Web - HTML5 1 10
11 Stabilisations et balisage TeX et LaTeX TeX : primitives de description de documents (caractères, espacements, page, tableaux ) LaTeX : types de documents (article, book, report, letter) Le rendu des subdivisions (section) dépend de la classe TEI Structuration d ensemble du «texte» et des métadonnées Briques de base : mise en évidence, citations Spécificités de «genres» : théâtre, poésie, terminologie B. Habert 2013 Langages du Web - HTML5 1 11
12 HTML5 : in progress Spécification à l état de brouillon (draft) avec évolutions Ex. <time> supprimée en octobre 2011 et rétablie un mois après Ex. <aside> Départ: informations liées au contenu principal (comme un glossaire) Maintenant : sidebar Compatibilité ascendante (rétrospective) B. Habert 2013 Langages du Web - HTML5 1 12
13 Permissivité HTML5ienne Pas sensible à la case <H1>Scoop<h1> Balises de fermeture pas obligatoires Guillemets facultatifs dans les attributs B. Habert 2013 Langages du Web - HTML5 1 13
14 Bonnes pratiques Etre cohérent Forme XHTML de HTML5 Toute balise ouvrante doit être fermée Les balises vides doivent être fermées <br /> Balises et attributs : en minuscules Chaque attribut doit avoir une valeur entre guillemets ou apostrophes Les éléments doivent être correctement imbriqués B. Habert 2013 Langages du Web - HTML5 1 14
15 Minimal HTML5 <!DOCTYPE html> <html lang="fr" /> <head> <meta charset="utf-8" /> <title>essai 1</title> </head> <body> </body> </html> En gris : optionnel NB L élément <body> peut être omis (pas pour IE8 et ses ancêtres) L enveloppement par l élément <head> aussi Cependant on s en tiendra à un modèle qui les conserve B. Habert 2013 Langages du Web - HTML5 1 15
16 Inclusion CSS et JS <link rel="stylesheet" href="css/fs1.css" /> <style> /** Règles CSS **/ </style> <script src="js/script1.js"></script> NB : JS est le type par défaut, il n a plus à être spécifié B. Habert 2013 Langages du Web - HTML5 1 16
17 Validation B. Habert 2013 Langages du Web - HTML5 1 17
18 Inventaire partiel Eléments supprimés Eléments ajoutés (et changeant le rôle d autres éléments) Eléments explicitement redéfinis B. Habert 2013 Langages du Web - HTML5 1 18
19 Abandons Au profit de CSS : <basefont>, <big>, <center>, <font>, <strike>, <tt>, <u> Pour des raisons d accessibilité : <frame>, <frameset>, <noframe> B. Habert 2013 Langages du Web - HTML5 1 19
20 Redéfinitions <a> : peut contenir tout type d élément (titre, paragraphe, liste, table ) sauf les éléments d interaction (lien, bouton, champs de formulaire) <cite> : titre d œuvre (<q> et <quote> pour citations brèves / longues) B. Habert 2013 Langages du Web - HTML5 1 20
21 Redéfinitions <small> : éléments en petits caractères de pied de page (copyright, mentions légales) B. Habert 2013 Langages du Web - HTML5 1 21
22 Restructurations Au départ Proximité/confusion rendu/rôle <i> : italiques <b> : bold (gras) XHTML et HTML5 Découplage rôle/rendu <em> : mise en exergue <strong> : importance forte (le rendu peut varier : gras / majusculisation) Incertitude sur le rôle de <i> et <b> NB <em>/<strong> autoimbricables B. Habert 2013 Langages du Web - HTML5 1 22
23 Flous <b> : «mettre en valeur une portion de texte, sans pour autant lui conférer une importance particulière» <i> : «mettre en exergue une portion de texte différencier certains termes» B. Habert 2013 Langages du Web - HTML5 1 23
24 Ajouts structure globale <article> : portion de contenu indépendant (peut contenir un autre <article> - cf. Post avec commentaire) <aside> : contenu indirectement lié au contenu principal <section> : section de contenu ou d application (plus générique que <article>, <nav>, <header>, <footer>, <aside>). Mais peut découper un <article> B. Habert 2013 Langages du Web - HTML5 1 24
25 Ajouts structure globale <nav> : liens pour naviguer (site, document) <header> : pour le document mais aussi pour <section> ou <article> <footer> : du document ou d une section au sens large NB Les modes d accès en CSS permettent de renvoyer aux différents niveaux d emboîtement d éléments comme footer B. Habert 2013 Langages du Web - HTML5 1 25
26 Ajouts hiérarchisation <hgroup> : regroupement de titres (titre et sous-titre, par ex.). Un élément h2 après un h1 dans un hgroup est davantage associé au h1, comme un sous-titre <figure> <img src= /> <figcaption> <figcaption> </figure> Fait un tout d une image et d une légende B. Habert 2013 Langages du Web - HTML5 1 26
27 Ajouts autres <time> avec attribut datetime ayant pour valeur une date lisible par une machine (pour extraction d information) <time datetime= >mardi 8 janvier 2013</time> Attribut pubdate : indique que le <time> est la date de publication de l élément <article> ou <body> le contenant B. Habert 2013 Langages du Web - HTML5 1 27
28 Regroupements <fieldset> <legend> </legend> <input type= /> </fieldset> Permet par exemple de regrouper des éléments input dans un formulaire et de fournir une légende pour ce regroupement B. Habert 2013 Langages du Web - HTML5 1 28
29 Formulaires Esprit Avoir des entrées plus spécialisées que <input type= text /> (typage plus fin) Déporter de JavaScript vers HTML5 les contrôles de validité côté client de la valeur fournie par l utilisateur Nouveaux champs «vérifiants» <input type=" " /> <input type="tel" /> B. Habert 2013 Langages du Web - HTML5 1 29
30 Formulaires Nouveaux champs «vérifiants» (suite) <input type="search" /> <input type="url" /> <input type="color" /> <input type="date" /> (et time, week, datetime) <input type="number" min="n" max="m" step="o" /> <input type="range" min="n" max="m" /> B. Habert 2013 Langages du Web - HTML5 1 30
31 Formulaires Attributs placeholder= A afficher dans le champ. La valeur est un représentant, un «lieutenant», un vicaire qui aide à comprendre ce qu il faut mettre. Par exemple : JJ/ MM/AAAA pour une année pattern : regexp contraignant la forme de ce qui est attendu. Exemple pour un numéro de téléphone : [0-9]{10} : une suite de 10 chiffres required : le champ doit être renseigné, sans quoi la validation est impossible B. Habert 2013 Langages du Web - HTML5 1 31
32 Formulaires Attributs (suite) autofocus : champ du formulaire par lequel on souhaite que l utilisateur commence la saisie. Le focus y est mis quand la page est chargée autocomplete : par défaut à on au niveau du formulaire ou du champ form : permet de placer une partie de formulaire en dehors d un formulaire tout en l y rattachant (permet de répartir les endroits de recueil d information de la manière souhaitée et pas forcément tout ensemble) B. Habert 2013 Langages du Web - HTML5 1 32
33 Formulaires Etiquetage (réactif) des champs <label>x <input /></label> <label for= Y >X <input id= Y /></label> <label for= Y >X</label> <input id= Y /> Pointer l élément label rend actif l input correspondant. Zone réactive plus large - accessibilité - adapté aux smartphones B. Habert 2013 Langages du Web - HTML5 1 33
34 Volets Accéder à du son, de la vidéo, du dessin ou des animations sans plug-in <audio> <video> <canvas> B. Habert 2013 Langages du Web - HTML5 1 34
35 Non abordé Attributs data-*= X : intégration de données «internes» (pas destinées à l utilisateur) Microdonnées (item ) : description du contenu pour des programmes tiers Appui à l accessibilité : rôles WAI-ARIA (Accessible Rich Internet Application Suite) indication du rôle d un élément HTML B. Habert 2013 Langages du Web - HTML5 1 35
36 Contenus HTML5 Contenu de métadonnées dans la partie <head> y compris donc <style> et <script> (contribuent à l apparence et au comportement du contenu principal) Contenu de flux (flow) : ensemble du contenu Contenu de section : <article>, <aside>, <nav>, <section> ; portée en-têtes/pieds B. Habert 2013 Langages du Web - HTML5 1 36
37 Contenus HTML5 Contenu de flux (flow) suite Contenu d en-tête (heading) : <h1> à <h6>, <hgroup> Contenu de phrasé (phrasing) : texte du document Contenu embarqué (embedded) : import de ressource - image, vidéo, audio Contenu interactif (interactive) : <a>, <input>, <button>, <textarea> B. Habert 2013 Langages du Web - HTML5 1 37
38 Démarche Ne pas oublier la persistance des versions anciennes (en particulier IE en milieu industriel) B. Habert 2013 Langages du Web - HTML5 1 38
39 Démarche Vérifier L accessibilité la prise en charge CSS, HTML, JS Combiner Pris en charge Adaptations constructeurs Solutions de remplacement/contournement B. Habert 2013 Langages du Web - HTML5 1 39
40 Aller plus loin Une prise de recul Avec liens vers les informations du WHATWG Groupe de développement B. Habert 2013 Langages du Web - HTML5 1 40
41 HTML5 : MISES EN OEUVRE B. Habert 2013 Langages du Web - HTML5 1 41
42 FORMULAIRES B. Habert 2013 Langages du Web - HTML5 1 42
43 Environnement Créer un répertoire HTML5 dans le répertoire où Apache cherche les scripts exécutables Dans ce répertoire Déposer utilitaires.php afficheprofil.php Développer renseigneprofilk.html B. Habert 2013 Langages du Web - HTML5 1 43
44 renseigneprofil1.html Ecrire un document HTML5 minimal de nom renseigneprofil1.html, le tester Ajouter Un hgroup avec un h1 et un h2 Un formulaire appelant en mode POST afficheprofil.php avec 2 boutons : effacer / valider B. Habert 2013 Langages du Web - HTML5 1 44
45 renseigneprofil1.html Ajouter Un élément fieldset avec Un élément <legend> Autant de couples <label><input> que demandé en choisissant le type idoine Prénom Tél. fixe Tél. portable Date de naissance Âge Couleur préférée B. Habert 2013 Langages du Web - HTML5 1 45
46 renseigneprofil1.html Ouvrir tous les navigateurs dont vous disposez Notez dans le pad sous votre nom La combinaison système d exploitation/ navigateur/version Pour chaque version de renseigneprofilk.html indiquer les comportements observés contrôles effectivement mis en place Environnement transmis B. Habert 2013 Langages du Web - HTML5 1 46
47 renseigneprofil2.html Sauvez renseigneprofil1.html sous renseigneprofil2.html Modifier en conséquence le texte de l élément <title> Utilisez les attributs pour modifier les comportements des contrôles (écriture XTHML : X= X ) Notez dans le pad les modifications observées selon les navigateurs B. Habert 2013 Langages du Web - HTML5 1 47
48 renseigneprofil2.html Modifications visées Faites que le focus de départ soit sur le prénom Contraignez la «forme» du téléphone portable et rendez cette information nécessaire Fournissez un guide de saisie pour la date Donnez une fourchette raisonnable pour l âge (7 à 77) et un «pas» de 1 B. Habert 2013 Langages du Web - HTML5 1 48
49 Réalisation Document HTML5 minimal <!DOCTYPE html> <html lang="fr" /> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html> B. Habert 2013 Langages du Web - HTML5 1 49
50 Réalisation B. Habert 2013 Langages du Web - HTML5 1 50
51 Réalisation B. Habert 2013 Langages du Web - HTML5 1 51
52 Réalisation B. Habert 2013 Langages du Web - HTML5 1 52
53 Réalisation B. Habert 2013 Langages du Web - HTML5 1 53
54 Réalisation B. Habert 2013 Langages du Web - HTML5 1 54
55 Réalisation B. Habert 2013 Langages du Web - HTML5 1 55
56 Réalisation renseigneprofilk.html est un formulaire faisant appel aux nouveaux contrôles HTML5 Valider ce formulaire déclenche afficheprofil.php à qui est transmis en mode POST un environnement, un ensemble de variables et de valeurs. Ex. le premier input text associe à la variable prenom la chaîne entrée par l utilisateur B. Habert 2013 Langages du Web - HTML5 1 56
57 Réalisation afficheprofil.php fait appel à des fonctions PHP contenues dans le fichier utilitaires.php chargé par la fonction prédéfinie PHP require_once(nom de fichier) Les fonctions utilitaires facilitent la création d un document HTML5 minimum (ce sont des raccourcis) B. Habert 2013 Langages du Web - HTML5 1 57
58 Réalisation afficheprofil.php se contente d afficher (via une boucle foreach) les associations variable-valeur qui sont contenues dans le tableau $_POST qui donne accès à l environnement transmis par renseigneprofilk.html B. Habert 2013 Langages du Web - HTML5 1 58
59 HTML5ISATION : JEU DES DIFFÉRENCES B. Habert 2013 Langages du Web - HTML5 1 59
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
Plus en détailFormation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Plus en détailNFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Plus en détailLangage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
Plus en détailProgrammation Web TP1 - HTML
Programmation Web TP1 - HTML Vous allez réaliser votre premier site Web dans lequel vous présenterez la société SC, agence spécialisée dans la conception des sites internet. 1 - Une première page en HTML
Plus en détailCRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Plus en détailHTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Plus en détailLES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
Plus en détail< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
Plus en détailPrésentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
Plus en détailSTID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
Plus en détailProgrammation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
Plus en détailGestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
Plus en détailRAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Plus en détailTP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Plus en détailINTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Plus en détailBES WEBDEVELOPER ACTIVITÉ RÔLE
BES WEBDEVELOPER ACTIVITÉ Le web developer participe aux activités concernant la conception, la réalisation, la mise à jour, la maintenance et l évolution d applications internet/intranet statiques et
Plus en détailHTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
Plus en détailIntroduction à. Oracle Application Express
Introduction à Oracle Application Express Sommaire Qu est-ce que Oracle Application Express (APEX)? Vue d ensemble des fonctionnalités et des différents composants d Oracle APEX Démonstration de création
Plus en détailRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
Plus en détailModule Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
Plus en détailModule BD et sites WEB
Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD
Plus en détailLes outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
Plus en détailHTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
Plus en détailcreer votre site internet en html/css
3 jours (21 heures) 1110 HT (Inter) 2670 HT (Intra) Toute personne (particulier ou professionnel) souhaitant créer son site Internet Créez son site Internet Assurez sa mise en ligne Gérer les mises à jour
Plus en détailTP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,
Plus en détailOptimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Plus en détailProgrammation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Plus en détailWEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES
WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,
Plus en détailLes grandes facettes du développement Web Nicolas Thouvenin - Stéphane Gully
Les grandes facettes du développement Web Qui sommes nous? Nicolas Thouvenin Stéphane Gully Projets Web depuis 2000 LAMP, NodeJS HTML, CSS, jquery
Plus en détailNormes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Plus en détailXML par la pratique Bases indispensables, concepts et cas pratiques (3ième édition)
Présentation du langage XML 1. De SGML à XML 17 2. Les bases de XML 18 2.1 Rappel sur HTML 18 2.2 Votre premier document XML 19 2.3 Les avantages de XML 21 3. La syntaxe XML 21 3.1 La première ligne du
Plus en détailSYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
Plus en détailAutour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
Plus en détailNotice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
Plus en détailFLEX 3. Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder. Aurélien Vannieuwenhuyze
Programmation FLEX 3 Applications Internet riches avec Flash ActionScript 3, MXML et Flex Builder Aurélien Vannieuwenhuyze Avec la contribution de Romain Pouclet Groupe Eyrolles, 2009, ISBN : 978-2-212-12387-6
Plus en détailPack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
Plus en détailDans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Plus en détailSite web établissement sous Drupal
Site web établissement sous Drupal Etat Date Rédacteur Version Création 12/12/2013 C. Vilport Pôle Web DASI 1.0 Modification 04/02/2014 C. Vilport Pôle Web DASI 1.1 Diffusion aux 06/02/2014 C. Vilport
Plus en détailInitiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Plus en détailSII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...
Plus en détailLANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation
ING 01 LANGAGUE JAVA Durée : 21 heures 1090 HT / jour Dates : à définir en 2012 Concevoir et développer des programmes en langage Java Comprendre le fonctionnement de la machine virtuelle S approprier
Plus en détailTIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
Plus en détailHMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
Plus en détailLes services usuels de l Internet
Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet Courrier électronique (mail) - protocole SMTP (Simple Mail Transfer Protocol) inclut maintenant tous types
Plus en détailL'accessibilité des applications web mobiles
L'accessibilité des applications web mobiles ou la véritable histoire d un projet web mobile (très) grand public vu par ses utilisateurs Contée par Sébastien Delorme, Atalan Casting Critiques «Une histoire
Plus en détailWordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu
Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Index 404 Notifier (erreurs 404) 62 A Adwords 148
Plus en détailNotes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Plus en détailAuteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA
Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2
Plus en détailINTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
Plus en détailInternet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall
Internet DNS World Wide Web Mécanismes de base Exécution d'applications sur le web Divers Proxy, fire-wall 1 Les services usuels de l Internet Services principaux (applications) disponibles sur l Internet
Plus en détailEcrire pour le web. Rédiger : simple, concis, structuré. Faire (plus) court. L essentiel d abord. Alléger le style. Varier les types de contenus
Ecrire pour le web Un texte web de lecture aisée pour l internaute, l est aussi pour les moteurs de recherche ; l écriture peut ainsi être mise au service du référencement naturel. De façon complémentaire,
Plus en détailInstallation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6
Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6 1 BERNIER François http://astronomie-astrophotographie.fr Table des matières Installation d un serveur HTTP (Hypertext Transfer
Plus en détailFormation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
Plus en détailPetite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
Plus en détailL envoi d un formulaire par courriel. Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248
L envoi d un formulaire par courriel Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248 Chapitre 9 L envoi d un formulaire par courriel L envoi par courriel d informations
Plus en détail2 LES BASES DU HTML 19 Qu est-ce que le HTML? 20 De quand date le HTML? 20 Écrire son propre code HTML 22
SOMMAIRE INTRODUCTION La collection Classroom in a Book TinyUrL Conditions requises Installation du programme Copie des fichiers Classroom in a Book ordre recommandé pour les leçons Démarrage instantané
Plus en détailmon site web via WordPress
mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications
Plus en détailIntégrateur Web HTML5 CSS3
Intégrateur Web HTML5 CSS3 L objectif de la 3W Academy est de former des petits groupes d élèves à l intégration de sites internet ainsi qu à la création d applications web simples telles qu un blog ou
Plus en détailDevenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
Plus en détailLe logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.
1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de
Plus en détailBernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
Plus en détailLes sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Plus en détailMagento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s
Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN
Plus en détailApplication Web et J2EE
Application Web et J2EE Servlet, JSP, Persistence, Méthodologie Pierre Gambarotto Département Informatique et Math appli ENSEEIHT Plan Introduction 1 Introduction Objectfis
Plus en détailPour en expliquer le principe, on se limitera à deux exemples :
Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera
Plus en détailIntroduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
Plus en détailBonnes pratiques de développement JavaScript
Bonnes pratiques de développement JavaScript Titre présentation Conférencier François Béliveau Romain Dorgueil A propos de nous... François Béliveau Développeur web depuis 8 ans Utilise symfony depuis
Plus en détailTechnologies du Web. Créer et héberger un site Web. Pierre Senellart. Page 1 / 26 Licence de droits d usage
Technologies du Web Créer et héberger un site Web Page 1 / 26 Plan Planification Choisir une solution d hébergement Administration Développement du site Page 2 / 26 Cahier des charges Objectifs du site
Plus en détailDéveloppement d'applications Web HTML5 L'art et la manière avec Visual Studio 2015 et TFS
Avant de commencer 1. Introduction 15 2. HTML5 oui, mais pas que... 15 2.1 HTML5 16 2.2 JavaScript 17 2.3 CSS 18 3. Les outils 18 Préparation des outils et création du projet 1. Introduction 21 2. Team
Plus en détailWordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu
Daniel Roch Optimiser son référencement WordPress Référencement naturel (SEO) Préface d Olivier Andrieu Groupe Eyrolles, 2013, ISBN : 978-2-212-13714-9 Table des matières AVANT-PROPOS... 1 Pourquoi ce
Plus en détail.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Plus en détailOptimiser les e-mails marketing Les points essentiels
Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement
Plus en détailSe former pour réussir!
Centre de Formation Professionnelle du Lycée Agricole http://www.lycee-agricole-laval.com/cfppa-formation-continue.html Catalogue Techniques Agricoles Se former pour réussir! «Si je pouvais être aidé,
Plus en détailOptimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Plus en détailwww.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
Plus en détail4. SERVICES WEB REST 46
4. SERVICES WEB REST 46 REST REST acronyme de REpresentational State Transfert Concept introduit en 2000 dans la thèse de Roy FIELDING Est un style d architecture inspiré de l architecture WEB En 2010,
Plus en détailFORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
Plus en détail... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE
@... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE Office de Tourisme Lesneven - Côte des Légendes 12 boulevard des Frères Lumière - BP 48 29260 LESNEVEN
Plus en détailKompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
Plus en détailWeb Site Story Etude, développement et valorisation de votre présence internet
Web Site Story Etude, développement et valorisation de votre présence internet Créer et diffuser des fils d'actualité Plan : Rappels Historique Lecteurs RSS Constitution d'un fichier RSS Outils générateurs
Plus en détailProjet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
Plus en détailGuide de création de site web optimisé
Guide de création de site web optimisé Vous trouverez ci-après un résumé des différents points à prendre en compte pour créer un site web optimisé pour les moteurs de recherche en termes de code HTML et
Plus en détailSana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
Plus en détailLogiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
Plus en détailPublier dans la Base Documentaire
Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008
Plus en détailCREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
Plus en détailDu livre enrichi et de l EPUB 3
Assises Professionnelles du Livre A l heure du numérique 8 novembre 2011-14h00-18h00 Institut océanographique de Paris Du livre enrichi et de l EPUB 3 Les termes suivis d un astérisque sont définis dans
Plus en détailWebSSO, synchronisation et contrôle des accès via LDAP
31 mars, 1er et 2 avril 2009 WebSSO, synchronisation et contrôle des accès via LDAP Clément Oudot Thomas Chemineau Sommaire général Synchronisation d'identités WebSSO et contrôle des accès Démonstration
Plus en détailArchitectures web/bases de données
Architectures web/bases de données I - Page web simple : HTML statique Le code HTML est le langage de base pour concevoir des pages destinées à être publiées sur le réseau Internet ou intranet. Ce n'est
Plus en détailA. L audit de l ergonomie 11. B. Quand réaliser un audit de l ergonomie? 11. C. Notions élémentaires 12. 1. Utilisabilité 12 2.
Chapitre 1 : Auditer l ergonomie du site web A. L audit de l ergonomie 11 B. Quand réaliser un audit de l ergonomie? 11 C. Notions élémentaires 12 1. Utilisabilité 12 2. Jakob Nielsen 12 D. Réaliser l
Plus en détailPrincipales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
Plus en détailCréer une mise en page
Créer une mise en page 4 Dans cette leçon, vous apprendrez : les bases de la conception de pages web ; à créer des maquettes de pages avec des vignettes et des représentations en fil de fer ; à insérer
Plus en détailSage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8
Sage 100 CRM - Guide de la Fusion Avancée Version 8 Mise à jour : 2015 version 8 Composition du progiciel Votre progiciel est composé d un boîtier de rangement comprenant : le cédérom sur lequel est enregistré
Plus en détailBanque de données d offres & carte web interactive d offres
Réseau des parcs suisses Monbijoustrasse 61, 3007 Bern Tel. +41 31 381 10 71; info@paerke.ch; www.paerke.ch Banque de données d offres: a.jordan@paerke.ch Carte web interactive: t.estermann@paerke.ch Feuille
Plus en détailSPIP. Gestion de la performance dans SPIP. Préoccupa)on historique
SPIP Gestion de la performance dans SPIP Préoccupa)on historique Intrinsèquement lié aux objec)fs du projet (indépendance des u)lisateurs / prestas techniques) par la typologie majoritaire des u)lisateurs
Plus en détailLe référencement naturel
Le référencement naturel Phases essentielles Choix des mots-clés Où se référencer : moteurs, annuaires Indexation des pages du site dans les moteurs Positionnement et trafic généré Optimisation des pages
Plus en détailSystème de gestion de contenu
1 Système de gestion de contenu Un système de gestion de contenu ou SGC ((en) Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites
Plus en détail