La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Haute Ecole de la ville de Liège - Les départements Scientifique et Technologique - Section Informatique et Systèmes ©Julian Hardenne 3TI Iset - 2011 Langages.

Présentations similaires


Présentation au sujet: "Haute Ecole de la ville de Liège - Les départements Scientifique et Technologique - Section Informatique et Systèmes ©Julian Hardenne 3TI Iset - 2011 Langages."— Transcription de la présentation:

1 Haute Ecole de la ville de Liège - Les départements Scientifique et Technologique - Section Informatique et Systèmes ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

2 Je ne pense pas que nous puissions déjà parler dun web 3.0, mais des avancées significatives sont déjà implémentées et dautres sont sur la bonne voie. Insérer nativement une vidéo ou un fichier audio est désormais possible, même si quelques contraintes sont toujours de mise. Le W3C et le WHATWG misent beaucoup sur la simplicité; plus besoin dêtre un grand connaisseur pour faire quelque chose de beau, mais ne vous étonnez pas si vous devez faire face à plus de complexité si vous êtes perfectionniste (côté design, entendons nous bien). Jai donc choisi de vous présenter ici plusieurs balises HTML (il faut savoir quil existe deux fois plus de balises en HTML5 quen HTML4) ainsi que les avancées en CSS3, déjà disponibles et supportées par tous les navigateurs majeurs actuels. Concernant la partie sur les WebForms 2.0, cest actuellement grâce à Opéra que vous obtiendrez les meilleurs résultats. Ce travail ne contient donc pas une liste exhaustive des balises HTML5 ou des propriétés CSS3, ce nest que la partie émergée de liceberg. ©Julian Hardenne 3TI Iset Cours de Langages Avancés (R. Billen)

3 Logiciels utilisés Conversion video : MiroVideoConverter (gratuit) Conversion audio : Switch Sound File Converter de NCH (gratuit) Pour les couleurs : la boite à couleurs (gratuit) Pour les codes sources : Notepad++ (gratuit) Les pages ont été testées sur : Opéra IE9 Firexox 7.01 Safari Google Chrome (R15) ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

4 Petite histoire de lHTML HTML 1 na jamais existé [1991]. HTML 2 aux mains de lIETF. HTML 3 Sir Tim reprend le pouvoir. HTML 4 un bazar très puissant. XHTML 1 de lordre et de la discipline. XHTML 1.1, on craint le pire XHTML 2, adieu le web ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

5 Pourquoi XHTML 2 ? HTML était mort depuis la version 4. Les spécifications étaient troubles. Vive le XML. Arrivée du WHATWG ! XHTML2 ne verra jamais le jour. Ian Hickson prend position. Naissance du Web Hypertext Application Technology WG ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

6 W3C vs WHATWG Démocratie contre monarchie Web Forms 2.0 et Web Apps 1.0 Naissance de lHTML , lannée de la lucidité, quoique… HTML5 et HTML le certificat de décès est rendu public LXHTML est mort, vive la syntaxe XHTML ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

7 LHTML5 Commit-Then-Review & Review-Then-Commit LHTML5 sera une proposition de recommandation… … en ans pour lélément « abbr » Une évolution, pas une révolution et cest tant mieux. Si vous codez en HTML, vous codez déjà en HTML5 ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

8 HTML5, les fondements Ne pas réinventer la roue. Cest grave, Doctype ?, cest fini ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

9 Les dinosaures vivent encore ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

10 Rappel des termes HTML Une balise comporte Des attributs Contenant des valeurs CSS Un sélecteur Définit des propriétés Contenant des valeurs ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

11 Lélément a gonflé aux hormones Un inline qui enveloppe ! Mon super site Et tout ça dans un lien ! Est-ce que ce sera bientôt supporté ? Natif et légalisé ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

12 :visited, what the internet knows about you ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

13 et ne sont pas ce que lont croit ! Donner une importance au texte Pourquoi pas un span et la propriété background-color ? et BLOCK : Indique la présence d'une figure (image, code...) illustrant le texte. INLINE : Description de la figure. ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

14 CSS3 : support et attentes checklist-css3/ checklist-css3/ Polices exotiques Ombrages Transparence Coins arrondis Positionnement avancé Rotation ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

15 Les sélecteurs… késako ? Liste des sélecteurs : selectors-updates/WD-css3-selectors fr.html#selectorshttp://www.w3.org/Style/css3- selectors-updates/WD-css3-selectors fr.html#selectors A + B : une balise qui en suit une autre A[attribut] : une balise qui possède un attribut A[attribut="Valeur"] : une balise, un attribut et une valeur A[attribut*="Valeur"] : une balise, un attribut et un morceau de valeur ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

16 Les types de police.ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs..eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire de Microsoft..otf : OpenType Font. Ne fonctionne pas sur Internet Explorer.svg : SVG Font. Le seul format reconnu sur les iPhone et iPad pour le moment..woff : Web Open Font Format. Nouveau format conçu pour le Web qui fonctionne sur IE9 et tous les autres navigateurs. ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

17 Comment faire { /* Définition d'une nouvelle police nommée LearningCurveProRegular */ font-family: 'LearningCurveProRegular'; src: url('LearningCurve_OT-webfont.eot'); src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'), url('LearningCurve_OT-webfont.woff') format('woff'), url('LearningCurve_OT-webfont.ttf') format('truetype'), url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg'); } h1 /* Utilisation de la police qu'on vient de définir sur les titres */ { font-family: 'LearningCurveProRegular', Arial, serif; } ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

18 Restons simples Trouver des polices : FontSquirrel et son générateur sympathique Le reste, cest du copier-coller ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

19 Arrière-plans multiples Images de fond : body { background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; } La première image de cette liste sera placée par-dessus les autres. Attention donc, l'ordre de déclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS précédent, vous ne verrez plus le soleil ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

20 Le z-index, une solution ? Les éléments avec le z-index le plus petit, seront les plus « visibles ». Pas de position, pas de z-index Le z-index ne nous aidera donc pas ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

21 Opacity, la transparence… la propriété opacity et la notation RGBa. Opacity : Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut. Avec une valeur de 0, l'élément sera totalement transparent. Il faut donc choisir une valeur comprise entre 0 et 1. Par exemple avec 0.6, votre élément sera opaque à 60%... et on verra donc à travers ! ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

22 Tout doit disparaître ! Opacity appliqué à un élément rendra tout le contenu de cet élément transparent. Pour ne modifiez que la transparence du bloc actuel, faites confiance à la notation RGBa. ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

23 RGB…a p { background-color: rgb(0,0, 255); /* Pour les anciens navigateurs */ background-color: rgba(0,0, 255,0.5); /* Pour les navigateurs plus récents */ } ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

24 Et si on arrondissait les angles ? p { border-radius: 10px 5px 10px 5px; } En haut à gauche En haut à droite En bas à droite En bas à gauche ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

25 Des courbes elliptiques Il est également possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques. Il suffit dindiquer 2 valeurs à la suite p { border-radius: 200px 100px; border-top-left-radius: 200px 100px; topleft } ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

26 In the shadow… Les ombres des boîtes Les ombres du texte Générateur dangles ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

27 box-shadow : les ombres des boîtes La propriété box-shadow s'applique à tout le bloc et prend 4 valeurs dans cet ordre : Le décalage vertical de l'ombre Le décalage horizontal de l'ombre L'adoucissement du dégradé La couleur de l'ombre ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

28 Mise à lombre… p { box-shadow: 6px 6px 0px black; } On peut aussi rajouter une quatrième valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé. ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

29 Ombre du texte p { text-shadow: 2px 2px 4px blue; } IE à partir de IE10 ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

30 Rotation, un must transform: rotate(Xdeg) Encore mal géré, obligé dutiliser les préfixes moteurs. ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

31 Trop de DIV tue le DIV ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

32 Résumé duni mise en page - len-tête - le pied-de-page - les principaux liens de navigation - Menu(s) du site - les parties thématiques de la page - les informations complémentaires - Un article provenant d'une autre page ? ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

33 ©Julian Hardenne 3TI Iset Langages Avancés (R. Billen)

34 HTML5shiv Placez ce code dans la balise

Annonces Google