[Web 2.0] TP: Système de gestion de fenêtres de votre webOS !

Informations sur le tutoriel

	Auteur : cookieslover Visualisations : 878 604 Plus d'informations Créé : Le 11/07/2007 à 21:59:57 Modifié : Le 27/05/2009 à 20:40:12 Avancement : 90% Licence : Copie non autorisée 17 commentaires Afficher l'intégralité du tutoriel

Historique des mises à jour

• Le 27/05/2009 à 20:40:12
  Correction d'un lien mort

Bonjour, amis zéros.
Pour mon premier tuto, j'ai souhaité vous initier à une nouvelle manière de concevoir la création d'un site web.
En effet, ce tuto va consister en un TP dans lequel nous allons créer un système de gestion de fenêtres aux allures de Windows. Peut-être avez-vous déjà vu ce concept dans certains WebOS ? Un WebOS est une imitation de bureau ou d'environnement graphique d'un système d'exploitation.

Quelles compétences dois-je posséder pour suivre ce TP ?

Vous devez bien sûr avoir lu le tuto de M@teo21 sur le XHTML/CSS, connaître les bases du Javascript, et il est préférable d'avoir lu le tuto de Fedaykin sur le DHTML et Javascript.

À vos Bloc-notes !

• Structure et code XHTML/CSS d'une fenêtre
• Création d'une fenêtre dynamiquement avec Javascript
• Agir sur les fenêtres

• ---

  Partie 1 : Structure et code XHTML/CSS d'une fenêtre

  Bonjour à tous !
  Dans cette partie, assez simple par rapport aux suivantes, nous n'allons pas faire de JavaScript (pas encore).
  Nous allons ici réfléchir à la structure qu'auront les fenêtres de notre système de gestion de fenêtres, afin d'en établir le code XHTML/CSS qui en résulte.
  Vous allez voir, on va créer de belles fenêtres.
  • 
    
    1) Réfléchissons à la structure de notre fenêtre
    
    • À quoi veut-on qu'elle ressemble ?
    • On en déduit la structure
  • 
    
    2) Établissons le code XHTML/CSS de notre fenêtre !
    
    • Le code XHTML
    • Mise en forme avec le CSS
    • C'est plus beau avec des images de fond !
  
  Voilà. Cette partie de notre TP est finie, nous avons enfin créé notre fenêtre.
  Dans la prochaine partie, plus difficile, nous allons voir comment créer cette fenêtre dynamiquement avec le JavaScript.

• ---

  Partie 2 : Création d'une fenêtre dynamiquement avec Javascript

  Maintenant que nous avons créé le code XHTML/CSS de notre belle fenêtre, nous allons entrer dans le vif du sujet et faire du JavaScript.
  
  

  Que voulons-nous faire ?

  
  C'est simple, nous voulons qu'une fenêtre s'ouvre lorsque l'on clique sur un lien !
  Pour cela, nous devrons en quelque sorte modifier avec JavaScript le contenu de notre document XHTML. Nous allons faire cela avec le DHTML qui permet de rendre le HTML dynamique.
  • 
    
    1) Rappels à propos du DHTML
    
    • Savoir se positionner dans son document
    • Ajouter du code XHTML dynamiquement
    • Ajouter un événement dynamiquement
  • 
    
    2) Création de la fonction qui ouvre une fenêtre
    
    • On veut ouvrir une fenêtre lorsque l'on clique sur un bouton
    • Écriture de la fonction
    • Ouvrir plusieurs fenêtres ?
  
  Ouf !
  Cette seconde partie est finie et vous devinez déjà - je suppose - ce que nous allons faire dans la troisième et dernière partie ?... Non ? Nous allons apprendre à agir sur nos fenêtres (basculer entre elles, les déplacer et même les redimensionner !). Accrochez-vous ! La troisième partie n'est pas de tout repos...

• ---

  Partie 3 : Agir sur les fenêtres

  Dans cette dernière partie, nous allons voir comment nous pouvons agir sur nos fenêtres avec le JavaScript.
  Ainsi, nous allons voir comment mettre au premier plan une fenêtre, la déplacer, et enfin la redimensionner !
  Bonne lecture et courage !
  • 
    
    1) Mettre au premier plan une fenêtre
    
    • Comment allons nous procéder ?
    • Écriture de la fonction pour changer le z-index d'une fenêtre
  • 
    
    2) Déplacer une fenêtre
    
    • Comment allons nous procéder ?
    • Savoir quand une fenêtre est en cours de déplacement et laquelle
    • Déplaçons nos fenêtres
  
  Voilà : après cette longue partie, vous avez vu comment on pouvait agir sur nos fenêtres .

Ce tutoriel est maintenant terminé .
Par l'intermédiaire de celui-ci, que l'on pourrait plus qualifier de TP, vous avez pu, je l'espère en tout cas, être initiés à la nouvelle manière de concevoir un site web : le web 2.0 .

Si vous avez aimé, vous pouvez tout à fait améliorer notre système de gestion de fenêtres pour en faire carrément un WebOS .
Bonne chance à vous en tout cas, et merci d'avoir suivi ce tutoriel .

Informations sur le tutoriel

Retour en haut

Créé : Le 11/07/2007 à 21:59:57
Modifié : Le 27/05/2009 à 20:40:12
Avancement : 90%
Licence : Copie non autorisée

17 commentaires
Afficher l'intégralité du tutoriel