lundi 1 juin 2015

L'EverWeb 2 Rentrez dans les méandres du système ! Dans les profondeurs !

construction site web développement webdesign
Le coté fonctionnement ! Oui parce que le coté design et tout c'est bien gentil mais sans code, y a rien -_-

Relativisons quand même un petit peu, quand on fait un site web, il y a plusieurs "cotés", le design et les fonctionnalités entres autres. Et bien évidemment, les deux se complètent.

Parce qu'un site beau est bien plus attractif...
Et parce qu'un site qui fonctionne bien est bien plus agréable à utiliser...



Après la première partie de cette étape disponible ICI, place à un premier panoramique de la programmation !

DONC pour créer un site web, il existe 4 langages de base

Grossomodo vous avez quatre rôles :
  • Structure
  • Décoration
  • Interactivité
  • Stockage et traitement de données à travers le serveur

Et là, pour les plus forts d'entre vous, ils sont perdus à la dernière ligne…


ATTENTION ATTENION
La programmation nécessite des capacités en anglais, si vous ne les avez pas... vous pouvez DEJAles apprendre :) HEUREUSEMENT pour vous, c'est bien la seule chose sur laquelle je vous aiderais haha ha ha... quoi ? je suis pas crédible ? mince alors... ._.




Allez, en douceur !

Le HTML


est le langage essentiel à la construction d'un site web. C'est lui qui permet de faire la structure des pages, ce que nous verrons un peu plus tard.
En fait, sans lui, le navigateur ne peut juste rien afficher parce qu'il n'a rien du tout d'affichable !

Nous allons voir qu'il fonctionne en créant des espèces de zones rectangulaires, ou pas (non je plaisante pas, c'est vrai)… qui peuvent contenir des éléments et être contenues par d'autres zones. Vous verrez que ça ne s'appelle même pas fréquemment des zones mais plus couramment (même tout le temps) des boîtes ou divisions.

Vous allez pouvoir ajouter des images, du texte, des liens, etc

Vous vous apercevrez également que ces divisions, bien souvent n'apparaissent pas. C'est à dire qu'il n'y a pas de petites lignes pointillées pour les voir, vu que le design prend le dessus à l'affichage des pages.

Imaginez Facebook avec des lignes...
ça donne ça


facebook repères id et class html css affichés


Comment ça le bordel ? Remettriez vous en cause l'organisation d'un des plus gros sites du monde ?
Vous avez le droit ouai, parce que même eux ne font pas un code conforme... Il s'agit en fait de respecter certaines règles d'écriture du code. La conséquence de ce genre d'erreurs en HTML n'est pas toujours visible à l'écran et toutes les entreprises ne cherchent pas à faire 0 erreurs.

Alors à quoi bon suivre cette conformité à tout prix ? Pour éviter des problèmes si l'on utilise HTML avec d'autres langages par exemple. Mais nous re-verrons cela plus tard.


logo html 5










Les autres langages vont étendre les possibilités et permettre entre autres de modifier le contenu d'une page, d'enregistrer des données...

Le 2ème langage, c'est le CSS


Imaginez une page Wikipedia, sans code CSS, vous avez ça


wikipedia sans css



Ouuuuuuh l'horreur ! Ouai ! Sans code CSS, pas de décoration, pas de mise en page !
Figurez-vous que les sites HTML tout simples (que du HTML) étaient les premiers existants, la déco n'était à l'époque que du code bricolé ou juste… absente SAUF le design mis en place par le navigateur lui-même. Mais c'est plus beau en personnalisé.


Ensuite... Il est possible de rendre une page web un peu plus interactive de plusieurs façons. ça veut dire que votre site peut être dynamique ailleurs que lorsqu'on clique sur un bouton pour passer d'une page à l'autre !

Javascript Webvelup !


Et pour ça, on va dire que vous avez le choix... entre le Javascript, le JQuery et l'AJAX.





La différence est... multiple sinon ce serait pas marrant.
Le Javascript est la base des deux autres. Son rôle est de permettre de rendre plus vivante une page web.
Le JQuery est une évolution de la façon d'écrire le premier en plus court pour faire plus, ce qui est d'ailleurs leur devise "Write less to do more" ou littéralement pour les anglophobes "Écrire moins pour faire plus".
Quant à l'AJAX, c'est du Javascript qui va être capable de faire un lien entre le client qui affiche le site web en question, et le serveur qui héberge le site web en question, sans changer de page (et ça ça va être très fort ! :) ) 



Enfin, il existe un dernier langage, au fonctionnement un peu particulier.

Plutôt qu'un pavé, autant faire un schéma. Qui a dit fainéant ?


 schéma classique simplifié client androïd serveur php mysql

WATATA je comprends plus rien ! C'est quoi ce HTTP TRUc en plein milieu ?

Gniark ! Vous verrez plus tard ! Pendant ce temps là, moi, je peux me marrer :p

Le PHP



est un langage qui n'agit pas sur les smartphones, les PCs chez vous à la maison, etc mais sur les serveurs directement. Les esprits rapides l'auront compris, il permet d'aller bien au-delà du HTML et du CSS.

logo phpMais sachez que vous pouvez aussi bien faire du JS (donc du Ja... Ja... Javascript bien !) que du PHP. MAIS tout dépend de l'usage que vous souhaitez, de l'avancement de vos projets. Ne faites donc pas l'impasse complète dès le départ (Je vous vois venir  >< ) sur le PHP car c'est réellement une base qui a un bon nombre de forums et d'aides existantes sur le net.







SQL



logo sql

SQL permet le stockage de données dans des espèces de tableaux.
Ces derniers peuvent atteindre des tailles immenses, contenir beaucoup de formes de données, chiffres, textes, etc, ET... C'EST LÀ le point intéressant, peuvent être croisés entre eux  :)

SQL n'est pas directement utilisable dans une page web mais rassurez-vous, il suffira de passer par un  langage dont vous prendrez l'habitude de gré ou de force soit le PHP, soit le Javascript, soit ... etc




CHECKPOINT POINT DE SAUVEGARDE EverWeb

À la prochaine étape, vous affronterez le code d'une page ! L'EverWeb a beaucoup de secrets à cacher dans les profondeurs et son noyau !


Aucun commentaire:

Enregistrer un commentaire