Une introduction au développement Web

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Bienvenue sur le web.

Retour dans ma journée (OK, avant mon jour), la profession de développeur web était un peu un. Il s'est classé ci-dessous chiot haineux mais surtout Yankees ventilateur à l'échelle de l'honneur professionnel. Parce que de toutes les balises et la transparence des images d'espacement, nous avons utilisé, nous avons vu que les pirates brut sans aucun sens de l'esthétique.

Bien, nous pouvons encore faire défaut dans le sens esthétique, mais comme le Web a développé a donc la profession de développeur web. Ces jours, il ya d'innombrables outils que nous pouvons utiliser pour faire bien écrit, normes conformes, et belle (OK, peut-être pas que la dernière) les pages Web. La plupart des grands sites Web que vous utilisez aujourd'hui (éhontée: y compris celui-ci) sont construits à l'aide de ces outils.

Notre foule d'outils sur la fin du navigateur nous ont permis de créer des choses sur le web qui étaient inimaginables juste 10 il ya des années, tels que les réseaux sociaux d'innombrables prétendant être la meilleure façon de perdre votre temps, “chaud” startups technologiques prétendant avoir révolutionné quelque chose qui a déjà été fait mille fois, et clones Angry Birds prétendent être légèrement pire que l'original. Tout sur le Web. Alors peut-être ces outils ne sont pas allés à la plus grande des usages.

Alors, quels sont ces outils étonnants je vous ai parlé? Ouvrir la voie ont été (franchement étonnant) langues dites HTML5, CSS3, et JavaScript, qui je le surnom 3 cavaliers de l'webocalypse. Voici un aperçu de chacun:

HTML

HTML (bien connu comme HyperText Markup Language; vous pouvez voir pourquoi les gens qui ne veulent pas faire mauvaise impression il suffit d'utiliser l'acronyme) est l' langue utilisée pour la mise en pages Web. Faites un clic droit sur cette page et cliquez sur “Afficher la source”. C'est le code HTML que cette page utilise.

Essentiellement, HTML est un groupe de balises, où le navigateur interprète et expose. Par exemple, regarder ce code HTML:

<p>Je ne sais pas pour vous, mais j'aime la pression des touches.</p>

<br>

<bouton>Cliquez sur moi!</bouton>

Ce code HTML est texte enveloppé dans un paragraphe (la <p> tag commence un paragraphe, la </p> tag se termine un paragraphe.) Il ya un saut de ligne (la <br>) puis un bouton, vous pouvez cliquer avec le contenu de votre coeur. Votre navigateur étendre sur l'écran pour vous.

Donc, c'est très bien. Mais si vous n'avez rien, mais HTML, you get a webpage that looks like it came straight out of the 1990’s. Pas beaucoup de bon n'est sorti de cette décennie de toute façon (coiffures, musique, etc) Mais attendez! Il ya plus de!

CSS

Un autre acronyme. Été. CSS signifie Cascading Style Sheets, qui est un peu un abus de langage car ils ne sont pas vraiment pas en cascade (quoi que cela signifie… c'est un code informatique, pas une cascade!) CSS est le langue utilisée pour les pages Web de style. Ce, aussi, est interprété par votre navigateur.

CSS et HTML travailler ensemble – HTML permet la mise en page de la page, CSS lui donne son style. Imaginez construire une maison: HTML fournit le cadre en bois terne mais nécessaire, CSS ajoute les couleurs néon et des meubles insolites.

CSS est un langage assez simple: pour une balise HTML certain (comme un paragraphe), vous pouvez spécifier des valeurs pour les classes diverses de style. Votre navigateur lira le CSS et l'appliquer à toutes les balises HTML correspondant. Par exemple:

p {

couleur: rouge;

font-size: 16px;

}

Ainsi, chaque paragraphe (des trucs dans le code HTML <p> balises) devront rouge la police et la être 16 de pixels de taille. Si vous avez remarqué, ce sont quelques-uns des mêmes modèles que vous pouvez utiliser dans Microsoft Word et d'autres applications.

Alors maintenant, vos pages Web sont disposés et ils semblent très. Mais voici la chose: c'est tout ce qu'ils font. Ils ont juste assis là et semblent très. Ce qui est génial et tout, mais les utilisateurs du Web veulent plus. Ils veulent animations fantaisie. Ils veulent des pop-ups (OK, peut-être qu'ils l'ont fait en 2002, mais je m'égare.) Ils veulent boutons qui vont faire des choses lorsque vous cliquez sur les.

À propos de ce dernier – c'est une question. Vous pouvez faire une <bouton> en HTML, et vous pouvez cliquer dessus toute la semaine, mais il ne fait rien de si tôt. Si vous souhaitez que le bouton, oh je ne sais pas, déplacer votre éléphant à travers l'écran et d'attaquer quelque chose, alors vous avez besoin quelque chose de plus.

JavaScript

Javascript pas un acronyme, si vous vous demandez. Ils ont appelé cela le JavaScript car il semblait que le langage de programmation appelé Java, qui est étrange car il ne. De toute façon, Javascript un langage de programmation approprié qui provoque tous les effets dynamiques vous voyez sur le Web.

Comme tout langage de programmation, Javascript une série de commandes qui rendent les variables et les fonctions d'utilisation. La partie cool sur JavaScript (bien, aussi cool comme un langage de programmation peut être) est que vous pouvez accéder à ces éléments HTML (comme les paragraphes et les boutons) et styles CSS (comme la couleur et la taille de police) et modifiez-les. Regardez ce code:

alinéa peut = $('P');

paragraph.css('Color','Bleu');

Ce code JavaScript trouverez tous les paragraphes de la page – la $ signe indique au navigateur de trouver tous les éléments correspondant, et le 'p’ signifie qu'il doit choisir paragraphes (rappeler le <p> élément de HTML?) Ensuite, vous pouvez stocker les paragraphes à une variable, et la commande du navigateur pour changer leur style CSS de la couleur à bleu.

Ce que je trouve intéressant, (encore, cela est du point de vue d'un “webdev”) est de savoir comment élégamment les trois langues travaillent ensemble. Cette dernière ligne de JavaScript interagir avec le code HTML de la page et le CSS utilisé pour dénommer. Ce n'est pas comme ces langues ne sont que des différentes composantes de la même chose – ils sont l'un et le même, différentes faces de la même machine incroyable.

Son fascinant? Je pense que oui. Cela fait partie de la beauté de l'âme.

Publié par

Neel Mehta

Harvard College. Développeur Web. Parfois, philosophe. Baseball junkie.

Une réflexion sur «Une introduction au développement Web”

  1. wow a été surpris de découvrir que u l'a écrit, bon travail, il est une belle avance en cela pour moi avant que je vais les paquets de programmation web de scieur.

Laisser un commentaire