Les bases et meilleures pratiques du web

Présentation faite en préliminaire au Hyblab Datasport 2015

Transcript

1. Les bases et meilleures pratiques du Web Le Web, ça marche comment ?
2. Un petit tour sur google Pour commencer...
3. http://google.fr/
4. Et maintenant... On se souvient du Pokéjax
5. Bulb localhost:9000/api/pokemons/q=”Bulb”/
6. Ça sert à quoi ? Html, CSS, JS, JSON... Et on s’en sert comment ?
8. Représente la structure de la page Composé de balises Restez sémantiques ! <div>...</div> <p>...</p> <ul> <li>...</li> <li>...</li> </ul> <a href=”http://google.fr”>Google</a> <img src=”../images/monimage.png”/> <p class=”classe” id=”paragraphe”>...</p> <a href=”#paragraphe”>Une ancre</a>
9. L’arbre DOM
11. Décrit la présentation d’un fichier HTML Couples nom/valeur Attention aux priorités ! /* Balises */ body {background-color : blue;} /* Classes */ .classe {background-color : blue;} /* ID */ #id {background-color : blue;} /** Et on combine **/ .toto.titi {} .toto .titi {} div > .toto {} div : .toto {} /** Quelques propriétés **/ a:active, a:hover {} input[type="submit"] {}
12. Quelques bonnes pratiques Styles -> Fichiers CSS // Nom de classe sémantique .menu {} .menu-item{} .menu-item-title{} // Créez des classes “helper” .blue {color : blue;} .text { font-family: Arial, sans-serif; font-size: 12px; color: #ccc; } Commentez, organisez !
13. Les frameworks CSS
15. Beaucoup à se souvenir... Comment travailler efficacement ?
16. Une base de documentation Et des sources d’inspiration /r/webdev /r/devops/ /r/web_design