PSD à Wordpress de conversion : expliqué de A à Z (3 / 5 étapes)

Étape 3: Étape 3: créer le HTML et CSS3, JavaScript (jQuery)

Une fois que vous avez terminé la deuxième étape de ce processus PSD à WordPress de conversion par tranchage le fichier PSD de votre site Web, vous avez besoin pour démarrer sur le codage en utilisant HTML5 et CSS3. Tout d’abord, créez un nouveau dossier et créer deux fichiers à l’intérieur de ce dossier, à savoir index.html et style.css. En outre, créez un sous-dossier dans ce dossier. Ce dossier est ce que vous utiliserez pour stocker toutes les images que vous allez extraire votre fichier PSD. Créez un autre sous-dossier que vous utiliserez pour stocker tous vos fichiers jQuery. N’oubliez pas de nommer et étiqueter tous ces dossiers et sous dossiers correctement !

HTML5
HTML5 est le nom d’une langue encore quelque peu naissante frontend, celui dont l’utilisation est largement répandue grâce à sa facilité d’utilisation et sa polyvalence. Cette polyvalence tient principalement au fait que cette langue frontend contienne des fonctionnalités de HTML et XHTML. Vous utiliserez cette langue frontend pour créer le squelette de votre conception de site Web final, y compris certains éléments clés de votre site Internet tels que l’en-tête et le pied de page. À l’aide de HTML5 facilitera la création d’une conception globale qui est agréable à regarder et compatible avec tous les navigateurs. Ci-dessous vous trouverez quelques ressources que vous pouvez utiliser si vous êtes intéressé à en apprendre sur HTML5 ou si vous voulez rafraîchir votre mémoire sur cette langue de l’interface :

1. http://www.w3schools.com/html/
   Ce site Web peut être facilement considéré le top site pour apprendre les rudiments du HTML5. Tous les aspects de cette langue de front-end sont enseigné soigneusement par le biais de démos, permettant une mains sur l’expérience d’apprentissage.
2. https://developer.mozilla.org/en-US/LEARN/html Mozilla Firefox est réputé pour être le premier navigateur web. En outre, les gens plus à Mozilla sont grandes langues frontal teahing aux développeurs via des tutoriaux intéressants !
3. http://webdesign.tutsplus.com/categories/html Vous pouvez trouver ici un grand nombre de différents tutoriaux pour HTML5. Certains d'entre eux vous demandent de payer, mais beaucoup sont gratuits pour vous permettre de prendre un coup d’oeil à.
4. http://www.w3.org/TR/HTML5/ W3 est un véritable iconoclasme de l’internet. Pratiquement chaque web open source standard, normes que le world wide web s’exécute pratiquement sur, proviennent de ce site Web. Utiliser cette ressource pour obtenir des informations sur HTML5 mais aussi en savoir plus sur les mises à jour récentes concernant le langage de front-end !
5. https://Validator.w3.org/ Une fois que vous avez terminé l’ensemble du code HTML5 pour votre site Web, il est fortement conseillé de le mettre à travers ce validateur. Il dira si votre code remplit le W3 ouverture standards du web !

CSS3
CSS est un langage populaire frontend, la forme complète pour laquelle est Cascading Style Sheets. La dernière version de ce frontend langage s’appelle CSS3 qui est ce que vous utiliserez pour mettre en forme, positionner, style et construire autrement sur la base de la structure vous avez créé à l’aide de HTML5. Il en résulte un design web dans l’ensemble final qui est ordonnée, soignée et surtout constamment suit un style unique. Vous remarquerez une énorme baisse dans le chargement des moments après vous ajoutez CSS3 à votre site Web, et vous rendra plus facile pour les moteurs de recherche d’indexer aussi bien ! Voici une liste de ressources qui concerne CSS3 :

1. http://www.w3schools.com/CSS/ W3 est mentionné ici une fois de plus grâce à ses excellentes ressources qui vous enseignent sur CSS3 et ses différents sélecteurs, propriétés et valeurs.
2. https://developer.mozilla.org/en-US/Learn/CSS Mozilla est également mentionné une seconde fois grâce aux soins et la préoccupation qu’ils fournissent aux développeurs, leur permettant d’en savoir plus sur CSS3 et rester jusqu'à ce jour avec les dernières nouvelles relatives à la langue de front-end.
3. http://webdesign.tutsplus.com/categories/CSS Vous pouvez passer par la longue liste de tutoriels qui possède ce site Web et trouver beaucoup qui vous aideront. Quelques tutoriels devra être payée pour, mais d’autres peuvent être utilisés gratuitement.
4. http://www.w3.org/style/CSS/ Ce site est une excellente ressource qui vous permet de parfaire votre connaissance de CSS3. Tous les standards du web open source CSS3 proviennent de là !
5. https://Jigsaw.w3.org/css-validator/ Il serait une bonne idée d’utiliser ce validateur une fois que vous avez terminé le CSS3 pour ce site de codage. Cela vous aidera à voir si votre code respecte les standards du web qui ont été créés par W3

Conception sensible
L’internet utilisé pour être tout à fait compatible, il y a longtemps. Tous ceux qui ont utilisé l’internet a vu la même chose, parce que tout le monde utilisait à peu près le même genre d’écran. Ce n’est pas le cas aujourd'hui. Avec l’avènement et la prolifération de la technologie smartphone ainsi que l’avènement des ordinateurs tablettes ainsi que des portables de tailles différentes, s’est dégradée dans la conception web a naître. Un site Web qui est adapté pour un ordinateur portable n’est simplement pas approprié d’utiliser sur un smartphone, donc concepteurs web ont répondu à cela en inventant la conception sensible. Conception sensible est une technique par laquelle un web designer applique un ensemble de questions des médias dans le code CSS3 qui permettent de détecter le type d’écran il est visualisée sur le site Web d’et s’ajuster en conséquence.

Depuis l’ajout du réactif design pour un site Web exige la planification dès le tout premier morceau de code est écrit, vous avez vraiment besoin de décider avant le codage est amorcé sérieusement si vous voulez intégrer la conception globale de votre site Web de conception sensible ou pas. Si vous ne souhaitez pas vous inscrire, vous devrez ajouter certaines requêtes de support de CSS3. Dans les requêtes de ces médias, vous allez définir certains paramètres de votre site Internet suivre. Vous allez définir certaines règles selon laquelle le site est affichée sur un périphérique qui est d’une certaine taille, il va changer sa taille, la forme et la présentation générale à celui qui est utilisable dans l’appareil de cette taille. En outre, il est recommandé que vous incorporez conception liquide dans votre site Web, auquel cas le thème sensible s’appliquera aux résolutions entre celles définies par les paramètres aussi bien. Cela rendra votre site plus universel, comme les smartphones et tablettes ces jours viennent dans beaucoup de différentes formes et tailles.

Voici quelques excellentes ressources que vous pouvez utiliser pour connaître toutes les informations concernant tous les aspects de conception sensible, ou vous pouvez les utiliser pour rafraîchir votre mémoire, si vous connaissez la conception sensible mais besoin de quelque chose comme ces afin de rafraîchir la mémoire :

1. https://Developers.google.com/Web/Fundamentals/la... Utiliser cette ressource pour en savoir plus sur comment vous pouvez utiliser des requêtes de médias CSS3.
2. http://blog.froont.com/9-Basic-Principles-of-resp... Utilisez cet article pour en savoir plus sur les différences entre le réactif design et conception adaptative. Cela vous aidera à comprendre la conception sensible beaucoup mieux.
3. http://alistapart.com/article/fluidgrids Cet excellent blog est, en particulier, une excellente ressource parce qu’il parle d’un aspect très important du design réactif qui consiste à utiliser des grilles de fluide.

Cadre frontal réactif
Si vous souhaitez gagner du temps mais toujours les fonctionnalités de conception sensible, la meilleure chose que vous pouvez faire est prendre un peu d’un raccourci et intégrer ce qu’on appelle un cadre frontend sensible à la place. Cela vous permettra de gagner du temps, comme s’appliquant à un frontend framework est moins chronophage qu’intégrant conception sensible dans votre site Web. Cependant, gardez à l’esprit qu’en utilisant un cadre frontal réactif plutôt qu’une intégration complète de conception sensible dans le code de votre site web est un raccourci et viennent du raccourci tout à un prix. Dans ce cas, le prix est un plus long temps de chargement pour votre site Web. Aussi, n’oubliez pas que vous aurez besoin d’appliquer le même cadre de grille pour les CSS3 ainsi que HTML5.

Voici quelques-uns des cadres frontaux plus populaires :

1. http://GetBootstrap.com Bon pour les débutants, car il est facile à utiliser. Utilise une CAN qui contribue à réduire son impact sur les vitesses de chargement site !
2. http://lessframework.com/ Offre conception adaptative comme un elternative de conception sensible.
3. http://Foundation.ZURB.com/ Un cadre de grille frontale sensible dont la taille minuscule, facilitant le meilleurs temps de chargement !

JavaScript (vs CSS3)
Sur l’ensemble des langages de programmation et codage dans le monde, de loin l’un des plus populaires est une langue dite de JavaScript. JavaScript doit sa popularité d’abord sur le fait qu’il est si facile à utiliser. En outre, il est presque universellement lisible, un autre point qui fonctionne en sa faveur. Cependant, ces derniers temps JavaScript a vu sa domination menacée par la venue de CSS3, qui vous permet de créer des transitions animées entre les styles.

Ce qui suit est une liste de ressources que vous pouvez utiliser pour en savoir plus sur JavaScript ou pour rafraîchir la mémoire si vous appris à ce sujet, mais ne sais pas trop comment appliquer vos connaissances :

1. http://www.w3schools.com/js/ Idéal pour les débutants qui cherchent à commencer à apprendre JavaScript.
2. https://jQuery.com/ Pour ceux qui maintenant ont une certaine expérience concernant JavaScript et voulez commencer à utiliser le code à l’aide de bibliothèques telles que jQuery.
3. https://NodeJS.org/ Pour ceux que programmation de backend d’amour mais aussi veulent intégrer JavaScript dans leur travail.
4. https://angularjs.org/ Une excellente façon de combiner les forces de HTML et de JavaScript, vous permettant de profiter des deux langues frontend pour faire certains différent, nouveau et passionnant.

N’oubliez pas de consulter les ressources de suivi avant la première utilisation de CSS3 pour animer des éléments sur votre site Web en utilisant

JavaScript :

1. http://www.w3schools.com/CSS/css3_animations.asp
   Comme toujours, sur une liste de ressources pour vous aider à en savoir plus sur les langages de programmation, W3 schools doit simplement faire la coupe sans raison, que c’est la meilleure ressource là pour vous aider à apprendre sur la programmation et de ses différentes langues, en particulier CSS3.
2. https://developer.mozilla.org/en-US/docs/Web/GUID... Neuf échantillons que vous pouvez appliquer à votre propre site web designs !