ISCOM::HTML/CSS::session4 (20141105)

  • View
    205

  • Download
    2

Embed Size (px)

DESCRIPTION

ISCOM::HTML/CSS::session4 (20141105)

Transcript

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1

    Cours HTML / CSSLearn to code

    HTML/CSS easily

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Cours HTML / CSS

    6 Sessions de ~3 heures > ~18 heures au total,

    A chaque sessions aura des objectifs atteindre pour pouvoir continuer la prochaine session,

    30% de thorie et 70% de pratique,

    Finalit : Monter un site en HTML / CSS responsive,

    En bonus, utilisation doutil de versioning

    2

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Rappel du projet

    3

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Allons de lavant avec CSS3

    5

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    CSS3 CSS3 est le dernier standard CSS.

    Il est entirement compatible avec CSS2 (On parle de backwards-compatibility),

    Le CSS3 est cependant en cours de validation W3C

    mais beaucoup de navigateurs on dj implment cette nouvelle norme

    il ne faut cependant pas oublier les anciens navigateurs qui ne sont pas compatible.

    Le CSS3, cest du CSS2 avec de nouvelles fonctionnalits.

    6

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 7

    CSS3 CheatSheets

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Les prefixes CSS Certains navigateurs utilisent des prefixes certaines dclarations CSS afin de pouvoir utiliser certaines

    proprits compatible.

    Les prfixes contiennent obligatoirement un - au dbut de leur dfinition, chaque navigateur a son identifiant, puis la dclaration est ralise.

    Les prfixes identifi par navigateur :

    Chrome, Safari, Android, : -webkit-,

    Mozilla Firefox : -moz-,

    Internet Explorer : -ms-,

    Opera : -o-,

    Bien entendu, ces prefixes ne sont pas compatible avec les anciens navigateurs. Il faudra avoir une alternative pour ceux-ci

    8

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Les prefixes CSS

    Exemple dutilisation :

    On

    9

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Les prefixes CSS

    Exemple dutilisation :

    On veut mettre une bordure arrondie (border-radius) de 10px sur un div ayant une classe b-radius-5.

    On dclare ceci dans notre CSS.

    Pourquoi ne pas dclarer Opera et IE ?

    10

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    CSS3 Exercice Exercice simple :

    Vous avez votre site responsive,

    Utilisez les fonctionnalits CSS3 pour animer votre site en CSS,

    Charger une ou plusieurs police(s) google font ( https://www.google.com/fonts ) et appliquez la au menu et au contenu (il faut que celle-ci soit lisible et adapte votre site),

    Le site sera compatible IE9+, Firefox, Safari, Chrome, Opera et mobile.

    11

  • Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

    Des questions ?

    12