Prototyper un site web avec Awestruct et Boostrap

Dimension: px
Commencer à balayer dès la page:

Download "Prototyper un site web avec Awestruct et Boostrap"

Transcription

1 Prototyper un site web avec Awestruct et Boostrap

2 On va parler de... Prototype Awestruct Bootstrap Bonus (GitHub, JSF)

3 Prototyper : pourquoi? Mettre tout le monde d'accord Avoir un support concret Aide pour rédiger les specs Montrer autre chose que des tonnes de papier au client Faire autre chose que rédiger des tonnes de papier pour le client

4 Prototyper : comment? Léger Portable Agile Rapide Dynamique Hot-deploy Responsive Réel Bon marché

5 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct

6 Prototyper : comment? Application Java EE : un peu lourd HTML pur PHP Générateur en ligne Awestruct

7 Prototyper : comment? Application Java EE HTML pur : copier, coller, copier, coller,... PHP Générateur en ligne Awestruct

8 Prototyper : comment? Application Java EE HTML pur PHP : sérieusement? Générateur en ligne Awestruct No comment

9 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne : trop de limitations Awestruct

10 Prototyper : comment? Application Java EE HTML pur PHP Générateur en ligne Awestruct : essayons donc ça!

11 Awestruct Ruby (désolé...) HTML HAML Textile SASS Layout Extensions

12 Awestruct : installer $ sudo apt-get install rubygems $ sudo gem install awestruct That's it!

13 Awestruct : démarrer $ mkdir prototype $ cd prototype $ awestruct --init $ awestruct -d That's it again!

14 Awestruct : qu'avons-nous là? Configuration Extensions Layouts Génération Code

15 Awestruct : fonctionnement Templating Tout est page Import Layout Variables Profils Extensions Attributs Tags N'importe quoi

16 Awestruct : fonctionnement Scan du projet Génération des pages Extensions Génération du site

17 Awestruct : extensions & helpers Indexifier Posts Paginator Atomizer Tagger TagCloud DataDir IntenseDebate Disqus Flattr Textil Partial Google Analytics No limit!

18 Bilan intermédiaire Nous avons : Nous n'avons pas : Site léger Design Portable Responsive Dynamique Réel Hot-deploy En résumé : ça marche, mais c'est moche...

19 Bootstrap Deux fichiers CSS Design de base Design responsive Un fichier JavaScript Deux images Icônes noirs Icônes blancs Et c'est tout!

20 Bootstrap : philosophie Responsive Modulaire Simple Documenté Production ready Les classes CSS sont reines Les attributs data-* sont rois

21 Bootstrap : grille responsive Un conteneur fixe ou fluide Fixe : largeur connue Fluide : largeur 100% Une grille de 12 colonnes

22 Bootstrap : grille responsive Environnement Largeur Colonne fixe Marge fixe Colonne fluide Marge fluide Smartphone <= 480px Fluide Fluide Fluide Fluide De smartphone à tablette 481px 767px Fluide Fluide Fluide Fluide Tablette en mode paysage 768px 989px 42px 20px % % Défaut 980px 1199px 60px 20px % % Ecran large >= 1200px 70px 30px % %

23 Bootstrap : grille responsive

24 Bootstrap : classes CSS a a.btn a.btn.btn-primary a.btn.btn-primary.btn-large a.btn.btn-primary.btn-large.disabled

25 Bootstrap : classes CSS table.table table.table.table-striped table.table.tablestriped.table-bordered table.table.tablebordered

26 Bootstrap : design

27 Bootstrap : design

28 Bootstrap : design

29 Bootstrap : design

30 Bootstrap : icônes

31 Bootstrap : attributs data-* Envie d'effets modernes? Pas le temps de faire du JavaScript? Pas envie de faire du JavaScript? La flemme d'apprendre le JavaScript? Vous ne savez pas ce qu'est le JavaScript? Bootstrap à la rescousse!

32 Bootstrap : modal panel <a class= btn data-toggle= modal href= #modalpanel >Afficher</a> <div id= modalpanel class= modal > <div class= modal-header > <button class="close" data-dismiss="modal"> </button> <h3>modal header</h3> </div> <div class="modal-body"> <p>one fine body...</p> </div> </div>

33 Bootstrap : dropdown <ul class= nav > <li id= dropdown class= dropdown > <a class="dropdown-toggle" data-toggle="dropdown" href="#dropdown">dropdown<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul> </li> </ul>

34 Boostrap : résumé Classes CSS JavaScript et data-* Grille responsive Modal panel Boutons Dropdown Tables Onglet Listes Tooltip Formulaires Boutons (split, radio,...) Labels Spy bar Badges Collapse Miniatures Carousel Barres de chargement Typehead

35 Bootstrap : aller plus loin Réalisez votre propre thème visuel Générateur en ligne A la main Utilisez SASS ou LESS

36 Bonus JSF (Java Server Faces) Support des attributs data-* : ticket 1090 de la spec RichFaces Sandbox : premiers composants JSF basés sur Bootstrap is evil! GitHub username.github.com gh-pages branch Script.sh to deploy and push

37 Ressources Awestruct Bootstrap Site officiel Site officiel Site Arquillian Gallerie de sites Référence HAML Gallerie de design

38 Questions?

Présentation du Framework BootstrapTwitter

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...

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

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

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é

Plus en détail

Formation Joomla 3 Réalisez votre Template

Formation Joomla 3 Réalisez votre Template Formation Joomla 3 Réalisez votre Template Flash-comet.com Cours version 2015 1 Sommaire Contenu du cours... 3 Création d'un template avec "Template Créator CK"... 3 Principe de fonctionnement... 3 Ce

Plus en détail

Java EE Applications web

Java EE Applications web Java EE Applications web Applications web Deux types d applications web: Applications orientées présentation Contenu statique: Html,xml, XVG Contenu dynamique: jsp, jsf, servlets Applications orientées

Plus en détail

Documentation Template Creator CK

Documentation Template Creator CK 1 2 Remerciements Je tiens à remercier tous ceux qui m'ont soutenu et encouragé dans ce projet, ceux qui m'ont aidé, qui ont répondu à mes questions et qui m'ont permis au fil du temps de rassembler toutes

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS Objectifs Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Optimiser pour les appareils mobiles

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...

Plus en détail

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah

ADAPTATION DES INTERFACES. ROUYER Florian et BENNOUR Salah ADAPTATION DES INTERFACES ROUYER Florian et BENNOUR Salah SOMMAIRE Sujet Android Ionic Comparaison Conclusion Sujet Plateforme de partage de livres Fonctionnalités : Géolocalisation Visualisation Map Visualisation

Plus en détail

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter

Bootstrap 3 INTRODUCTION. À l origine, projet interne lancé au sein de l entreprise Twitter INTRODUCTION À l origine, projet interne lancé au sein de l entreprise Twitter Août 2011 Bootstrap V1, Janvier 2012 Bootstrap V2, Août 2013 Bootstrap V3 Bootstrap est un frameworks HTML/CSS Bibliothèque

Plus en détail

Intégrateur Web HTML5 CSS3

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

Plus en détail

LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6

LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6 LOT03P6 - Domino 8.5 : XPages dans Domino Designer 8.5 - Partie 6 Objectifs du développement en 8.5 Fournir un outil de développement moderne Faire pour les développeurs ce que Notes 8 a fait pour l'utilisateur

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 1 Installation de jquery Mobile

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation 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étail

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) CSS 3 et présentation avancée 1 Qu est ce que le responsive? Démo : Chrome + guardian.com 2 Qu est ce que le responsive? 3 Pourquoi? Explosion de la variété des supports source

Plus en détail

WordPress, thèmes et plugins : mode d'emploi

WordPress, 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étail

Questions à choix multiples Page 1 de 10

Questions à choix multiples Page 1 de 10 INF2005 Programmation web Examen intra hiver 2015 Question #1 Qui a gagné la guerre des fureteurs dans les années 1990? a) Netscape b) Internet Explorer c) Firefox d) Chrome e) Opera f) Mosaic g) Aucune

Plus en détail

FORMATION WEBMASTER AVANCEE :

FORMATION WEBMASTER AVANCEE : FORMATION WEBMASTER AVANCEE : OBJECTIF : 300 HEU RE S - 4 MOIS Apprendre à créer des sites internet par diverses méthodes en apprenant les bases des différents langages que constituent la création de site

Plus en détail

P13 [PROJET SI28 : ECRITURE INTERACTIVE ET MULTIMEDIA] Jourdaine Marc Lefèvre Mathilde Rossier Titouan Salles Martin. Responsable : Serge Bouchardon

P13 [PROJET SI28 : ECRITURE INTERACTIVE ET MULTIMEDIA] Jourdaine Marc Lefèvre Mathilde Rossier Titouan Salles Martin. Responsable : Serge Bouchardon P13 Jourdaine Marc Lefèvre Mathilde Rossier Titouan Salles Martin Responsable : Serge Bouchardon [PROJET SI28 : ECRITURE INTERACTIVE ET MULTIMEDIA] Sommaire Concept... 3 Objectifs... 3 Public-cible...

Plus en détail

Programme HTML5 / CSS3 Professionnel

Programme HTML5 / CSS3 Professionnel Programme HTML5 / CSS3 Professionnel Déclaration d'activité enregistrée sous le n 52 44 06789 44 auprès du Préfet de région des Pays de la Loire. Format du cours :Plate-forme d apprentissage numérique

Plus en détail

NOTICE INTERFACE WIFI

NOTICE INTERFACE WIFI NOTICE INTERFACE WIFI Notre interface d administration WIFI vous permet de : Personnaliser votre portail WIFI Gérer & paramétrer votre installation WIFI Tél : 02 40 71 71 21 Email : contact@va-solutions.fr

Plus en détail

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin

Créer son site web. Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin Créer son site web Avec la distribution e-change http://www.plateforme-echange.org/ Benoît Mamet Cédric Morin 1 Personnaliser l'apparence du site Avec la distribution e-change 2 La version rapide 3 Choisir

Plus en détail

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

Plus en détail

Guide Reseller Onbile

Guide Reseller Onbile Guide Reseller Onbile Cher Revendeur, Avez-vous un doute en ce qui concerne le fonctionnement du Panneau d Administration du Plan Reseller de Onbile? Le guide Reseller Onbile est ce dont vous avez besoin!

Plus en détail

GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS

GOOGLE ANALYTICS. Ajout du code de suivi sur PowerBoutique. Ajout du code de suivi Google Analytics. Page 1 / 7 TUTO / GOOGLE ANALYTICS Ajout du code de suivi Google Analytics Page 1 / 7 I. Création du compte sur Google Analytics 1. Connectez-vous à www.google.fr 2. Entrez «Google Analytics» dans la barre de recherche. 3. Cliquez sur le

Plus en détail

Lizmap: Webmapping, sans développement! Valorisation de données spatiales

Lizmap: Webmapping, sans développement! Valorisation de données spatiales Lizmap: Webmapping, sans développement! Valorisation de données spatiales Philippe Clastre, INRA, Avignon Nailloux, 26-28/ Mai / 2014 SOMMAIRE Lizmap: Principes Mise en forme des données (Qgis) Le plugin

Plus en détail

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a

Plateforme Systempay v1.24 Personnalisation avancée de la page paiement. Version 1.2a Plateforme Systempay v1.24 Personnalisation avancée de la page paiement Version 1.2a Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network

Plus en détail

Programmation Android Ce que vous devez savoir. Cours Android - F. Michel 1 / 18

Programmation Android Ce que vous devez savoir. Cours Android - F. Michel 1 / 18 Programmation Android Ce que vous devez savoir 1 / 18 Plan 1 Connaissances essentielles 2 Définition d une GUI et adaptation au contexte 3 L objet Intent 2 / 18 Connaissances essentielles Sur la plate-forme

Plus en détail

Logiciel : GLPI Version : 0.72.4 SYNCRHONISATION DE GLPI AVEC ACTIVE DIRECTORY. Auteur : Claude SANTERO Config. : Windows 2003.

Logiciel : GLPI Version : 0.72.4 SYNCRHONISATION DE GLPI AVEC ACTIVE DIRECTORY. Auteur : Claude SANTERO Config. : Windows 2003. Ce document est libre de droit, merci simplement de respecter son auteur. Toutes remarques ou commentaires seront les bienvenues. ATTENTION : La mise à jour par script entre GLPI et Active Directory ne

Plus en détail

TSI-V5 Manuel d installation

TSI-V5 Manuel d installation TSI-V5 Manuel d installation 1 Sommaire Introduction... 3 Pré-requis... 3 Installation SQL SERVER 2008... 3 Introduction... 3 Installation... 3 Prise en main... 7 Application TSI... 9 Premier démarrage

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

HTML5 et CSS3 pour des sites Responsive Web Design

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

Plus en détail

Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com

Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com Initiation à la Prog. Sous Android (Session 1) med.hossam@gmail.com Plan Statistiques Différences entre Mobile App, Mobile Site et Web App Développement pour terminaux mobiles Outils de développement pour

Plus en détail

Interakting groupe Business & Decision

Interakting groupe Business & Decision Magento Référence Date de création 2 octobre 2009 Date de diffusion Magento_2009-12-16_MANUEL D'INSTALLATION ET INTERAKTING SLIDER_v3.2.doc Version 3.2 Magento ----- Manuel d'installation et d'utilisation

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Présentation de Muse

Présentation de Muse Présentation de Muse J. ROMAGNY 1. CONSEILS... 4 2. INTERFACE... 5 A. CREATION DE SITE... 5 960 Grid System avec Muse... 6 B. PLAN DU SITE... 7 C. CONCEPTION (EDITION DES «MASTER PAGES» ET PAGES)... 8

Plus en détail

MyECP Development. let s get to it!

MyECP Development. let s get to it! MyECP Development let s get to it! Plan 1.Git et Gitlab 2.Installation du projet 3.Fonctionnement (workflow) 4.Techno & architecture du code Git et Gitlab In Git we trust Git : le travail à plusieurs Git

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés.

TP N 4. Par défaut, la page d accueil affiche les 10 derniers articles publiés. TP N 4 Page d accueil Wordpress Ojectif Gérer du texte avec des images Accueil par défaut Par défaut, la page d accueil affiche les 10 derniers articles publiés. Nous souhaitons une page d accueil avec

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2014/2015) Conception de Sites Web Dynamiques : TD 2 HTML5 statique, feuille de style CSS, Mise en page, Framework Bootstrap http://www.labri.fr/perso/preuter/cswd2015

Plus en détail

Créer son questionnaire en ligne avec Google Documents

Créer son questionnaire en ligne avec Google Documents Créer son questionnaire en ligne avec Google Documents (actualisation et précision de l article paru sur http://www.marketing- etudiant.fr/actualites/collecte-donnees.php) Se connecter avec son compte

Plus en détail

Module M1105 5. Frameworks web

Module M1105 5. Frameworks web Module M1105 5. Frameworks web Sébastien THON DUT Informatique 1ère année IUT d'aix-marseille Université, site d Arles Département Informatique Version 1.0 du 15/09/2015 2 INTRODUCTION On a vu comment

Plus en détail

Gestion Bibliothèque. Résumé

Gestion Bibliothèque. Résumé Gestion Bibliothèque Résumé Ces travaux seront réalisés dans le cadre du cours Web Services Miage NTDP afin de permettre aux étudiants d assimiler les concepts théoriques vus en cours. L idée est de développer

Plus en détail

Windows XP. Microsoft. Sommaire :

Windows XP. Microsoft. Sommaire : Microsoft Windows XP Sommaire : OUVERTURE DE SESSION...2 LE BUREAU...3 CHANGER D ENVIRRONEMENT...4 NOUVEAU RACCOURCI...7 LE MENU DEMARRER...9 LES PROGRAMMES AU DEMARRAGE...11 LA GESTION DES FICHIERS...12

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

Tutoriel Ionic framework

Tutoriel Ionic framework INGÉNIEURS EN SCIENCES INFORMATIQUES ADAPTATION DES INTERFACES A L ENVIRONNEMENT Tutoriel Ionic framework Tutoriel et présentation du framework IONIC : technologie permettant la réalisation d applications

Plus en détail

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013

Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Ajouter les miniatures dans le re sultat de recherche pour SharePoint Foundation 2013 Après avoir installé SharePoint Foundation 2013, puis configuré le moteur de recherche, voyons comment personnaliser

Plus en détail

Utilisation de l éditeur.

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

Plus en détail

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word.

PRETASHOP. Etre à l'aise avec l'utilisation d'un ordinateur et d'internet. Maitriser les bases de Microsoft Word. PRETASHOP LES OBJECTIFS : Vous verrez comment installer Joomla! localement puis sur un serveur distant, concevoir l organisation de votre site, rédiger vos premiers articles, maitriser les feuilles de

Plus en détail

Picasa Utilisation : 1 ère partie

Picasa Utilisation : 1 ère partie Picasa Utilisation : 1 ère partie Pour ouvrir Picasa, faîtes un double clic sur l icône présente sur le bureau. Vous pouvez également cliquer sur le menu Démarrer, Tous les programmes, Picasa 3. Lorsque

Plus en détail

NFA 074. 06 - Projet HTML-CSS

NFA 074. 06 - Projet HTML-CSS NFA 074 06 - Projet HTML-CSS 06 - Projet HTML-CSS Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information complète et fiable. Cependant, le Cnam

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

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. 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étail

Une interface moderne et multi devices avec Drupal Focus sur Omega

Une interface moderne et multi devices avec Drupal Focus sur Omega Une interface moderne et multi devices avec Drupal Focus sur Omega Romain Jarraud Formateur / consultant Drupal Anne- Sophie Picot Chef de projets Publier du contenu aujourd hui > Plateformes de consultation

Plus en détail

AdOps Spécifications techniques publicitaires

AdOps Spécifications techniques publicitaires AdOps Spécifications techniques publicitaires Matériel publicitaire HTML5 (Desktop) Les spécifications suivantes doivent être respectées pour la fourniture de matériel publicitaire HTML. Si vous utilisez

Plus en détail

Google Tag Manager Optimisez le tracking de votre site web

Google Tag Manager Optimisez le tracking de votre site web Avant-propos A. Remerciements 11 B. À propos de l auteur 12 C. À propos de ce livre 13 Chapitre 1 : Les systèmes de gestion de balises A. Introduction 17 B. Les systèmes de gestion de balises 17 1. Introduction

Plus en détail

Accès à distance. Guide du client AnyConnect pour utilisateurs de MAC. Rédigé le 5 février 2013 par Andrée Proulx

Accès à distance. Guide du client AnyConnect pour utilisateurs de MAC. Rédigé le 5 février 2013 par Andrée Proulx Accès à distance Guide du client AnyConnect pour utilisateurs de MAC Rédigé le 5 février 2013 par Andrée Proulx Direction des services administratifs 1 CONTENU Présentation du service WebVPN... 3 Accès

Plus en détail

Sur la gauche : tous les répertoires de l ordinateur ; sur la droite : tous les fichiers contenus dans l élément sélectionné sur la gauche.

Sur la gauche : tous les répertoires de l ordinateur ; sur la droite : tous les fichiers contenus dans l élément sélectionné sur la gauche. Navigation Windows Clic Droit sur l icône Windows au coin inférieur gauche du bureau Choisir Ouvrir l Explorateur Windows Une fenêtre de navigation s affiche : Sur la gauche : tous les répertoires de l

Plus en détail

WordPress Référencement naturel (SEO) Optimiser. son référencement. Daniel Roch. Préface d Olivier Andrieu

WordPress 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étail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

Plus en détail

Présentation du CD-Rom

Présentation du CD-Rom Présentation du CD-Rom Contenu Le CD-Rom contient le matériel nécessaire à la mise en œuvre des séances. Typologie d activités Ce document permet de trouver rapidement une activité en fonction de critères

Plus en détail

Système de gestion de contenu (SGC)

Système de gestion de contenu (SGC) Bracher-Automation Système de gestion de contenu (SGC) Guide de l'utilisateur 05.09.09 12:03:22 1/12 Index Système de gestion de contenu (SGC)...1 Introduction...3 Explication du système...3 Fichiers et

Plus en détail

Responsive Web Design. La Rochelle, Avril 2014

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

Plus en détail

Procédure d installation détaillée

Procédure d installation détaillée Procédure d installation détaillée G e s r i s k v e r s i o n 4. 1. 1 c e r t i f i é e R T S S e n d a t e d u 01- j u i n - 2 0 1 1 TÉLÉCHARGEMENT DU PACKAGE D INSTALLATION Pour télécharger les fichiers

Plus en détail

DOCUMENTATION MISE A JOUR ANTIBIOGARDE. V4.0 en v4.1

DOCUMENTATION MISE A JOUR ANTIBIOGARDE. V4.0 en v4.1 DOCUMENTATION MISE A JOUR ANTIBIOGARDE V4.0 en v4.1 Version d Antibiogarde 4.1 Version du document 1.0 Date dernière mise à jour du document 15/06/2010 Retrouvez cette doc à jour sur : http://www.antibiogarde.org/activation/

Plus en détail

Responsive Design. Technologies du web. Stéphane Bouvry, 2014

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,

Plus en détail

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 15 2.2 Multiples OS 15 2.3 Multiples navigateurs 17 2.4 Évolutions

Plus en détail

J2EE. A.-E. Ben Salem. 09 Octobre 2011. LRDE and LIP6 1 / 15

J2EE. A.-E. Ben Salem. 09 Octobre 2011. LRDE and LIP6 1 / 15 J2EE A.-E. Ben Salem LRDE and LIP6 09 Octobre 2011 1 / 15 Plan 1 J2EE 2 Architecture Client/Serveur HTTP 3 Différence entre Web Statique et Web Dynamique 4 Web Dynamique avec un Serveur d applications

Plus en détail

HTML. Notions générales

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

Plus en détail

INTRODUCTION AU LOGICIEL SPHINX

INTRODUCTION AU LOGICIEL SPHINX INTRODUCTION AU LOGICIEL SPHINX Sphinx est un logiciel d'enquête et d'analyse des données. Il permet de vous assister dans chacune des quatre grandes étapes de réalisation d'une enquête : 1. L élaboration

Plus en détail

Création de site avec plan de classement par défaut dans un projet d extension Alfresco.

Création de site avec plan de classement par défaut dans un projet d extension Alfresco. Java EE &.NET GED Alfresco & workflows Portail Liferay "People & Technology for your Agility & Performance" www.koosery-tech.fr contact@koossery-tech.fr 1 mail du Professeur G. Mathé Biopark Villejuif

Plus en détail

CCP3: Contribuer à la réalisation de supports de communication numériques

CCP3: Contribuer à la réalisation de supports de communication numériques Nous CCP3: Contribuer à la réalisation de supports de communication numériques Le titre professionnel est composé de trois certificats de compétences professionnelles (CCP) Celui-ci prépare à la certification

Plus en détail

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23

Site agrogembloux.be - document public COMMISSION PHOTO. Version 2015.02.23 Site agrogembloux.be - document public COMMISSION PHOTO Programme pour adapter les photos au site internet et Mode d emploi pour uploader les photos sur le site Version 2015.02.23 (dernière version toujours

Plus en détail

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez!

Création d un site web avec Nvu. Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Création d un site web avec Nvu Pensez à sauvegarder fréquemment dans votre espace de travail les documents que vous réalisez! Le but de ce TP est d utiliser le logiciel Nvu pour réaliser un site simple

Plus en détail

Guide Template kibana-hakabana. Joshua Monier joshua.monier@e-josh.fr

Guide Template kibana-hakabana. Joshua Monier joshua.monier@e-josh.fr Guide Template kibana-hakabana. joshua.monier@e-josh.fr 1 sur 14 Sommaire : I. Introduction : 3 II. Ce que nous voulons : 4 III. Comment y parvenir? 5 1. Le changement de couleur de fond : 5 2. Changer

Plus en détail

FICHE PRATIQUE N 14 CREER UN QUESTIONNAIRE E SUR

FICHE PRATIQUE N 14 CREER UN QUESTIONNAIRE E SUR Google propose à travers son service Google Drive (service de stockage et de partage de fichiers en ligne) un outil pratique permettant la création de formulaire : questionnaire de satisfaction, formulaire

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

Le WEB: présentation

Le WEB: présentation Le WEB: présentation Introduction: définition(s), historique... Principes d'utilisation:. le système Hypertexte. le fonctionnement pratique Naviguer sur le Web, les bases. les principales fonctions d'un

Plus en détail

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE

CRÉATION D UN SITE INTERNET. Document de travail =================================== SOMMAIRE CONCEPTION RÉALISATION HÉBERGEMENT CRÉATION D UN SITE INTERNET Document de travail Aide à l établissement du cahier des charges. Ce document aborde les thèmes principaux de la mise en place d un site Internet

Plus en détail

Souris de voyage sans fil à 5 boutons Manuel de l utilisateur

Souris de voyage sans fil à 5 boutons Manuel de l utilisateur Souris de voyage sans fil à 5 boutons Manuel de l utilisateur Caractéristiques 1. Transmission sans fil à radiofréquence de 27 MHz 2. Utilisation de 256 codes d identification pour éviter l interférence

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Vittoria Quick Cart v1.0.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0

Vittoria Quick Cart v1.0.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0 Manuel d installation et d utilisation de l extension Vittoria Quick Cart v1.0 1 Sommaire 1. A propos de ce manuel... 2 2. Mise à jour du manuel... 2 3. Installation de l extension via la clé d installation

Plus en détail

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/

Mac OS X Dashboard. Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Mac OS X Dashboard Jean-Baptiste.Yunes@liafa.jussieu.fr http://www.liafa.jussieu.fr/~yunes/macosx/ Dashboard un ensemble d outils toujours disponibles [F12] trois types d outils : accessoires (très autonomes)

Plus en détail

Atelier Construction Plug-in avec la plateforme Eclipse JUG Poitou-Charentes BARON Mickaël 18 septembre 2009. Leçon n 2 : Perspectives

Atelier Construction Plug-in avec la plateforme Eclipse JUG Poitou-Charentes BARON Mickaël 18 septembre 2009. Leçon n 2 : Perspectives Atelier Construction Plug-in avec la plateforme Eclipse JUG Poitou-Charentes BARON Mickaël 18 septembre 2009 Leçon n 2 : Perspectives Temps estimé : 20 minutes Le but de cette deuxième leçon est d apprendre

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

ÉDITEUR MANUAL D UTILISATION :

ÉDITEUR MANUAL D UTILISATION : MANUAL D UTILISATION : ÉDITEUR Système «drag & drop» :... 2 1. Gestionnaire de contenus... 3 2. Éditeur du style... 5 3. Ajouter des éléments... 6 4. Annuler/Rétablir... 13 5. Enregistrer... 13 Quand nous

Plus en détail

GUIDE CONFIGURATION. KBox sous Windows

GUIDE CONFIGURATION. KBox sous Windows GUIDE CONFIGURATION KBox sous Windows TABLE DES MATIERES 2. INTRODUCTION... 2 3. INSTALLATION... 3 TELECHARGEMENT DE L EXECUTABLE... 3 INSTALLATION DE KBOX... 3 4. CONFIGURATION DE LA KBOX... 7 EDITION

Plus en détail

Tutoriel JA Promo Bar

Tutoriel JA Promo Bar Tutoriel JA Promo Bar En ce début d'année Joomlart publie trois extensions Joomla gratuites qui nous en sommes sûr vous seront très utiles pour vos sites Web. Elles sont toutes responsive, et fonctionnent

Plus en détail

Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel

Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel Utiliser SQL Server 2008 R2 Reporting Services comme source de donne es pour Microsoft Excel Excel est un des meilleurs outils de manipulation de données et parfois il est nécessaire d exploiter des données

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

UNE PETITE INTRODUCTION

UNE PETITE INTRODUCTION MODULE DE NEWS Introduction 1. Créer et gérer les news 2. Gérer les catégories 3. Gérer les utilisateurs 4. Infos et flux RSS 5. Intégrer les news dans votre CMS UNE PETITE INTRODUCTION QUEST-CE QU UN

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Le Creative Cloud d Adobe 9 Interface de conception

Plus en détail

Raport de projet Webui Oardocker

Raport de projet Webui Oardocker Raport de projet Webui Oardocker EUDES Robin, ROSSI Ombeline 7 avril 2015 Table des matières 1 Introduction 2 2 Cahier des charges 2 3 Technologies et outils utilisés 3 3.1 OAR-Docker...........................................

Plus en détail

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX

Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX Créer une trace, obtenir son fichier gpx et sa carte Ou Afficher un fichier trace GPX Logiciels nécessaires : - - - Google Chrome comme navigateur internet FireShot qui est un add-on qui se greffe sur

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

Gestion des immeubles

Gestion des immeubles RAPPORT DE CONCEPTION Gestion des immeubles BOUSSRHAN YOUSSEF & BENZITI WALID Email : Youssefboussrhan@gmail.com GSM : 0678510690, 0611347597 ISTA NTIC SYBA CRJJ GROUPE B Annexe : Figure 1: Diagramme de

Plus en détail

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail