Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Introduction à jQuery Mobile

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Petit récapitulatif sur l'utilisation de jQuery Mobile qui était déjà présente dans la version CS5.5. Aujourd'hui nous allons voir les nouveautés qu'apporte CS 6 sur l'utilisation de cette librairie.
05:28

Transcription

Dreamweaver CS6 va plus loin aujourd'hui et améliore la relation, le dialogue entre la librairie et l’éditeur de code. Rappelons brièvement ce que jQuery mobile représente. C'est une librairie Javascrip orientée mobile et basée sur la fameuse librairie jQuery et sa consœur jQueryUI, une librairie adaptée aux éléments d'interface comme des palettes, des boites de dialogue, des boutons, des menus accordéon, etc... Revenons maintenant sur Dreamweaver CS6. Depuis le menu Fichier Nouveau, nous avons la possibilité d’accéder à des exemples de pages et notamment des exemples d'applications mobile. Dans les anciennes versions de Dreamweaver nous avions déjà un certain nombre de possibilités de travailler avec des applications basées sur jQuery mobile. Aujourd'hui Dreamweaver CS6 nous propose la possibilité de travailler sur des applications jQuery mobile basées sur des thèmes. Ne cherchez plus les applications basées sur PhoneGap, aujourd'hui PhoneGap va s'utiliser de manière différente comme vous pourrez le voir dans les rubriques destinées a PhoneGap. Ici, il est donc possible de pouvoir utiliser dorénavant une application basée sur jQuery mobile, basée sur un thème. Il suffit pour cela de venir choisir le type de doc type avec lequel vous souhaitez travailler et de créer directement cette page. Voyez que instantanément la page se peuple avec tout une série de documents locaux qui ont été préparés pendant l'installation de Dreamweaver. voyez dans le menu Configuration Third Party etc... Mais dès l'instant où je vais enregistrer ce fichier, je vais l'enregistrer Version1, ici, automatiquement Dreamweaver va transporter tous ces fichiers-là en local, dans le site, dans un dossier jQuery prévu à cet effet qui va pouvoir récolter l'intégralité des fichiers depuis le dossier d'installation. Ici, je vais rappeler le menu Fichier. Mon chapitre 05 est bien là, je vais actualiser. Il n'y a que le fichier HTML que je viens d'enregistrer. Par contre, ici, on a l'intégralité des fichiers nécessaires à jQuery mobile qui sont installés dans ce dossier. Si je passe en menu Création, je me retrouve avec une architecture de Pages qui va me permettre de remplir des contenus Page 1 Page 2, etc... C'est très clair, très simple. A chaque fois, j'ai un header, un pied de page et un contenu, par contre rien de spécial d'un point de vue structurel et visuel mais dès que je passe en Mode en direct, on se retrouve avec un véritable environnement pré-thèmé et interactif donc ici je peux basculer de ma page de départ vers ma Page 2, etc.. On peut naviguer comme cela. SI je passe en mode Multi écrans pour pouvoir voir ce que donnerait par exemple sur un téléphone de base, ici, on se retrouve exactement dans la même configuration et je vais pouvoir venir naviguer et utiliser l'interface développée par jQuery mobile. Je vais revenir en plein écran, ici et je vais essayer de fractionner mon écran. Ici, sur la partie gauche, on se retrouve avec la librairie, sur la partie droite, le code. Pensez à rafraîchir pour pouvoir systématiquement remettre les composants et les éléments dans leurs dimensions d'origine. Dreamweaver n'intègre pas uniquement que la création d'un modèle de template de page, ici. Dès qu'on sort du mode direct, je vais rester en mode fractionné comme ça, on a un onglet qui est ici jQuery mobile qui va nous permettre d'intégrer des composants, à l'ntérieur de chaque contenu de page. Ici, par exemple, je vais supprimer le contenu, on peut travailler aussi bien dans la partie code que dans la partie visuelle, et ici je vais insérer une série de boutons jQuery mobile. Il suffit de cliquer sur ce composant pour ouvrir la boîte de dialogue. Je vais demander trois boutons, de type Bouton, qui seront vus en menu horizontale comme ça. Est-ce que j'ai une icône, oui, je vais mettre Flèche haut ou Flèche droite, voilà et la position de l'icône Par défaut. Je vais dire ok. Les trois boutons se sont placés, je vais pouvoir changer les textes. Ici on a la partie HTML pure qui nous permet de modifier de manière plus limpide dans les balises. On peut aussi très bien modifier dans l'interface donc il n'y a pas de limitation, de problème d'utilisation entre l'un ou l'autre des écrans. C'est au choix et par affinité. On a ici une série d'icônes qui vont être intéressantes. On ne va pas toutes les faire, le principe est de comprendre. qu'on va créer une nouvelle page de jQuery mobile. On va créer des modèles de listes, des modes de mise en page, des blocs repliables, des champs de saisie, des champs de mot de passe, des zones de texte, des menus de sélection donc des listes, des cases à cocher, des boutons radio, les boutons comme les sliders, des petites glissières et là un interrupteur à bascule oui/non. On pourrait mettre dans la page 3 par exemple un bouton à bascule oui/non. Voilà, il suffit d'enregistrer toutes ces informations et on va pouvoir passer en mode en direct et utiliser, dans la Page 2, les fameux trois boutons et si je reviens, toujours par le navigateur de Dreamweaver, dans la Page 3, le bouton à bascule désactiver/activer. C'est très simple d'utilisation, encore un rappel de l'utilisation des librairies jQuery mobile au sein de Dreamweaver.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !