UNIX ET PROGRAMMATION WEB Cours 5
|
|
|
- Marin Dubois
- il y a 7 ans
- Total affichages :
Transcription
1 Plan UNIX ET PROGRAMMATION WEB Cours 5 kn@lri.fr 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes 5.3 Autres propriétés 5.4 Sélectionneurs et application en cascade 5.5 requête media type Cascading Style Sheets (CSS) CSS : Langage permettant de décrire le style graphique d'une page HTML On peut appliquer un style CSS À un élément en utilisant l'attribut style À une page en utilisant l'élément <style>...</style> dans l'en tête du document (dans la balise <head>...</head>). À un ensemble de pages en référençant un fichier de style dans chacune des pages L'attribut style <a href=" style="color:red">un lien</a> Apperçu: Un lien Inconvénients : il faut copier l'attribut style pour tous les liens de la page modification de tous les éléments difficiles 2/38 3/38 4/38
2 L'élément style <html> <head> <title> </title> <style> a { color: red; </style> </head> <body> <a href=" ">Lien 1</a> <a href=" ">Lien 2</a> </body> </html> Apperçu : Lien 1 Lien 2 Inconvénient : local à une page Fichier.css séparé Fichier style.css: a { color: red; Fichier test.html: <html> <head> <link href="style.css" type="text/css" rel="stylesheet" /> </head> </html> Modifications & déploiement aisés Syntaxe 5/38 Plan 6/38 Une propriété CSS est définie en utilisant la syntaxe: nom_prop : val_prop ; Si on utilise l'attribut style d'un élément: <a href=" " style="color:red;border-style:solid;border:1pt;">lien 1</a> Si on utilise un fichier.css ou une feuille de style: a { color : red; border-style: solid; border: 1pt; h1 { /* Le style des titres de niveau 1 */ text-decoration: underline; color: green; 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes 5.3 Autres propriétés 5.4 Sélectionneurs et application en cascade 5.5 requête media type 7/38 8/38
3 Unités de longueur Boîte CSS permet de spécifier des longueurs comme valeurs de certaines propriétés (position et taille des éléments, épaisseur des bordures, ). Les longueurs doivent comporter une unité. Les unités reconnues sont: px : pixel in : pouce (2,54cm) cm : centimètre mm : millimètre pt : point (1/72ème de pouce, 0,35mm) pc : pica (12 points) em : facteur de la largeur d'un caractère de la police courante ex : facteur de la hauteur d'un caractère «x» de la police courante % : pourcentage d'une valeur particulière (définie par propriété) vh : viewport height (% de la hauteur de la partie visible de la page) CSS3 vw : viewport width (% de la largeur de la partie visible de la page) CSS3 vmin : plus petite valeur entre vw et vh CSS3 vmax : plus grande valeur entre vw et vh CSS3 Chaque élément de la page HTML possède une boîte rectangulaire qui délimite le contenu de l'élément: margin border padding Lien 1 La zone entre le contenu et la bordure s'appelle le padding («remplissage»). La zone autour de la bordure s'appelle margin ( «marge»). Marge, bordure, ajustement 9/38 Calcul de la taille d'une boîte CSS3 10/38 On peut spécifier jusqu'à 4 valeurs: 1 valeur: toutes les dimensions égales à cette valeur 2 valeurs: haut et bas égal à la première valeur, gauche et droite égale à la deuxième 3 valeurs: haut à la première valeur, gauche et droite égale à la deuxième, bas égal à la troisième 4 valeurs: haut, droit, bas, gauche span { padding:10pt 20pt 5pt 0pt; margin:10pt 5pt; border-width:3pt; border-color:red blue green; border-style:solid dotted; Du texte dans une boite L'attribut CSS box-sizing permet de spécifier le mode de calcul de la taille d'une boîte. Deux valeurs sont possible : content-box : (valeur par défaut) signifie que la taille d'une boîte (telle que donnée par width ou height) est uniquement celle de son contenu. border-box : signifie que la taille d'une boîte (telle que donnée par width ou height) est uniquement celle de son contenu, de l'ajustement et des bordures. la marge n'est jamais prise en compte dans le calcul de la taille. Exemple : border: 2px; padding: 10px; width: 100px; box-sizing: content-box; contenu 100px (total 124px) ABCDEFGHIJKLMNOPQRSTUVWXY box-sizing: border-box; contenu 76px (total 100px) ABCDEFGHIJKLMNOPQRSTUVWXY 11/38 12/38
4 Modes d'affichage La propriété display contrôle le mode d'affichage d'un élément: none : l'élément n'est pas dessiné et n'occupe pas d'espace inline : l'élément est placé sur la ligne courante, dans le flot de texte. La taille du contenu (avec les marges, ajustements et bordures) dicte la taille de la boîte, height et width sont ignorés (<i>, <b>, <span>, <em>, sont inline par défaut). block : l'élément est placé seul sur sa ligne. La taille est calculée automatiquement mais peut être modifiée par width et height (<div>, <h1>, <p>, sont block par défaut) inline block : positionné comme inline mais la taille peut être modifiée comme pour block Modes d'affichage (exemples) Le lien 1, le lien 2 et le lien 3. Le, le et le. Le lien 1, le lien 2 et le lien 3. a { display: inline; a { display: none; a { display: block; a { display: inline-block; width: 4em; height: 2em; Le lien 1, le lien 2 et le lien 3. 13/38 14/38 Positionnement Positionnement (exemple) Le type de positionnement est donné par la propriété position static : positionnement «automatique» fixed : positionnement par rapport à la fenêtre du navigateur (la boîte est supprimée du flot) relative : positionnement «relatif» par rapport à la position normale absolute : positionnement «absolu» par rapport à l'ancêtre le plus proche qui n'est pas static a { position: static; a { position: fixed; right:10pt; top: 10pt; a { position: relative; left: 10pt; bottom: -5pt; a { position:absolute; right:0pt; bottom: 10pt; fixed (right:10pt,top:10pt) Pour fixed, relative et absolute, les propriétés top, bottom, left et right dénotent les décalages respectifs. <ul style="position:relative;"><li> </li> </ul> Positionnement static Positionnement Positionnement Positionnement relative (left:10pt,bottom: 5pt) absolute (right:10pt,bottom:10pt) 15/38 16/38
5
6 Propriétés de la police font family : liste de nom de polices séparées par des virgules (Helvetica, sans, "Times New Roman") font style : normal, italic font weight : normal, lighter, bold, bolder font size : soit une longueur soit xx-small, x-small, small, medium, large, x- large, xx-large On peut aussi spécifier un descripteur de police { font-family: Toto; src: url(toto.ttf); a { font-family: Toto; Plan 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes 5.3 Autres propriétés 5.4 Sélectionneurs et application en cascade 5.5 requête media type Sélectionneurs 21/38 Attributs id et class 22/38 On peut sélectionner finement les éléments auxquels un style s'applique : * : tous les éléments x : tous les éléments dont la balise est x.foo : tous les éléments dont l'attribut class contient foo x.foo : (sans espace) tous les éléments dont l'attribut class contient foo et dont la balise est x #foo : l'élément dont l'attribut id vaut foo (les id doivent être uniques) X Y : tous les éléments selectionnés par Y qui sont des descendants des éléments sélectionnés par X X, Y : tous les éléments selectionnés par X ou par Y X > Y : tous les éléments dont selectionné par Y qui sont des fils d'éléments sélectionnés par X a:visited : les liens déjà visités a:link : les liens non visités X:hover : élément selectionné par X et survollé par la souris La spécification CSS3 en définit beaucoup d'autres 23/38 On veut souvent pouvoir appliquer un style à un unique élément d'une page, ou a un groupe d'éléments bien défini. On utilise pour celà l'attribut id de l'élément ou l'attribut class commun à plusieurs éléments: Fichier CSS: #toto123 { background:red;.bluetext { color: blue;.border { border: 1pt solid green; Fichier HTML <html> <head>... </head> <body> <div class="bluetext"> AAA </div> <div id="toto123" class="border"> BBB </div> <div class="border bluetext"> CCC </div> </body> </html> L'élément d'id toto123 a un fond rouge. Les éléments de classe bluetext sont bleus Les éléments de classe border une bordure verte Attention, le nom d'une classe ou d un identifiant doit commencer par une lettre. AAA BBB CCC 24/38
7 Composition de sélectionneurs Cascade? (priorités) Les sélectionneurs CSS peuvent être composés afin de créer des chemins de sélection : div li a { /* tous les a descendants d'un li descendants d'un div */ #id100 > p.foo { /* tous les éléments de class foo se trouvant à n'importe quelle profondeur sous un p lui-même étant un sous-élément direct de l'élément d'id id100 */ p.bar { /* toutes les balises p qui ont la classe bar */ p.bar { /* toutes la balises ayant la classe bar placées sous une balise p (attention à l'espace!) */ Que se passe t il quand un éléments est sélectionnés par plusieurs sélectionneurs? Les propriétés présentent exclusivement dans l'un ou l'autre sont appliquées Pour les propriétés présentes dans plusieurs sélectionneurs (ex: color:blue; et color:red;) : 1. Les propriétés des attributs style ont une priorité plus forte que celles de l'élément <style > de l'en tête, qui a lui même une priorité plus forte que les feuilles de styles.css référencées. 2. On prend ensuite pour chaque règle le triplet : (nombre d'id (#foo), nombre de classes (.bar), nombre de balises) On sélectionne les règles ayant la plus forte valeur, comparé composantes par composantes (ordre lexicographique). S'il reste plusieurs règles possibles, on prend la dernière déclaration dans l'ordre du fichier. a, li * /* tous les a ou tous les éléments placés sous un li */ Exemple de sélectionneurs ambigus 25/38 exemple de pseudo classes: menu dépliable 26/38 * { color: blue; /* score (0, 0, 0) */ #id101 li b { color: red; /* score (1, 0, 2) */.class ol li b { color: pink; /* score (0, 1, 3) */ #id101 ol * b { color: green; /* score (1, 0, 2) */ Le score le plus élevé est (1, 0, 2). Il y a deux sélectionneurs qui ont ce score, on choisit le dernier dans l'ordre du fichier donc le texte des éléments sélectionnés sera vert. <ul class="menu"> <li>entrée 1 <ul class="sous-menu"> <li>sous-entrée 1.1 </li> <li>sous-entrée 1.2 </li> <li>sous-entrée 1.3 </li> </ul> </li> <li>entrée 2 <ul class="sous-menu"> <li>sous-entrée 2.1 </li> <li>sous-entrée 2.2 </li> <li>sous-entrée 2.3 </li> </ul> </li> </ul> 27/38 28/38
8 Analyse exemple : menu dépliable (démo) Pour que le ménu soit «dépliable» lors du survol de la souris, on souhaite que : Par défaut, les éléments de sous menu soient cachés (display : none) Les éléments se trouvant sous un élément survolé (hover) soient visibles (display : block) Entrée 1 Entrée 2 Style CSS du menu 29/38 Valeurs symboliques de propriétés 30/38 li { padding: 10pt 0pt 10pt 0pt; display:block; background:orange; color:blue;.sous-menu { display : none; ul.menu > li:hover ul.sous-menu { display: block; ul.menu > li:hover ul.sous-menu > li { background:blue; color:orange; 31/38 Pour n'importe quelle propriété (color, height, ) on peut donner des valeurs symboliques : inherit : initial : unset : utilise la même valeur que celle de l'élément parent utilise le style par défaut annule le style spécifique et utilise inherit Fichier CSS: div { background: red; span { background: blue; div span { background: unset; Fichier HTML <html> <head>... </head> <body> <div > AAA </div> <span> BBB </span> <div> <span> CCC </span></div> </body> </html> Tous les divs sont en rouge Tous les spans sont en bleu Les spans sous un div n'ont pas le style par des span, donc sont en rouge AAA BBB CCC 32/38
9 Propriété transform CSS3 Animations CSS3 On peut appliquer une transformation géométrique à un élément avec la propriété transform. On peut utiliser une liste des valeurs suivantes : rotate (angle) : applique une rotation. angle peut être donné en degrés (45deg), en radians (3.14rad) ou en tours (0.1turn) scale(fx, fy) : passe à l'échelle la largeur d'un facteur fx et la hauteur d'un facteur fy. skew(anglex, angley) : déforme la boite selon un angle horizontal (anglex) et vertical (angley) Il existe aussi une notion de transformation 3D plus complexe (application d'une matrice de transformation). Attention, les transformations s'appliquent à toute la boite (bordure comprise). font size: 200% transform:scale(2,2) On peut demander à CSS d'animer les changements de propriétés au moment de l'application d'un style, grâce à la propriété transition : transition: prop 1 duree 1 fun 1 del 1,, prop n duree n fun n del n prop : duree : fun : del : un nom de propriété (height, background-color, ) une durée d'animation en secondes une fonction d'animation parmis linear, ease, un délais de démarrage en secondes Attention, on ne peut animer que si les propriétés de départ et d'arriver ont des valeurs numériques (i.e. pas de inherit, unset, auto, ). Animations (démo) 33/38 z-index 34/38 On dispose à chaque fois d'un carré avec une bordure noire et un font bleu clair, d'une largeur et hauteur de 10vmin. On anime à chaque fois une grandeur dans :hover..box { width:10vmin; height:10vmin; background-color: #ddf; border: solid 0.1vmin black; #b1:hover { width:20vmin; transition: width 1s linear; Il arrive que certaines boites se recouvrent : Du texte recouvert On peut utiliser la propriété z-index pour définir l'ordre d'empilement (plus elle est élevée, plus la boite est en avant plan). Le z index par défaut vaut zéro, on a donné la propriété z-index:2; à la boîte contenant du texte : Du texte recouvert 35/38 36/38
10 Plan Différents styles pour différents affichages 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 5.1 Introduction 5.2 Boîtes 5.3 Autres propriétés 5.4 Sélectionneurs et application en cascade 5.5 requête media type On peut charger un style CSS de manière conditionnelle grace à l'attribut media de la balise link. La valeur de l'attribut est une formule logique où l'on peut tester le type de support d'affichage ainsi que ces caractéristiques physiques : <link rel="stylesheet" type="text/css" href="style1.css" media="all" /> <link rel="stylesheet" type="text/css" href="style2.css" media="print" /> <link rel="stylesheet" type="text/css" href="style3.css" media="screen and landscape" /> <link rel="stylesheet" type="text/css" href="style4.css" media="screen and min-width:480px" /> <link rel="stylesheet" type="text/css" href="style5.css" media="screen and max-width:479px" /> Cela permet d'appliquer des styles spécifiques lors de l'impression d'une page ou pour des terminaux mobiles (ayant une petite taille d'écran) ou de changer de style si l'orientation de l'écran est modifiée. 37/38 38/38
.. 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
Formation 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
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
RESPONSIVE 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
LES 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
HTML, 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
Travaux 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
1. 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
JOOMLA 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
UN 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
Pour 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
KompoZer. 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
Pré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...
Dans 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
Responsive 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
Inté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
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
RESPONSIVE 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
Guide 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
{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
Introduction à 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
Optimiser 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...
CRÉ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
E-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
Normes 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
STID 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
HMTL. 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,
Responsive 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
Parcours FOAD Formation EXCEL 2010
Parcours FOAD Formation EXCEL 2010 PLATE-FORME E-LEARNING DELTA ANNEE SCOLAIRE 2013/2014 Pôle national de compétences FOAD Formation Ouverte et A Distance https://foad.orion.education.fr Livret de formation
TP 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
Guide d'utilisation. OpenOffice Calc. AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons
Guide d'utilisation OpenOffice Calc AUTEUR INITIAL : VINCENT MEUNIER Publié sous licence Creative Commons 1 Table des matières Fiche 1 : Présentation de l'interface...3 Fiche 2 : Créer un nouveau classeur...4
TP 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,
Spé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
SOUTENANCE 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
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R. Guide d utilisation E-commerce / Prestashop
2 S I M 1 P H O N E G U I D E U T I L I S A T E U R Guide d utilisation E-commerce / Prestashop 1 2 S I M 1 P H O N E S O M M A I R E 1. Noms d utilisateurs et mots de passe..... Page 3 Adresse mail Prestashop
Media 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
Responsive 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,
HTML5 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
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
Initiation à 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
AGASC / BUREAU INFORMATION JEUNESSE 06700 Saint Laurent du Var Tel : 04.93.07.00.66 bij@agasc.fr www.agasc.fr. Word: Les tableaux.
Word: Les tableaux Introduction 6 ième partie Il est préférable par moments de présenter de l'information sous forme de tableau. Les instructions qui suivent démontrent comment créer un tableau et comment
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
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
RAPPORT 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
Pack 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é
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE. Microsoft. Excel XP
IFP Birkhadem Alger Rue des trois frères Djillali 1 REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE MINISTERE DE LA FORMATION PROFESSIONNELLE INSTITUT DE LA FORMATION PROFESSIONNELLE DE BIRKHADEM Initiation
Note de cours. Introduction à Excel 2007
Note de cours Introduction à Excel 2007 par Armande Pinette Cégep du Vieux Montréal Excel 2007 Page: 2 de 47 Table des matières Comment aller chercher un document sur CVMVirtuel?... 8 Souris... 8 Clavier
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
GUIDE 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
Introduction : Cadkey
Introduction Cadkey Cadkey est un logiciel de dessin assisté par ordinateur. La fenêtre du logiciel devrait ressembler à quelque chose comme suit: Le menu supérieur: Redraw Autoscale Efface Modifier les
MAILING 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...
Formation 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
Comment insérer une image de fond?
COMMUNICATION VISUELLE Mise en page à l aide d un traitement de texte Comment insérer une image de fond? Image Plein papier ou au Format utile qu est-ce que cela veut dire? La mise en page d un document
Grille 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
Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014
Identification du contenu des évaluations Septembre 2014 Tous droits réservés : Université de Montréal Direction des ressources humaines Table des matières Excel Base version 2010... 1 Excel intermédiaire
Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs
Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :
Les 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
Utilisation de l'outil «Open Office TEXTE»
PRESENTATION / FORMATION Utilisation de l'outil «Open Office TEXTE» Présentation générale : OpenOffice Texte est un traitement de texte assez similaire à celui proposé par Microsoft ; il est d'ailleurs
HMI target Visu / PLC HMI. Pour réaliser une interface homme machine avec PLC control
HMI target Visu / PLC HMI Pour réaliser une interface homme machine avec PLC control VERSION : 1.4 / PH DATE : 5 Novembre 2014 Sommaire Ce manuel explique de manière pratique les étapes successives pour
2013 Pearson France Adobe Illustrator CC Adobe Press
Au cours de cette démonstration d Adobe Illustrator CC, vous découvrirez les nouvelles fonctionnalités du logiciel, comme les outils de retouche et la sélection du texte, ainsi que d autres aspects fondamentaux
HTML5, 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
www.imprimermonlivre.com
0 www.imprimermonlivre.com Composition d une couverture avec Word L objectif de ce guide est de vous proposer un mode opératoire pour créer une couverture avec Word. Nous vous rappelons toutefois que Word
GUIDE Excel (version débutante) Version 2013
Table des matières GUIDE Excel (version débutante) Version 2013 1. Créer un nouveau document Excel... 3 2. Modifier un document Excel... 3 3. La fenêtre Excel... 4 4. Les rubans... 4 5. Saisir du texte
INTRODUCTION 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
Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.
Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel
101 Réaliser et publier un site WEB
101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Optimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche
Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -
UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles
Utiliser un CMS: Wordpress
Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation
Stellar Phoenix Outlook PST Repair - Technical 5.0 Guide d'installation
Stellar Phoenix Outlook PST Repair - Technical 5.0 Guide d'installation 1 Présentation Stellar Phoenix Outlook PST Repair - Technical offre une solution complète pour la récupération de données à partir
Prise en main rapide
Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un
INP E N S A T T O U L O U S E ßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßß. 7UDYDLO'LULJp
INP E N S A T T O U L O U S E ßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßßß $&&(66;3 7UDYDLO'LULJp 0DUF62848(6 Version du lundi 13 juin 2005 7DEOHGHV0DWLqUHV 1. PRODUIT + FOURNISSEUR...2 2. MISES A JOUR
Approche Design Méthodologie de conduite de sites web
Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:
Spé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
7.0 Guide de la solution Portable sans fil
7.0 Guide de la solution Portable sans fil Copyright 2010 Sage Technologies Limited, éditeur de ce produit. Tous droits réservés. Il est interdit de copier, photocopier, reproduire, traduire, copier sur
INTRODUCTION 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
Bernard 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.
TUTORIEL IMPRESS. Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer»
TUTORIEL IMPRESS Ouvrir Impress cocher «présentation vierge», «suivant» cocher «écran», «suivant» cocher «standard», «créer» Une page impress s'ouvre : Le volet gauche contiendra toutes les diapositives
CONCEPTION D E-MAILS ADAPTATIFS
CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,
SpeechiTablet Notice d utilisation
SpeechiTablet Notice d utilisation Copyright(C) 2003-2009 Speechi Web: www.speechi.net Tel: 03-20-34-74-25 Fax: 03-20-34-74-26 E-mail: info@speechi.net Version 1.0.0 1. Introduction... 3 1.1. Contenu de
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
MANUEL D UTILISATION ORBITVU EDITOR V.3
MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières
HTML. 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
Responsive 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
pcon.planner 6 Préparer et présenter une implantation en toute simplicité
pcon.planner 6 Préparer et présenter une implantation en toute simplicité Sommaire 1. Installation :... 3 2. Démarrer le logiciel :... 3 3. Interface :... 3 4. Naviguer :... 4 5. Réaliser une implantation
Installation et paramétrage. Accès aux modèles, autotextes et clip- art partagés
DSI Documentation utilisateurs Installation et paramétrage Accès aux modèles, autotextes et clip- art partagés Auteur : Yves Crausaz Date : 21 septembre 2006 Version : 1.04 Glossaire OOo : Abréviation
2 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é
Zen, SASS, responsive design
, SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
Création d un fichier de découpe
Création d un fichier de découpe DECOUPE 1 Fichier entièrement vectorisé au format illustrator uniquement Toutes les découpes sont regroupées dans 1 seul fichier.ai.ai 1 seul fichier. ai 800 x 100 mm -
CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration
CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu
Introduction à la présentation graphique avec xmgrace
Chapitre 6 Introduction à la présentation graphique avec xmgrace Contenu 6.1 Avant-propos....................... 71 6.2 Faire un simple graphe................. 72 6.3 Un graphe avec plusieurs courbes...........
mon 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
Créer une base de données
Access Créer une base de données SOMMAIRE Généralités sur les bases de données... 3 Création de la base de données... 4 A) Lancement d'access... 4 B) Enregistrement de la base de données vide... 4 Création