PERFORMANCE WEB Par quoi commencer? Photo : Raphaël Goetter
|
|
- Sylvaine Primeau
- il y a 7 ans
- Total affichages :
Transcription
1 PERFORMANCE WEB Par quoi commencer? Photo : Raphaël Goetter
2 RAPHAËL GOETTER Alsacréations #CSS #Standards #HTML #Webdesign #Accessibilité #Responsive #WebPerf
3 ❶ L'INTERNAUTE N'AIME PAS ATTENDRE!
4 ON VEUT DES CHIFFRES! Vous aimez les stats?
5 ON VEUT DES CHIFFRES! Sites e-commerce et attente client 57 % des visiteurs quittent un site e-commerce s'il met plus de 4 secondes à s'afficher PhoCusWright / Akamai (2010)
6 ON VEUT DES CHIFFRES! Sites e-commerce et attente client 26 % des visiteurs quittent un site e-commerce s'il met plus de 2 secondes à s'afficher PhoCusWright / Akamai (2010)
7 ON VEUT DES CHIFFRES! C'est pire sur mobile! 60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile Compuware (2011)
8 ON VEUT DES CHIFFRES! C'est pire sur mobile! 60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile Compuware (2011) Et 74% quittent une page après 5 secondes d'attente Compuware (2011)
9 POURQUOI LA PERFORMANCE WEB? ❷ Photo : CC Flickr - jdwheaton
10 PARCE QUE ÇA RAPPORTE! Photo : CC Flickr - jdwheaton
11 +100ms 1% perte de revenus
12 +100ms +500ms 1% perte de revenus -20% de recherches
13 +100ms +500ms 1% perte de revenus -20% de recherches -2s +15% de chargements
14 +100ms +500ms 1% perte de revenus -20% de recherches -2s -5s +15% de chargements +12% de revenus +25% pageviews
15 MAIS AUSSI (SURTOUT?)... ❶ ❷ En 2010, Google a annoncé officiellement qu'il tenait compte de la rapidité des sites dans son algorithme de positionnement. Google recommande un délai moyen de 1,5 seconde pour l affichage d une page web. Sources : WebRankInfo / 1ere-position.fr / silicon.fr
16 ❸ QU'EST-CE QUI RALENTIT LE WEB?
17 LE TYPE DE CONNEXION EDGE (0,38 Mbit/s) 3G (1,9 Mbit/s) 3G+ (3,6 Mbit/s) H+ (10 Mbit/s) Wi-Fi (25 Mbit/s) ADSL (30 Mbit/s) 4G (40 Mbit/s) Fibre (100 Mbit/s) Source : Wikipedia
18 LE TYPE DE CONNEXION Concrètement... Téléchargement d'un album de musique : 3G 20 minutes 3G+ 1min 15s 4G 10 secondes Source : Orange (bon OK c'est un peu bullshit marketing)
19 LE POIDS DES RESSOURCES 1,2Mo au total en moyenne : Images 700 Ko JavaScript 230 Ko CSS 37 Ko HTML 45 Ko Autres 188 Ko Source : AlexaRank Top 1000 (janvier - août 2013)
20 LE POIDS DES RESSOURCES Source :
21 LE NOMBRE DE REQUÊTES 98 requêtes en moyenne : Images 60 requêtes JavaScript 17 requêtes CSS 3,5 requêtes HTML 10 requêtes Autres 7 requêtes Source : AlexaRank Top 1000 (janvier - août 2013)
22 LE NOMBRE DE REQUÊTES à cause de la latence Latence dépend du serveur, du DNS dépend de la connexion : 20-60ms via ADSL ms en 3G Chargement dépend du poids
23 LES RALENTISSEMENTS DIVERS Scripts bloquants CSS bloquants Redirections HTTP/JavaScript Mauvaises requêtes (404) Reflow, repaint navigateur Etc.
24 ❹ LES OUTILS POUR Photo : Raphaël Goetter TESTER
25 MANUELLEMENT Outil d'audit de Chrome Module d'audit divers (accessibilité, réseau, performances,...) directement intégré au navigateur Chrome : Touche F12 Onglet «Audit» Option «Webpage performance»
26 MANUELLEMENT Extensions : YSlow et PageSpeed YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
27 EN LIGNE La référence : WebPageTest.org Au choix : lieu du serveur, type de connexion, navigateur, etc.
28 EN LIGNE Httparchive.org FilmStrip!
29 EN LIGNE Google PageSpeed Insights
30 EN LIGNE Akamai Mobitest Pour les temps d'affichage sur mobiles
31 ❺ QUELQUES EXEMPLES
32 QUELQUES SITES PASSÉS AU CRIBLE 7s ko chargement requêtes poids 7.1s ko chargement requêtes poids 7.2s ko chargement requêtes poids 7.7s ko chargement requêtes poids
33 QUELQUES SITES PASSÉS AU CRIBLE Suite s ko chargement requêtes poids 6.6s ko chargement requêtes poids
34 ❻ ACCÉLÉREZ VOS PAGES WEB Photo : Raphaël Goetter
35 BONNES PRATIQUES GÉNÉRALES Pas de redirections de pages ❶ Scripts placés avant </body> et/ou attributs async / defer pour les fichiers CSS Hébergez les ressources sur plusieurs domaines (entre 2 et 4) Déclarez les dimensions des images dans le HTML (width="", height="") Évitez les mauvaises requêtes (404)
36 EN DÉTAIL «Hébergez les ressources sur plusieurs domaines» ❶ Hébergez les ressources (images, médias) sur plusieurs domaines différents. Cette technique favorise leur téléchargement en parallèle. Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies est encore plus performant. Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2 Source : Yahoo!UI blog
37 RÉDUIRE LE POIDS DES RESSOURCES Minifiez les fichiers CSS Minifiez les fichiers JS Compressez les images Choississez le bon format d'image (.png,.gif,.jpg) Optez pour des fontes légères (.woff est généralement plus léger) ❷
38 EN DÉTAIL «Compressez les images» ❷
39 RÉDUIRE LES REQUÊTES Réunissez les feuilles de styles CSS en une seule si possible Réduisez / réunifiez le nombre de fichiers JavaScript externes si possible N'utilisez pas (ou presque pas) d'images! Sprites CSS, Data-URI, Caractères unicodes, Font Icons,... ❸
40 EN DÉTAIL «Font Icons» icomoon.io.icon {font-family: "MyFontIcon", sans-serif;}.icon-twitter:before {content: "t";} ❸
41 NE CHARGER QUE LE NÉCESSAIRE Chargez les scripts externes en Asynchrone et/ou Différé ❹ N'utilisez pas display : none pour masquer un élément jquery est parfois inutile et remplaçable par jquip ou Zepto.js, plus légers Triez les scripts nécessaires et les scripts de confort JavaScript est parfois avantageusement remplaçable par CSS3 : bordures, arrondis, ombrages, animations, formes simples (triangles, ronds, carrés) Pensez à faire du chargement conditionnel de ressources (selon taille d'écran, pixel-ratio,...)
42 EN DÉTAIL «Charger conditionnellement les éléments» (min-width : 768px) {.deco {background: url(concombre-big.jpg);} (max-width : 767px) {.deco {background: url(concombre-small.jpg);} } pg.j ll a m s e r b m o c con g p j. g i b e r b m conco
43 CÔTÉ SERVEUR Compressez les fichiers texte côté serveur (HTML, CSS, JS) Générez certaines pages «à l'avance» (ex. flux RSS) Gérez les durées de cache des éléments ❺
44 EN DÉTAIL «Durée d'expiration du cache» <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/plain "access plus 1 day" ExpiresByType text/html "access plus 1 hour" ExpiresByType application/x-javascript "access plus 3 months" ExpiresByType application/javascript "access plus 3 months" ExpiresByType text/css "access plus 3 months" ExpiresByType image/gif "access plus 3 months" ExpiresByType image/x-icon "access plus 3 months" ExpiresByType image/png "access plus 3 months" ExpiresByType image/jpeg "access plus 3 months" ExpiresByType application/xml "access plus 1 hour" # ExpiresDefault "access plus 1 day" </IfModule> Outil Google : Google ModPagespeed ❺
45 MERCI, BISOUS Crédits Polices : League Gothic + Segoe UI Light Photos : Fotolia + mon super APN Pictos : IconFinder (Visual Pharm, Designmodo) Raphaël Goetter
Optimiser 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étailResponsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
Plus en détailUN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
Plus en détailPerformance Front-End
Performance Front-End SEO Camp us 2012 Thomas SOUDAZ Consultant Webperformance & SEO Fondateur de la société Refficience @tsoudaz #seocampus Refficience.com Google a dit Chez Google nous sommes obsédés
Plus en détailTravaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
Plus en détailPROGRAMME DE LA 1ERE JOURNEE DE FORMATION : QUALITE WEB ET REFERENCEMENT NATUREL
DEVELOPPEMENT LOGICIEL QUALITE WEB LES BONNES PRATIQUES FRONT-END REF : WEER001 DUREE : 3 JOURS TARIF : 1 625 HT Public Chef de projet, webmestre, intégrateur, développeur, et toute personne liée au développement
Plus en détailJean-Pierre VINCENT Consultant indépendant
Techniques d accélération des pages Web Jean-Pierre VINCENT Consultant indépendant @theystolemynick Braincracking.org Bonjour, je m appelle Jean-Pierre 13 ans de Web PHP, JavaScript, HTML5, CSS Ex : startups,
Plus en détailOptimisation de son site web. v1 23/05/2014
Optimisation de son site web v1 23/05/2014 Qui sommes-nous? Christophe Avonture (cavo789), développeur d aesecure, logiciel de sécurité et d optimisation de sites web Apache et de l extension AllEvents;
Plus en détailQualité web : les bonnes pratiques front-end
L institut de formation continue des professionnels du Web Qualité web : les bonnes pratiques front-end Référence formation : Durée : Prix conseillé : PE081 3 jours (21 heures) 2 100 HT (hors promotion
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étail"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"
"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS" BONNES FEUILLES OFFERTES PAR MA-EDITIONS : "OPTIMISER" - pages à 1 OPTIMISER Partir d'un modèle existant très bien... Mais c'est encore mieux quand on
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étailPerformance web. Mesurer. Analyser. Optimiser. Benjamin Lampérier - Benoît Goyheneche. RMLL 2015 - Beauvais. 8 Juillet 2015
Benjamin Lampérier - Benoît Goyheneche RMLL 2015 - Beauvais 8 Juillet 2015 1 2 3 État des lieux On ne change rien On optimise intelligemment Avant de commencer Mettre les chaines de caractères entre simple
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étailMozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0
Mozilla Firefox 3.5 Google Chrome 3.0 LES NAVIGATEURS WEB (pour Windows) Opéra 10 Internet Explorer 8 Safari 4.0 1 1 Sommaire Qu est ce qu un navigateur Web? Fonctionnement Caractéristiques communes Caractéristiques
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étailRESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels
Plus en détailResponsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Plus en détailDans ce mémento, vous trouverez les informations détaillées pour configurer les fonctionnalités du Responsive Design dans le Worldsoft CMS:
1 La taille et la résolution de l'écran des ordinateurs portables, des ordinateurs de bureau, des tablettes et des smartphones peuvent considérablement varier. C'est pour cette raison, que les sites Web
Plus en détailWordPress, thèmes et plugins : mode d'emploi
WordPress, thèmes et plugins : mode d'emploi Sommaire 01 Faisons connaissance 1.1 Qui suis-je? 1.2 WordPress en 2 mots 1.3 Thème et plugin 02 Si je veux 03 Quelques extensions utiles 04 Comment chercher
Plus en détailSpétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014
Spétechs Mobile D e r n i è r e m i s e à j o u r : a o û t 2014 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail votre contact
Plus en détailWebmaster / Webdesigner / Wordpress
Webmaster / Webdesigner / Wordpress Pré-requis : Projet professionnel. Bonne maîtrise de l'ordinateur. Bases en infographie et / ou traitement de texte fortement recommandées. Objectifs : Concevoir un
Plus en détaildmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7
dmp.gouv.fr Pour en savoir plus DMP Info Service : 24h/24 7j/7 Sommaire 1 Configuration requise pour accéder au DMP... 3 2 Procédure de vérification sous Internet Explorer... 4 2.1 Vérification de la compatibilité
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étailHTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles
46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes
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étailSpétechs Mobile. Octobre 2013
Spétechs Mobile Octobre 2013 Appli ios Appli Android Site Mobile Les clicks URL Appli ios Créa en dur HTML5 Créa en dur Banner Interstitiel Interstitiel Vidéo Bouncing / traveling Image Bouncing / traveling
Plus en détailResponsive Web design, périphériques mobiles et accessibilité
Responsive Web design, périphériques mobiles et accessibilité Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation
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é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é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étailWEB design. Pierre Chassany Comstone.ch vocables.com
WEB design Pierre Chassany Comstone.ch vocables.com graphisme Méthodologie(s) «Nomadisme» Responsive web design Techno tendances design 2 graphisme La direction artistique pour le web n est pas une démarche
Plus en détailGuide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Plus en détail{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Plus en détailAvanquest Software présente la nouvelle gamme WebEasy 8
La Garenne Colombes, le 22 Juin 2009 Avanquest Software présente la nouvelle gamme WebEasy 8 Des logiciels pour créer simplement des sites internet de qualité professionnelle sans aucune connaissance en
Plus en détailE-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
Plus en détailCaruso33 : une association à votre service
Caruso33 : une association à votre service Le b-a ba sur le réseau Internet Comment vous trouver facilement sur Internet Pourquoi un portail des associations? Les modalités pour figurer sur le portail
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étailCréation d articles sur le site web du GSP
Création d articles sur le site web du GSP Mode d emploi pour les membres du groupe spéléo Porrentruy. www.speleoporrentruy.ch 1 Article avec photo et document pdf sur le site du groupe spéléo Porrentruy
Plus en détailFormation Webmaster : Création de site Web Initiation + Approfondissement
Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation
Plus en détailIntroduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Plus en détailINTRODUCTION AU CMS MODX
INTRODUCTION AU CMS MODX Introduction 1. Créer 2. Organiser 3. Personnaliser UNE PETITE INTRODUCTION QUEST-CE QU UN CMS? CMS est l acronyme de Content Management System. C est outil qui vous permet de
Plus en détailRESUME DE CARRIERE. Alice JULIENNE. 23 ans Nationalité Française Développeur Web Front-End. Compétences
RESUME DE CARRIERE Alice JULIENNE 23 ans Nationalité Française Développeur Web Front-End Compétences Systèmes Langages Windows (XP, 98) Macintosh OS X HTML, XHTML, CSS, XML, PHP, SQL, Javascript, J-Querry
Plus en détailGUIDE D UTILISATION DU BACKOFFICE
GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la
Plus en détailSOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
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étailGrille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
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é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étailOptimisation Web. Extra N 1 29.01.15
Optimisation Web Extra N 1 29.01.15 Extravaganza Communication digitale? Les Extras L optimisation web Optimisation technique Qu est-ce que c est? Optimiser les temps de chargement et d affichage des pages
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étailComment débloquer les fenêtres publicitaires (popup) de votre navigateur Internet
Comment débloquer les fenêtres publicitaires (popup) de votre navigateur Internet? Astuce : Pour connaître la version et le nom du navigateur Internet que vous utilisez, rendez-vous dans le menu «?» ou
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étailSARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé
SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site
Plus en détailCahier des charges pour la création du site http://jrmasters.univ-toulouse.fr sous DRUPAL
Document à diffusion restreinte Date : janvier 2010, MAJ février 2010 Rédacteurs : CAPLAN Emmanuelle, RAFENOMANJATO Jean Service Communication et Département Formation et Vie Étudiante Établissement :
Plus en détailSUPPRIMER SES COOKIES
SUPPRIMER SES COOKIES 1. PREAMBULE 2 2. SOUS FIREFOX 3 3. SOUS GOOGLE CHROME 4 4. SOUS SAFARI 5 5. SOUS INTERNET EXPLORER 9 6 6. SOUS INTERNET EXPLORER 8 7 7. SOUS OPERA 8 7.1 POUR EFFACER LES COOKIES...
Plus en détailS7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i
Modernisation IBM i Nouveautés 2014-2015 IBM Power Systems - IBM i 19 et 20 mai 2015 IBM Client Center, Bois-Colombes S7 Le top 10 des raisons d utiliser PHP pour moderniser votre existant IBM i Mardi
Plus en détailSyfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 20/06/2007. AUTEUR : Equipe technique Syfadis
Syfadis Nous vous aidons à réussir > Configuration du poste client REFERENCE : Syfadis LMS - 20/06/2007 AUTEUR : Equipe technique Syfadis Ce document est la propriété de Syfadis. Il ne peut être communiqué
Plus en détailLes Content Delivery Network (CDN)
Les Content Delivery Network (CDN) Paris Californie : + 45 ms Paris Sidney : + 85 ms Amazon : 100 ms de temps de chargement supplémentaires 1% de ventes en moins Poids moyen des pages d'accueil : 2000
Plus en détailMAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...
Plus en détailIntroduction à HTML5, CSS3 et au responsive web design
1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent
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é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étailRapport de Stage Christopher Chedeau 2 au 26 Juin 2009
Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009 «Web. De l intégration de pages statiques HTML à un CMS, à la dynamisation d un site grâce au Javascript et l utilisation de nouvelles technologies
Plus en détailResponsive Web Design. Responsive Design avec HTML 5.0 et CSS3
Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction
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étail1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Plus en détailMay Lopez PETIT COUTEAU SUISSE CRÉATIF. May Lopez Petit couteau suisse créatif
May Lopez PETIT COUTEAU SUISSE CRÉATIF Bonjour! Voici un guide des prestations, les plus courantes, que nous pouvons vous proposer. Bien sûr, la liste n est pas exhaustive et nous nous adapterons avant
Plus en détailCelui qui vous parle. Yann Vigara
Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans
Plus en détailFormation Créateur de site web e-commerce Certifiant
Formation Créateur de site web e-commerce Certifiant La formation «Créateur de site web et e-commerce» vous permet sur une période courte, en stage intensif, de vous initier aux fondamentaux de la communication
Plus en détailFormation tableur niveau 1 (Excel 2013)
Formation tableur niveau 1 (Excel 2013) L objectif général de cette formation est de repérer les différents éléments de la fenêtre Excel, de réaliser et de mettre en forme un tableau simple en utilisant
Plus en détailSupport de formation «veille informationnelle» IED Dakar, 18-20 mars 2014
24/05/2014 Support de formation «veille informationnelle» IED Dakar, 18-20 mars 2014 Un projet du 20 ème appel à projets du Fonds francophone des Inforoutes Eric Bernard http://mesodev.net eric@mesodev.net
Plus en détailGuide pour optimiser votre profil. et votre page entreprise
Guide pour optimiser votre profil et votre page entreprise Votre profil / page Google+ = votre carte de visite 2 Faites une première bonne impression En laissant votre souris sur la vignette de profil
Plus en détailLenovo TAB A7-40/ Lenovo TAB A7-50
Lenovo TAB A7-40/ Lenovo TAB A7-50 Guide de l utilisateur v. 1.0 Lisez attentivement les consignes de sécurité et les remarques importantes figurant dans le manuel fourni avant d utiliser votre tablette.
Plus en détailHTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
Plus en détailMedia queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Plus en détailSpétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4
Spétechs Mobile D e r n i è r e m i s e à j o u r : s e p t e m b r e 2 0 1 4 Généralités Envoi des créas à Amandine Canu, responsable traffic mobile : acanu@hi-media.com Mettre en copie de votre e-mail
Plus en détailT-Shirt Homme Anthracite +
() LA FABRIQUE DE VOS IDÉES (/) ESPACE FABLAB PRO COMPTE PA NIER (/CONTACTEZ- (HTTP://MYDESIGN.COM/ NOUS? COMPTE) DECO MUGS ETUIS & MODE / PAPETERIE THEMES BRODERIE ÉVÉNEMENTS / TABLEAUX & COQUES TEXTILES
Plus en détailSPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES
SPECIFICITES TECHNIQUES DES FORMATS PUBLICITAIRES Contact Traffic : Audrey Pluot-Etourneau apluot@staff.aufeminin.com LES FORMATS CLASSIQUES Nom du Format Dimension du Format Poids Max Fichiers Acceptés
Plus en détailSyfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 12/09/2008. AUTEUR : Equipe technique Syfadis
Syfadis Nous vous aidons à réussir > Configuration du poste client REFERENCE : Syfadis LMS - 12/09/2008 AUTEUR : Equipe technique Syfadis Ce document est la propriété de Syfadis. Il ne peut être communiqué
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é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étailLe serveur web Windows Home Server 2011
Chapitre 16 Le serveur web Windows Home Server 2011 Windows Home Server 2011, directement dérivé de Windows Server 2008 R2, utilise la même technologie Internet Information Services IIS pour la mise en
Plus en détailPacks Graphiques. Comparez nos offres! Chrome Silver Gold Platinum. 04 86 26 26 26 Appel non surtaxé. Comment choisir votre pack? Design.
Packs Graphiques Comparez nos offres! Chrome Silver Gold Platinum Design - Design général du site - Boutons dans l en-tête - Champ recherche dans l en-tête - Blocks marketing stylisés - Optimisation de
Plus en détail3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures
3W Academy Programme de Formation Développeur Intégrateur web Total : 400 heures Objectif global : A l issue de la formation, les stagiaires doivent être opérationnels dans la création d un site internet
Plus en détailTIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES Page 1/5 ATELIER INTEGRATION A mi-parcours de votre formation, l'atelier (dont la note est coefficient 2) permet d'évaluer vos connaissances acquises lors
Plus en détailWebsite Express Créer un site professionnel avec Orange
Website Express Créer un site professionnel avec Orange mars 2015 Safiétou Ndao Ndiaye Sommaire Présentation... 3 Description du service... 3 Configuration requise... 4 Consignes... 4 Pour bien démarrer...
Plus en détailQuestionnaire GTA - Analyse des re ponses
Questionnaire GTA - Analyse des re ponses Novembre 2012 Table des matières Taux de réponse au questionnaire... 2 Actualité de l expertise : AccessiWeb 1 versus 2... 2 Profil métier... 3 Compétences...
Plus en détailRéglages du portail de P&WC
Réglages du portail de P&WC Afin de régler votre navigateur Internet Explorer et de résoudre quelques problèmes spécifiques que les utilisateurs du portail de P&WC pourraient éprouver, nous vous recommandons
Plus en détailPréconisations Portail clients SIGMA
Préconisations Portail clients SIGMA Client Web Version Minimum : Pentium 4 et 512 Mo de Ram Version Préconisée : Core 2 Duo 2 GHz et 1 Go de Ram Internet Explorer (7, 8 ou 9), Firefox Résolution minimum
Plus en détailComment faire pour créer ses propres pages html?
. Comment faire pour créer ses propres pages html? Insérer une vidéo Pour ajouter une vidéo de votre choix, il vous faut insérer, dans un premier temps, un tableau dans lequel vous placerez un mot, par
Plus en détailPoint sur les solutions de développement d apps pour les périphériques mobiles
Point sur les solutions de développement d apps pour les périphériques mobiles Par Hugues MEUNIER 1. INTRODUCTION a. Une notion importante : le responsive web design Nous sommes en train de vivre une nouvelle
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étailCréer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles
Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles
Plus en détailJOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
Plus en détail