Digg est l'un des réseaux sociaux les plus populaires à ce jour. Ils rassemblent une audience massive parmi des millions de membres. Récemment, la société a pris une nouvelle direction avec le lancement de Digg v4. L'ensemble du système a été remplacé par de nouvelles statistiques et de nouveaux suiveurs / réseaux.
L'un des changements les plus notables concerne l'esthétique de la page. Avec le lancement de Digg v4, vous bénéficiez d'un tout nouveau design avec une apparence et une convivialité uniques. Dans ce tutoriel, nous verrons comment créer votre propre formulaire de saisie de style Digg v4 à l'aide de propriétés de base CSS3.
Nous utiliserons également jQuery pour manipuler chacune des divisions clés afin d'obtenir un effet d'animation astucieux. Nous n'utiliserons pas d'appels Ajax sophistiqués ici, bien que jQuery prenne en charge une telle fonctionnalité. Le formulaire principal que nous utiliserons est basé sur la page de soumission actuelle de Digg.
Live Demo - Télécharger
Travailler avec CSS3 et jQuery
Comme cela n’est peut-être pas implicite, rien de spécial à faire pour travailler avec CSS3. Nous n'avons pas besoin d'inclure de fichiers externes ni de bibliothèques car la plupart des navigateurs modernes prendront en charge un moteur de rendu plus récent. jQuery doit être inclus dans notre fichier. Heureusement pour nous, Google Code héberge toutes les versions des scripts populaires en ligne.
En utilisant les documents Google API, nous pouvons commencer à utiliser jQuery 1.4.1. J'ai inclus la version réduite pour économiser la bande passante à long terme (toujours une bonne idée pour les environnements de production). En plus de cela, nous aurons également besoin de nos fichiers core. Pour ce faire, il faudra inclure un simple index.html, global.css pour les styles et script.js pour notre fonctionnalité jQuery.
Structures nues
Nous pouvons commencer par notre code HTML. Cela devrait être assez simple mais il n’est pas inutile de diviser les choses en sections.
Ceci est la partie principale de notre document HTML. Il contient toutes les méta-informations ainsi qu'un doctype de transition XHTML. Les seules inclusions de fichiers sur lesquelles nous travaillons sont CSS et du code JavaScript externe. Ces deux fichiers sont stockés localement tandis que notre carte jQuery est incluse via http://ajax.googleapis.com/.
Nous avons ensuite un code de base pour la structure de notre corps principal. Cela inclura l'en-tête Digg et la partie logo de la page. Cela inclut également notre petit formulaire avec quelques boutons d’entrée et des boîtes de dialogue.
Digg it AnnulerEnsuite, il devrait être simple de couvrir certaines des requêtes CSS courantes. Quelques propriétés et identifiants doivent être bien compris lors de la modification d'un script de style similaire. Nous avons également utilisé quelques propriétés CSS3 nouvelles pour les navigateurs modernes.
CSS de nouvelle génération
Notre fichier commence simplement par la réinitialisation des marges et des styles de titre / corps. Il n’ya vraiment pas grand-chose en termes de polices, de zones de bloc ou d’autres éléments communs. Étant donné que l'objectif de notre code est basé sur des tutoriels, je n'ai pas eu la peine de créer une liste exhaustive de propriétés CSS.
Remarquez comme il existe une petite classe appelée? Sprite ?. Ceci utilise un fichier master.png qui contient toutes les icônes et tous les graphiques pour la mise en page de Digg. Il s'agit d'une technique de spriting utilisée pour économiser la bande passante et les appels du serveur pour les graphiques d'arrière-plan.
Plus bas sur la page, nous avons quelques nouveaux blocs liés aux requêtes CSS3. De nombreux boutons et champs de saisie du formulaire incluent des effets générés dans le navigateur via CSS. À titre d'exemple, tous les champs de texte d'entrée ont un ensemble -webkit-box-shadow avec une chute d'insert.
Cela produit un effet 3-D contrairement à beaucoup de vu auparavant. Les nouvelles normes Web génèrent une belle tonalité et avec ces propriétés CSS, nous pouvons concevoir des interfaces étonnantes.
Un peu plus bas, nous avons un bloc de code destiné à quelques classes. champ de détail de soumission et maintenant en cours de montage contient des propriétés intéressantes qui devraient être examinées un peu plus loin. Initialement, tout le contenu d’une classe en cours d’édition n’a pas d’affichage. Ceci est changé en utilisant jQuery pour manipuler comment nous devrions nos formulaires.
Les formulaires de soumission sont configurés par défaut pour ressembler à des étiquettes. Une fois que vous avez cliqué pour les éditer, nous changeons la classe de la division parente en maintenant affichage: aucun; clause.De là, nous pouvons alterner facilement entre les deux états.
Ces styles CSS peuvent fonctionner avec presque n'importe quoi. Vous remarquerez tout de suite quelques bugs dans le système. À titre d’exemple, aucun des boutons ou liens de la division n’affichera de pointeur de souris en survol. Au lieu de cela, vous obtiendrez la barre de texte utilisée pour mettre en surbrillance des blocs de texte. Vous pouvez le modifier via la propriété CSS du curseur.
Construire notre script
Le JavaScript requis est assez simple à utiliser. Heureusement, jQuery aide à réduire le nombre de lignes de code nécessaires pour cibler et manipuler les objets DOM.
Nous commençons par notre vérification d'événement prêt standard pour que notre document termine son chargement. C’est un moyen plus précis de cibler le développement de scripts car tout ce dont nous avons besoin est un modèle d’objet document entièrement chargé pour être en mouvement. Le chargement de nombreux actifs plus petits sur la page continuera, mais au lieu d'attendre, notre script est exécutable instantanément.
Dans nos paramètres de fonction ready, nous passons une nouvelle une fonction() conçu pour gérer les auditeurs d'événements. Celles-ci vérifient qu'un événement donné se produit et, le cas échéant, il exécute le code défini dans une nouvelle fonction.
Cela aura plus de sens avec un exemple, commençons par le premier champ de saisie.
La première ligne vérifie que notre document ne contient aucun élément de la classe? Edit-input? et lier (ou eux) un gestionnaire d’événements. L'événement que nous recherchons est un événement click, c'est-à-dire que chaque fois que l'utilisateur clique sur cet élément, nous appelons une autre fonction. Dans notre code HTML .edit-input est une classe appliquée à nos liens d'édition.
Une fois que la fonction commence, nous extrayons le nom de la classe de notre élément parent contenant. Nous saisissons également l'ID actuel de notre lien d'édition car nous pouvons déterminer si nous modifions le titre ou la description de l'article. Plus bas, nous avons un code pour échanger les deux classes rendant notre champ de texte modifiable.
Ensuite, quelques lignes de code sont nécessaires pour mettre au point automatiquement le champ de texte et enregistrer les résultats. Nous aurions pu utiliser un appel Ajax pour enregistrer les données dans une base de données à chaque clic, mais les détails nécessaires à cet effet vont au-delà de la portée de ce didacticiel. Nous aurions également besoin de l'assistance d'un langage de base tel que PHP ou Ruby.
Il existe un événement de liaison similaire lié à nos deux divisions de champs de formulaire. Cette opération vérifie la zone de texte contenant la description de notre récit et fonctionne de la même manière que ci-dessus. Notez que vous pouvez chaîner plusieurs écouteurs d'événements de cette manière pour créer des scripts de formulaire dynamiques en quelques minutes.
Conclusion
Ce didacticiel a donné un bon aperçu des nouvelles techniques CSS3 et des fonctionnalités classiques de jQuery. Notre produit final ressemble beaucoup au formulaire d'envoi Digg sans extraire d'images d'une URL nécessitant des techniques Ajax.
Tous les styles et designs CSS ont été créés de manière très similaire à Digg v4. Mieux encore, beaucoup de blocs de code ont été simplifiés pour être copiés et manipulés dans votre propre page.
Comme indiqué précédemment, j'ai mis à jour le code de démonstration en direct et proposé un fichier .zip à télécharger. Vous pouvez consulter mon code de démonstration Digg ici sur DesignShack et également télécharger les archives de vos propres travaux. Si vous avez des questions / commentaires, n'hésitez pas à proposer vos idées dans la zone de discussion ci-dessous.