[Powered by Google Translate] [Séminaire] [Développement Web: de l'idée à la mise en œuvre] [Ben Kuhn] [Billy Janitsch] [Université de Harvard] [C'est CS50] [CS50.TV] [Billy] Salut, je suis Billy et c'est Ben. >> [Ben] Salut. Nous allons parler de développement web aujourd'hui. [WebDev] [Billy Janitsch et Ben Kuhn] Un peu sur nous d'abord. Ben est en quelque sorte le type d'arrière-plan. Il fait les choses fonctionnent. Et puis je vais en faire et jolies. Je suis largement impliqué plus avant la fin de la conception de la mise en page genre de choses, et Ben, d'autre part, sait ce qu'il fait pour qu'il fonctionne sur des trucs d'arrière-plan. Ensemble, nous avons fait un certain nombre de choses. Par exemple, l'année dernière, nous avons travaillé sur Gimblium qui est un studio de développement de jeux en ligne. C'était notre projet final pour la classe, et depuis lors, nous avons fait Harvard classe qui est un cadre en ligne pour la navigation et des cours d'achat à Harvard. 

Nous allons commencer avec cette idée de notre site Web. Nous allons faire Facebook, mais pour les chats. Avant de vous rendre ce site, ne pas faire de ce site, car il n'est pas bon, mais nous allons l'utiliser comme un cadre et passer par le processus de la façon dont nous prenons cette idée et le transformer en un véritable site web, nous pouvons utiliser. Nous allons commencer par rompre le site vers le bas. Comme vous l'avez fait dans CS50, vous voulez réfléchir à ce que sont les éléments réels qui entrent dans ce site. Fondamentalement, il en tournant d'une idée qui est en quelque sorte d'un concept abstrait dans un vrai, chose tangible que vous pourriez faire. Nous commençons par poser quelques questions. Quel est ce site? Pourquoi faisons-nous cela? Qu'est-ce que cela va être utilisé? Ce genre de chose. Dans le cas de Facebook Chat, nous voulons essentiellement un site Web qui permet de chats réseau social à l'autre. L'idée étant qu'ils peuvent afficher sur les murs de l'autre, ils peuvent faire des commentaires, ce genre de chose. Et c'est là que nous entrons dans les composants fonctionnels. Nous avons maintenant ce genre de cadre de - nous avons des profils d'utilisateurs, nous avons des commentaires, et nous pouvons poster. Peut-être qu'un jour nous allons influent goûts et ce genre de chose. Et nous voulons sorte de donner la priorité à ces caractéristiques vont po Nous voulons dire que, d'accord, il est vraiment important que tout le monde a un profil et que tout le monde peut poster sur les murs de l'autre. Secondaire à cela, les commentaires seraient bien. Peut-être plus tard, nous influents aime. Donc, vous voulez avoir une idée de ce qui est fondamental pour votre projet et ce qui est une sorte de fonction plus générale qui pourrait être appliquée plus tard. Vous voulez avoir une sorte de liste spécifique à l'esprit, mais le projet que vous commencez avec ne va pas être le projet que vous avez terminé avec. En d'autres termes, les choses vont changer lorsque vous développez le site, et vous voulez laisser de la place pour cela. Je vais céder la parole à Ben qui va parler un peu de structure. 

[Ben] Je vais parler de la partie la plus technique du développement web. Rentrons sur certaines bases en premier. Lorsque vous faites une application web, la division principale que vous allez avoir est vous allez avoir des choses qui se passent dans le côté client - dire le code qui vous êtes navigateur prend de la place et le JavaScript, HTML, CSS choses. C'est tout ce que sur le côté client. Vous allez avoir un autre code qui s'exécute sur le côté serveur qui conserve la trace de toutes les données que les gens envoient à vous, décide à qui donner ce que, des trucs comme ça. C'est juste un peu de terminologie afin que vous les gars sont tous familiers avec ce que nous parlons. Au-delà de cette division, il est bon de penser à votre application web en termes de un couple de composants distincts. Lorsque vous faites le développement web l'une des choses que vous devriez toujours essayer de faire est de réduire la complexité. Le plus complexe de votre code est le plus il ya de chances de faire des bugs, plus il est difficile de changer plus tard. Donc, si vous pouvez diviser votre application en certains domaines fonctionnels distincts que voulez - et vous pouvez réduire la quantité de tri de la communication inter-zone - qui vous aideront beaucoup dans le long terme en matière de réduction des bugs. 

Pour être concret, généralement les gens se partagent une application web en - ceux-ci sont des sortes de mots à la mode maintenant, mais ils sont encore utiles. Vous pourriez avoir entendu des gens parler de modèles, vues et contrôleurs. Les modèles sont les données réelles que votre application va à traiter. Par exemple, dans votre chat Facebook, vos modèles seraient - vous auriez un modèle pour des postes similaires, et un modèle pour les profils utilisateur, des trucs comme ça. Vos points de vue sont la façon dont vous présentez ces données pour vos utilisateurs. Vous pourriez avoir une vue de la recherche à un seul poste et tous les commentaires et une vue différente pour votre mur qui a une liste de tous les postes qui sont dirigés vers vous, et une vue différente pour votre fil de nouvelles - des trucs comme ça. Enfin, vous avez les contrôleurs qui sont essentiellement quand les gens vous envoient les messages et vous faites des mises à jour de votre système back-end, incrémenter un tas de compteurs, et que ce soit. Ce sont vos contrôleurs. 

Je vais parler surtout de modèles. Vues sont techniquement pas difficile et la question est plus avec eux la conception Contrôleurs vont être spécifiques à ce que vous concevez. Mais il existe des techniques assez générales, vous pouvez utiliser pour rendre vos modèles plus agréable et plus facile à travailler que je pense sont très utiles. Cela est principalement va être sur la façon de traiter vos données des applications Web d'une manière agréable. Les principaux problèmes avec les modèles sont qu'ils vivent sur le client et le serveur et vous devez comprendre a) la façon de les obtenir - tous ceux qui sont pertinents - à partir du serveur vers le client, et b) la façon de les maintenir dans la synchro. Vos utilisateurs vont vouloir faire quelques mises à jour. Ils vont vouloir faire de nouveaux messages. Ils vont vouloir que les choses et d'autres choses si vous avez aimez. Ce sont les principaux défis techniques de traitement des modèles. La première chose que vous allez vouloir vous poser est ce type de données va dans ce modèle et ce type de requêtes que nous allons avoir à faire - c'est, comment allons-nous regarder les modèles? Pour votre chat par exemple Facebook, votre message va avoir un auteur qui lui est associé, un texte de message sur le mur, et un receveur de la poste de la paroi. Et puis, vous voudrez peut-être interroger que dans un tas de façons différentes. Vous voulez regarder par qui a écrit quel poste, par qui a reçu poster qui, peut-être par la date à laquelle ils ont été publiés. Mais si vous allez le faire par date, alors vous devez ajouter un autre champ de votre poste quand il a été effectivement publié. Ces deux facteurs - les données que vous souhaitez utiliser et comment vous voulez le voir - vous devriez penser à eux d'abord parce qu'ils dépendent les uns des autres, et ça va être plus difficile pour les ajouter plus tard. 

Il ya d'autres considérations. Quand vous pensez à la façon dont vous traitez avec des modèles sur le serveur ce que vous voulez regarder, c'est - vous voulez essentiellement à rendre le serveur aussi simple que possible. Faire des trucs sur le côté client est généralement beaucoup plus rapide si vous pouvez le faire uniquement sur le client sans faire toute sorte de demande de réseau. L'idée est de faire autant de requêtes que vous pouvez sur le client. Le seul problème avec cette est que si vous demandez toutes vos données au début alors que cela va prendre un certain temps à charger. Donc, l'idée est de trouver un juste milieu entre avoir suffisamment de données sur le client que vous pouvez faire plus de votre travail là, mais pas seulement chercher tout à la fois de sorte que vous obtenez des temps de chargement très lent au début. Par exemple, pour les données de votre chat vous souhaiterez probablement à chercher un tas de messages sur le mur récents. Vous ne voudriez pas aller chercher tous parce que cela pourrait revenir quelques années. Mais vous ne voulez pas aller les chercher un par un parce que ce serait introduire un lot de surcharge du réseau. 

Il est souvent très difficile - une fois que vous avez une base de données en cours - il est souvent très difficile de changer les données que vous avez en elle - c'est, ajouter une colonne de base de données nouvelle ou quelque chose - si un bonne stratégie est en fait juste à garder beaucoup de vos données dans un blob de texte - une goutte JSON - JSON étant JavaScript Object Notation - La raison qui est utile parce que vous pouvez ajouter de nouvelles propriétés à tous ces blobs JSON sans modifier votre base de données. Le seul inconvénient à cela est que si vous avez un tas de domaines que vous avez ajouté plus tard - comme caché dans ce JSON blob - alors il est plus difficile de les interroger à l'intérieur de la base de données. Par exemple, si vous plus tard - si vous aviez votre modèle de poste que nous avons discuté plus tôt avec juste l'auteur, le destinataire et le texte - vous pourriez aussi avoir une goutte de JSON et puis si vous voulez plus tard d'ajouter un champ de date vous n'auriez pas à changer votre base de données. Vous pouvez simplement ajouter des dates à tous les champs de texte. Et puis, vous seriez en mesure de regarder ceux sur le côté client, mais vous ne seriez pas en mesure de les interroger sur le côté serveur parce qu'il est caché à l'intérieur de ce texte. 

L'autre question que vous voulez penser la façon dont votre client et votre serveur vont communiquer. Vous souhaitez généralement de garder ce aussi simple que possible. Vous pouvez juste avoir comme une me-ce get demande de données, create-a-new-object chose, et une demande mise à jour-une-vieille-objet. Et ceux-ci seraient toutes différentes URL sur un serveur que vous - que le navigateur serait - vous pouvez utiliser les requêtes AJAX pour l'ensemble de ces et recevoir ou données de poste. Encore une fois, pour notre chat exemple Facebook, vous pourriez avoir cette URL pour obtenir un poste individuel, et vous auriez une URL pour créer un nouveau message sur le Mur et peut-être une URL pour le téléchargement de votre photo de profil, des trucs comme ça. Mais encore une fois, c'est une pré-chercher la plupart de vos données afin que vous n'avez pas à garder effectuer des requêtes réseau. Pour cette raison, vous voudrez peut-être de ne pas avoir cette demande get individuel pour un seul poste, et à la place vous voulez juste une demande d'obtention de la totalité du mur. Et puis, si vous essayez de trouver un équilibre parce que - ce va également dépendre de votre application. Parce que si vous vous attendez à ce que les gens ont seulement 10 ou 20 messages sur le mur ce sera très bien. Mais si vous vous attendez ils ont des milliers alors que la demande serait trop long, et vous pouvez ajouter un paramètre get-tous-les messages-car. 

Pour l'ensemble de ceux-ci vous allez probablement vouloir synchroniser vos données en JSON - JavaScript Object Notation. Quasiment toutes les langues traite JSON très bien. JQuery a cette fonction de getJSON agréable qui fera tout le travail pour vous. Et sur PHP, il ya aussi des fonctions très agréable de communication de JSON. Donc, c'est probablement le meilleur format pour l'envoi de vos modèles d'avant en arrière. 

Comme exemple de ce que nous avons parlé jusqu'à présent, voici un flux d'exemple pour votre chat application Facebook. Il commence avec votre navigateur demandant le site de l'URL de base. Le serveur enverrait probablement sur HTML statique et un peu de JavaScript et CSS. Il est généralement préférable de ne pas faire tout rendu sur le serveur. Vous ne voulez probablement pas - ce que le serveur ne fait pas, il va vers le bas la liste de messages sur le mur et générer du code HTML pour chacun d'eux et d'envoyer que plus. Il est généralement préférable de le faire sur le côté client, car sinon chaque fois que vous voulez redessiner quelque chose, vous devez faire une demande de serveur. Et qui vous donne très rapidement beaucoup de frais généraux. Il est généralement préférable juste pour expédier fait descendre statique HTML puis JavaScript et CSS qui vont faire le rendu sur le côté client. Dès que ça arrive, alors vous pouvez avoir - en JavaScript - vous pouvez faire des demandes pour les données de la paroi et des trucs comme ça, et après que le serveur est fondamentalement juste faire des requêtes de base de données et la vérification des autorisations. La seule chose importante est qu'il ne peut pas envoyer plus de certains utilisateurs d'autres messages sur le mur que vous n'êtes pas autorisé à voir. Il peut en principe être une couche d'accès très mince à la base de données, et puis tout d'un montre les données - tous les points de vue et des choses - celles-ci peuvent se produire dans votre navigateur, et puis quand vous voulez faire un post ou quelque chose vous suffit d'envoyer une autre demande. 

Il ya aussi des trucs de fantaisie que vous pouvez faire sur le dessus de cela. En matière d'information technique plus spécifique, développement dans la plaine JavaScript peut être un peu douloureux, il ya donc des bibliothèques et des outils qui vous aideront beaucoup avec cela. Je pense que vous avez tous probablement entendu parler de jQuery qui permet de faire le rendu HTML et la manipulation beaucoup plus facile - avoir beaucoup de fonctions de fantaisie pour en fondu, et de faire des animations énergique. Il ya aussi cette bibliothèque appelée Underscore.js. Il a beaucoup de fonctions utilitaires utiles, des choses que vous attendez d'avoir JavaScript qu'il ne marche pas vraiment - des choses comme traînant un tableau, suppression des doublons dans une liste, ou planer une liste de listes. Ceci est juste un petit échantillon de code. Soulignement a une tonne de ces belles fonctions que vous souhaitez, vous auriez tout le temps. 

Et puis il ya une plus bibliothèque que je voudrais passer un peu de temps sur appelé Backbone.js parce Backbone aide vraiment vous traitez avec des modèles sur le côté client et beaucoup de la confusion que cela peut causer. Backbone vous donne ce concept de modèles et des collections en JavaScript qui sont essentiellement exactement comme objets JavaScript dans les tableaux JavaScript, mais ils ont des événements lorsque vous modifiez leurs propriétés. Tout comme en JavaScript, vous pouvez avoir un événement quand un bouton est cliqué ou quelque chose ces modèles de Backbone et collections Backbone diffuseront des choses comme que quand ils changent. Cela signifie que vous ne pouvez écrire quelque chose comme ce bout de code ici - cela dit, chaque fois que vous ajoutez quelque chose à l'ensemble des postes vous redessinez le mur entier. Et ce serait dire lorsque le numéro d'un poste de goûts change, vous informez l'utilisateur que quelqu'un aimait leur poste. Ou chaque fois que les biens d'un poste change vous redessinez la poste. Des trucs comme ça vous fera économiser des tonnes de complexité, car sinon si vous n'avez pas un cadre comme celui-ci, puis à chaque fois dans votre code que vous changez parler d'un poste, vous auriez à vous rappeler d'appeler toutes les fonctions de rendu et des trucs comme ça, et si vous vouliez ajouter quelque chose de nouveau ce qui s'est passé chaque fois que vous avez modifié un poste que vous auriez à passer par tous les place dans votre Code que vous avez modifié un poste et d'ajouter que chose de nouveau. Un cadre comme cela va enlever beaucoup de communication entre-couche qui fait la complexité de votre code et difficile à maintenir. 

Il ya un peu de vue aussi. Je vais laisser la plupart de ce à Billy parce qu'ils sont techniquement pas très difficile. Utiliser jQuery pour votre point de vue. C'est pratiquement comme une nécessité à ce stade. Elle permet simplement de tout tellement plus facile. Il ya beaucoup de bibliothèques. Si vous avez compliqué éléments d'interface utilisateur, si vous voulez une chose de saisie semi-automatique ou comme un de ces multi-sélecteurs de fantaisie - si vous voulez quelque chose comme ça, vous devriez probablement chercher autour et vous pouvez trouver une bonne bibliothèque qui va faire ce que vous voulez. Billy expliquera plus sur les pièces effectivement difficiles de vues. En outre, comme une note côté, Backbone a quelques fonctionnalités pour faire communiquer vues bien avec les modèles - consulter la documentation pour l'ensemble de ces bibliothèques, en fait. Il suffit de regarder les docs. Ils sont très bien écrites et faciles à suivre. En général, vous pouvez très bien juste Google si vous avez des problèmes. Il ya beaucoup de personnes qui les utilisent. Je pense que c'est comme une note finale. 

Il ya aussi des choses plus avancées que vous pouvez faire si vous cherchez à faire de votre application web supplémentaire génial. Vous pouvez le faire - la nouvelle spécification HTML5 a beaucoup de choses de fantaisie que vous pouvez faire. Le stockage local - qui est que vous pouvez stocker des données dans le navigateur - plutôt que d'avoir à revenir en arrière et lire attentivement le serveur pour tout, vous pouvez garder un peu de sur le client et qui permet même des gens - dans certains cas, il peut même vous permettre d'utiliser le mode hors connexion web. Il ya cette chose appelée websockets qui sont un autre type de communication réseau où au lieu de simplement vous faites une demande, vous obtenez la réponse et vous avez terminé, vous gardez ouvrir une connexion au serveur et si vous pouvez faire des choses comme mises à jour en temps réel. Donc, si vous essayez de faire une application de chat, vous pouvez utiliser websockets de communiquer dans les deux sens de sorte que vous n'auriez pas à maintenir la demande, "Oh, serveur, quelqu'un at-il m'envoyer une conversation?" toutes les 10 secondes ou quelque chose. Il ya aussi une fonction de HTML5 intéressant où vous pouvez faire ressembler l'URL de la page est en train de changer, sans jamais avoir à réellement recharger. Vous pouvez utiliser les boutons avant et en arrière sans faire un tas de requêtes réseau. Des trucs comme ça est vraiment utile en termes de ce qui rend rapide mais aussi fonctionner comme une application web doit. 

Il ya aussi ce qu'on appelle CoffeeScript. CoffeeScript est une langue différente, en fait, qui compile jusqu'à JavaScript. Vous souhaitez écrire tout le code en CoffeeScript, puis d'exécuter ce compilateur, et il crache un fichier JavaScript que vous pouvez inclure dans votre page Web. La raison pour laquelle CoffeeScript est agréable parce qu'il se débarrasse de beaucoup de cas étranges que Javascript est égal où égaux, et est égal à égal font des choses différentes, ou aiment - il a une syntaxe plus agréable de traiter avec des tableaux et des fonctions. Il s'agit d'un petit extrait de CoffeeScript qui produit une liste de toutes les places à partir de 10 ^ 2-1 ^ 2 dans l'ordre inverse. Comme vous pouvez le voir, CoffeeScript permet souvent que vous exprimez dans une ligne ce qui prendra 5 lignes de JavaScript. Il peut rendre les choses beaucoup plus facile. C'est un peu de la nouvelle syntaxe à apprendre au début, mais il va certainement vous rendre plus productif sur le long terme. 

Vous pouvez également utiliser d'autres langues sur le serveur de PHP - langues comme Ruby, Python, ou il ya même un projet appelé node.js qui vous permettra d'utiliser JavaScript sur le serveur. Personnellement, j'ai vraiment, vraiment déteste PHP. Je ne jouis pas de travailler avec elle. Si vous aussi, vous pensez qu'il s'agit d'une Cluge terrible d'une langue, alors vous pouvez utiliser l'une de ces place. En général, si vous voulez faire quelque chose et vous ne savez pas vraiment comment vous feriez, il suffit de chercher sur Internet. Il ya des tonnes et des tonnes de ressources, en particulier sur - StackOverflow est un grand. C'est ce site où les programmeurs se poser des questions. Vous avez peut-être exécuter en si vous rencontrez des problèmes sur des ensembles de problèmes de CS50. Et il ya des tonnes de bibliothèques pour faire à peu près tout ce que vous voulez. Si vous voulez faire quelque chose et vous ne savez pas comment faire, Ne présumez pas que c'est impossible. Il suffit de regarder autour et vous trouverez peut-être quelques bonnes ressources. 

En général conclure, les principaux plats à emporter sont à garder les choses simples. Le plus complexe de votre code est au début et plus vous essayez de faire des choses extravagantes, plus il faudra pour obtenir quelque chose de réellement fonctionnelle et le plus il sera difficile à changer plus tard. Donc, faire des choses que les muets, moyen facile d'abord. Pour aller de pair avec cela, n'ayez pas peur de jeter l'ancien code ou de le nettoyer un lot. En général, une fois que vous avez fait quelque chose de travail, il est beaucoup plus facile de penser que lorsque vous êtes encore dans les premiers stades comment puis-je mettre tout cela ensemble. Il est préférable de faire la conception la plus stupide possible qui fonctionne puis l'améliorer itérativement que d'essayer de faire les choses la première fois. En termes de répartition client-serveur, essayer de garder votre serveur très simple - juste une base de données et certains authentification et ne font pas de travail là-bas. Faire tous vos trucs compliqués sur le côté client dans le navigateur en JavaScript autant que vous le pouvez. Regardez autour de vous pour les bibliothèques qui font que votre vie meilleure. Toujours mieux d'utiliser le code que quelqu'un d'autre a écrit si vous - et pas d'écrire vous-même. Il ya beaucoup de choses sur Internet. Google est votre meilleur ami. Google est le meilleur ami du programmeur. Oui, certainement ne pas avoir peur de regarder autour de trucs. Très bien. Et plus de Billy. 

[Billy] En fait, avant de commencer avec des trucs de conception, Quelqu'un at-il des questions pour Ben sur tout ce dont il a parlé? Très bien. Encore une fois, nous savons si quelque chose n'est pas clair ou si vous souhaitez nous d'aller sur quelque chose d'un peu plus. Je vais un peu de recul et de parler des parties les plus fondamentaux de la conception. Ben mentionné le modèle appelé - désolé, le modèle le système de vue du contrôleur qui est une sorte de l'aspect technique, donc je vais chercher à vue spécifiquement, et je vais commencer par la façon dont vous souhaitez concevoir une vue qui semble intéressante. Voici une sorte de modèle très basique pour notre chat Facebook. Je pense qu'il ya certains principes de base dans la conception de l'interface utilisateur moderne que sont la peine de ramasser. Vous pouvez remarquer qu'il ya beaucoup d'espace blanc sur toute la page, beaucoup de place pour les choses. Ne vous sentez pas comme vous devez écraser les choses dans une page. Vous voulez laisser beaucoup d'espace ouvert, et si vous allez à presque n'importe quel site web moderne vous verrez qu'il ya blanc partout. Il ya blanc dans des endroits qu'on ne s'attendrait pas. Vous avez cette palette de couleurs, et il est sage au début de choisir une palette de couleurs que vous allez travailler et se développer. Vous avez également - il permet de choisir une police de caractères, et de cette façon vous êtes sorte de travailler avec ces principes fondamentaux concrets de conception. Vous avez votre type, vous avez vos couleurs, et puis vous pouvez sorte de s'adapter à tout le reste comme nécessaire. Donc, comme je l'ai dit, avec votre schéma de couleurs que vous souhaitez utiliser les couleurs audacieuses de votre palette de couleurs avec parcimonie. Têtes sont gentils. Les boutons sont bien d'avoir de très gros, des couleurs flashy. Mais en général, si vous avez un site web qui a des couleurs partout, tout ce que vous regarder en face, il semble juste encombré, et ce n'est pas bon. Vous souhaitez utiliser généralement des couleurs claires. Essayez, encore une fois, choisir un jeu de couleurs assez cohérente. Vous pouvez avoir ces petites éclaboussures de beaucoup de couleurs - qui peut regarder assez agréable, mais vous voulez les utiliser assez peu. 

Comme je l'ai dit, vous voulez être minime. Moins est presque toujours plus. Si vous pouvez afficher quelque chose ou pas afficher quelque chose, et vous êtes un peu incertain s'il doit y avoir par défaut - probablement vous êtes mieux de le laisser sortir. Vous pouvez toujours ajouter plus tard. Ouais, garder les choses simples. Mais le plus important, vous voulez examiner plusieurs modèles. Ne pensez pas que lorsque vous faites un site, vous avez dans votre tête que vous allez rendre le site d'une certaine manière, et ça va ressembler à ceci. Il va avoir la tête bleue en haut et la barre latérale bleue puis le jaune sous-entête chose. Vous voulez faire plusieurs modèles. Vous pouvez - si vous êtes bon avec Photo Shop, vous pouvez ouvrir que vous et sorte de concevoir un site Web que vous voulez qu'il regarde. Sinon, vous pouvez simplement utiliser le stylo et le papier, mais gratter plusieurs modèles. Vous voulez avoir essentiellement une mise en place où vous avez beaucoup de modèles différents, et si l'on se retrouve à travailler, alors c'est très bien. Si on finit par échouer, alors vous avez toujours un autre à qui s'adresser. En général, ne se sentent pas comme vous devriez être contraint à ce que la conception vous décidez d'abord sur. Les dessins sont très variables, et une partie de l'importance du modèle vue du contrôleur système est que vous pouvez échanger dans et hors différents points de vue que vous souhaitez. Vous pouvez influencer les données d'une manière, et de décider ensuite, oh, en fait, qui ne fonctionne pas très bien. Je pense que c'est une sorte de trop compliqué ou il ya une partie ici qui n'est pas vraiment travailler, donc je vais juste abandonner totalement ce point de vue et d'échange dans un environnement totalement nouveau. Nous pouvons toujours utiliser les anciens modèles et les anciens contrôleurs. Nous pouvons tout faire sur le serveur et le client comme nous le ferions avant. Mais la vague actuelle des données que affichée va être légèrement différente. 

En ce qui concerne la mise en œuvre effectivement la conception que vous voulez, une fois que vous avez quelques dessins esquissés sur le papier ou sur le magasin de photo ou autre chose, il ya un certain nombre d'outils qui sont mis à votre disposition. La première vous êtes très familier avec ce qui est votre HTML, PHP, ou quel que soit langue que vous utilisez juste pour coder les pages statiques de votre site. Vous avez beaucoup travaillé avec HTML qui vous donne genre de ces mots-clés que vous pouvez mettre les choses en et, fondamentalement, c'est une façon d'organiser votre contenu. Par exemple, vous avez la tête là-bas, de sorte que vous allez avoir une balise d'en-tête, et il va avoir un texte à l'intérieur de celui-ci qui va probablement être dans un autre tag. Ensuite, vous avez une barre latérale peut-être avec quelques différents liens, et ceux qui vont tous être en séparer les tags. Ainsi, fondamentalement HTML à son coeur est une manière de diviser la page comment vous voulez finalement à formater. Encore une fois, vous avez vu ça avant. Vous êtes très à l'aise de travailler avec elle maintenant étant donné que vous avez fait la dernière pset espérons-le, ce qui devrait poser aucun problème. 

Ensuite, vous avez CSS qui gère essentiellement tous les aspects statiques de conception. Il gère l'ensemble des couleurs, l'ensemble de la position de différents éléments, où ils vont par rapport à l'autre, comment ils sont gros, les différents types de positionnements que vous auriez - en d'autres termes, vous pouvez avoir des choses fixes de sorte que lorsque vous faites défiler ils restent, ou vous pouvez avoir des choses par rapport aux autres éléments. Tout ce genre de choses est en CSS. En outre, vous pouvez faire des décorations différentes, vous pouvez avoir des couleurs de texte, des effets de texte, tout ce genre de trucs. Ben a donné un très bon séminaire sur ce dernier week-end, et je voudrais donc absolument vérifier que si vous prévoyez faire des choses de fantaisie avec CSS. CSS3 est en fait la nouvelle version de CSS, et il peut faire toutes sortes de choses vraiment sympa. Il peut faire des dégradés, vous pouvez avoir de belles, des coins arrondis, vous pouvez faire toutes sortes de choses pour rendre votre site plus moderne et fantaisie. 

L'outil suivant que JavaScript et jQuery qui Ben a parlé un peu, mais je vais un peu plus loin dans. JavaScript que vous avez travaillé avec elle un peu, ou au moins vu dans la conférence, est une sorte de façon de faire des choses de façon dynamique en HTML. HTML, comme vous le savez, est statique, donc une fois que vous avez HTML vous ne pouvez pas le modifier. Mais JavaScript, à certains égards, est une façon d'être en mesure de modifier HTML. Donc, vous pouvez le faire, et c'est très bien, mais JavaScript est vraiment une douleur à travailler avec. Il ya si longtemps et obtus et à faire même les choses les plus simples exige beaucoup de lignes de JavaScript. Donc, jQuery est essentiellement une bibliothèque JavaScript qui simplifie tout cela. Il dit, d'accord, si vous voulez avoir une boîte carrée venir de la gauche et se fondre dans la page de sorte qu'il est dans le milieu, en JavaScript qui prendrait - Je ne sais pas, une centaine de lignes à faire, et ce serait une douleur, et vous en sortez haïr tout ce qui concerne la programmation web. JQuery vous avez essentiellement l'élément-point-fade-in, ou quelque chose comme ça. Fonctions Donc, très, très simples qui vous permettront de faire toutes sortes d'animations sympas et ce genre de chose. L'autre chose que ces deux sont vraiment bons pour est juste de faire les choses dynamiques avec ce site. Donc, plutôt que de simplement avoir votre page HTML - qui affiche des données mais ne pas réellement faire quelque chose - JavaScript et jQuery vous permettra d'avoir des boutons que vous pouvez cliquer sur, et vous pouvez faire glisser des éléments et de réapprovisionnement eux et les trier, et avoir de nouveaux éléments ajouté ou supprimé. Vous pouvez ajouter-delete, ce genre de chose. Donc, jQuery fait des tonnes de choses cool. Et Vipul est effectivement donner un séminaire sur elle aujourd'hui, je crois, à 5 heures, donc si vous pouvez rester pour longtemps, qui - 5 ou 4? Quatre. Désolé. C'est en fait juste après cela, donc je recommande rester dans les parages pour lui si vous le pouvez. JQuery est super, super utile, et vous serez en mesure de faire beaucoup de choses vraiment sympa avec elle pour à peu près n'importe quel projet de développement web. 

Maintenant, je vais entrer dans une sorte de distinction. J'ai parlé essentiellement sur l'interface utilisateur. L'interface utilisateur est juste la conception du site. Mais il ya un autre concept de genre qui est l'expérience de l'utilisateur. Les deux sont très différents. L'interface est vraiment partie de l'expérience. En d'autres termes, quand vous allez à un site, vous regardez l'interface. Cela fait partie de la façon dont vous ressentez le site. Mais l'expérience utilisateur est plus que cela. L'expérience utilisateur est sur ce que l'impression que l'utilisateur obtient à partir de votre site est. Donc, bien évidemment, de l'interface est une partie de cela. Et c'est certainement un élément nécessaire, mais ce n'est pas suffisant. En d'autres termes, si vous avez une interface agréable, et c'est joli et coloré et tout cela, c'est très bien, mais si l'utilisateur accède à votre site, voit une jolie mise en page et il est confus par tout, n'a aucune idée de la façon de faire quelque chose, alors il est évident que vous avez fait un très pauvre site. C'est en quelque sorte où l'expérience de l'utilisateur entre en jeu. Je vais parler un peu de conception UX - UX est l'abréviation de l'expérience de l'utilisateur - et la nature de la façon dont vous pouvez vous assurer que vous avez une bonne expérience utilisateur. Le premier point est que vous pouvez concevoir un site Web où un utilisateur peut faire tout ce qui que l'utilisateur souhaite éventuellement. Mais si l'utilisateur ne peut pas comprendre comment faire ces choses - en d'autres termes, si l'utilisateur ne possède pas une bonne idée quand ils vont à votre site d', "Oh, si je veux mettre à jour mon profil, puis je clique sur ce bouton, ou si je veux poster sur le mur de quelqu'un, alors je vais à leur mur et cliquez sur une petite boîte. " Si l'utilisateur ne sait pas cela, alors vous avez effectivement pas fait mis en œuvre correctement cette fonctionnalité. Une partie de la mise en œuvre d'une fonctionnalité que les utilisateurs sont effectivement en mesure de l'utiliser. Et il peut être frustrant - vous pourriez faire un site, et il peut faire toutes sortes de des choses merveilleuses, mais alors vous aurez des gens le testent et disent: «Il ne peut pas le faire. Pourquoi ne peut-il pas le faire? "Et vous dire de nouveau à eux, "Eh bien, il peut. Vous avez juste à aller dans le menu 7 déroulante sur cette obscure page qui ne se trouve par un lien dans le coin en bas à droite à la main "ou quelque chose. De toute évidence, vous ne voulez pas que. Vous voulez qu'il soit clair à vos utilisateurs ce qu'ils sont censés faire, et il devrait être simple et intuitive pour eux. 

Une autre chose que vous voulez essayer de faire est, si quelqu'un va aller à votre site et 9 fois sur 10 font l'action A, et 1 fois sur 10 font l'action B, vous voulez probablement concentrer leur expérience sur l'action A. En d'autres termes, vous voulez faire comment très, très clair à faire A. A devrait être l'avant-centre - aller sur le site, le voir, oh, c'est juste là. Tandis que B est évident que vous voulez être clair, mais vous pouvez laisser un peu plus dans le fond. David donne un bon exemple de ce en conférence, qui est le système Boston T. Quand vous allez à Boston T et vous voulez acheter un billet, vous devez obtenir en 5 menus avant que vous pouvez réellement acheter un billet pour une valeur de 2 $ 2,50 $ qui est de savoir combien il faut prendre le métro dans une direction. C'est un problème parce que la plupart des gens qui sont dans le métro probablement juste envie d'aller à un endroit, acheter leur billet, obtenir tout de suite. Il n'a pas de sens qu'ils doivent passer par beaucoup de différents menus pour y arriver. Une meilleure expérience utilisateur serait un bouton rapide sur la première page qui dit simplement, «acheter un billet aller-simple», et qui mettrait en tout de la norme valeurs par défaut, et puis si quelqu'un veut acheter un billet différent de celui, ils encore, bien sûr, ont la possibilité, mais vous avez optimisé pour le cas d'utilisation commune qui est vraiment important. Vous pouvez voir des exemples de ce sur Facebook, non? Si vous allez à Facebook et vous souhaitez publier un statut, c'est tout en haut qui est ce que vous voulez souvent faire. Dès que vous entrez dans la page, vous pouvez faire des choses les plus communes que vous voulez faire. Si vous voulez faire les choses un peu plus complexes comme, dis que je veux aller sur le mur de mon ami et poster une image sur elle - que je vais veux faire souvent, mais pas aussi souvent que l'affichage de mises à jour d'état - donc dans ce cas, je tape son nom dans la case du haut, cliquez sur leur profil, et puis, toujours, il est tout en haut il une fois que j'ai appris à leur profil. Encore une fois, j'ai optimisé en priorité pour les cas les à usage commun le plus. 

Une autre chose importante est que, souvent, les gens vont sorte de tenter de contourner ce en disant, d'accord, alors je l'ai fait sur le site et les gens trouvent déroutant, et c'est un problème, non? Évidemment, je ne veux pas que les gens soient déconcertés par le contenu de mon site. Mais la façon de résoudre ce n'est pas d'avoir quelque chose de pop up disant: bon, je vais vous apprendre à utiliser ce site. Étape 1 - cliquez sur ce bouton. Étape 2 - aller ici. Bien sûr, c'est un moyen de contourner cela - c'est une façon que vous pouvez dire aux gens quoi faire, mais il est vraiment pas la meilleure façon. Si je vais à un site web et tout à coup je suis bombardé avec ce tutoriel qui est de me dire ce qu'il faut faire et où aller et tout ça, ce n'est pas amusant pour moi. Ce n'est pas une bonne expérience pour moi. C'est une sorte de douleur. Je veux juste commencer à faire des trucs. Les gens vont fermer leur boîte de dialogue, ou sortir du tutoriel, ne pas savoir quoi faire, et ensuite se plaindre parce vous leur avez pas dit ce qu'il faut faire. La façon de résoudre ce n'est pas en donnant toute sorte de tutoriel ou directions - quelque chose comme ça. Autant que vous pouvez l'éviter, vous voulez vraiment montrer à l'utilisateur ce qu'il faut faire seulement par la nature de la façon dont le site est aménagé. En d'autres termes, si je vais à Facebook sans se connecter, la première chose que je vois sur la page principale - c'est une petite boîte de connexion. Donc, duh. Je dois vous connecter C'est juste là. Considérant que, si je suis allé à Facebook et j'ai eu à cliquer sur un petit lien en bas qui a dit: «Connectez-vous» et le reste de la page était juste une sorte d'image ou de quelque chose, Je ne sais pas vraiment quoi faire, non? Je serais confus. Ainsi, il pourrait me dire d'aller là-bas et cliquez sur le bouton pour vous connecter, ou le bouton de connexion pourrait être tout en haut où je vais le voir. Vous voulez toujours être montrant à l'utilisateur ce qu'il faut faire, et qui devrait être inhérente à la page elle-même. 

Quand vous pensez à des conceptions et moqueur des différentes façons de exprimant votre site, vous voulez vraiment penser à ce que les utilisateurs vont être faites et comment vous pouvez leur montrer ce qu'il faut faire. Une dernière chose est le test est vraiment, vraiment important. Il est bon de trouver quelqu'un - demander à un ami, demandez à quelqu'un que vous ne connaissez même pas - qui n'a jamais vu le site avant d'utiliser le site. Parce que vous avez travaillé sur le site pendant des heures, vous avez été à regarder lui, et vous savez exactement ce qu'il faut faire si évidemment vous allez être tester l' choses que vous avez travaillé et que vous savez le travail. Mais si quelqu'un arrive et utilise le site qui n'a jamais utilisé auparavant, c'est une expérience unique parce que vous avez quelqu'un qui n'a aucune connaissance préalable du site, il en va, donc ils vont avoir effectivement aucune idée de ce qu'il faut faire ou ce genre de cas d'utilisation sont présents pour eux. C'est très bien. C'est unique car ils sont essentiellement une personne avec un blanc pour un esprit. Ils peuvent vous dire si quelque chose est ambiguë ou obscure. Ils peuvent vous donner une idée de ce que précisément l'expérience utilisateur de votre site est. Il peut être très difficile de dire que vous-même, il faut absolument que je vous encourage que vous développez vos projets - si vous faites des projets sur le Web - d'amener les gens à utiliser le site dès que vous avez une sorte de démonstration fonctionnelle. 

Maintenant, je vais parler un peu plus sur la façon de gérer un projet de développement web. Nous sommes allés sur la façon dont vous pouvez faire le côté arrière-technique, comment vous pouvez concevoir un site vraiment bien, et c'est très bien si vous travaillez par vous-même, mais - même si vous travaillez par vous-même et surtout si vous travaillez dans une équipe, gestion de projet devient un gros problème. Vous avez entendu parler de genre de gestion de projet sous différentes formes depuis l'école primaire quand on vous a dit le travail de groupe. Vous devez coopérer, communiquer, tout cela. Cela est d'autant toujours là, mais il ya des circonstances uniques avec l'informatique que vous voulez être au courant de, et vous voulez vous assurer que vous gérez bien. Je parlerai d'abord un peu de l'équipe que vous serez po Il est très important de choisir la bonne taille d'une équipe pour travailler sur, et dans votre projet final je pense que vous avez la possibilité de choisir entre 1 et 4 personnes si je suis correct. Vous voulez vous assurer que vous n'êtes pas seulement le choix du nombre de personnes que vous souhaitez travailler avec, car ils sont vos amis. Vous voulez choisir une équipe qui est une bonne taille et qui faire le travail. Il ya un arrêt de commerce à avoir plus de gens par rapport à moins de personnes. Si vous avez plus de gens, évidemment plus de travail peut être fait parce que vous avez beaucoup de gens, beaucoup de code, beaucoup d'idées, et c'est génial. Mais il faut aussi beaucoup plus de gestion et de beaucoup plus de communication. En d'autres termes, si vous avez 4 personnes travaillant sur le même projet et ils sont tous la modification du même code, plus ou moins tous type de besoin de savoir ce qui se passe si il vous oblige - si vous ajoutez une nouvelle fonction que vous avez sorte de dire aux gens - je suis en ajoutant ce, Je change ce de cette manière - en particulier si vous entrez dans les choses vraiment profonde comme les modèles et les contrôleurs qui vont effectivement influencer le fonctionnement du site. Toute l'équipe doit être conscient de cela, vous devez donc vous assurer que vous n'êtes pas le choix d'un trop grand équipe qui va être difficile de faire cette communication. Vous ne voulez pas choisir une petite équipe assez que vous n'allez pas être capable de communiquer parce que c'est vous. 

Une autre chose à considérer est le bilan de l'endroit où les compétences des personnes sont. C'est super si vous êtes tous très bons programmeurs. Mais si vous êtes tous les back-end, alors votre site ne va pas chercher très bonne parce que vous avez cette grande base de données, et il fait des requêtes de recherche ultra-rapide - ce qui est bien - mais quand vous allez à elle, c'est comme un site de 1990 rouge et bleu partout, et ce n'est pas bon non plus. Notez que Ben et moi à travailler en équipe sont très bien parce que je suis une sorte de plus dans l'extrémité avant, nous avons tous deux d'interagir dans le milieu de gamme, et Ben est vraiment bon avec des trucs d'arrière-plan, si cela fonctionne vraiment bien parce que nous pouvons concevoir n'importe quel site et essentiellement les trous dans ce site qui doivent être rempli peut être rempli par l'un de nous, ou peut-être les deux. Vous voulez vous assurer qu'il n'y a pas de trous dans votre équipe. C'est correct si il ya un peu de chevauchement. En d'autres termes, si vous avez deux personnes qui sont à la fois bon et back-end, qui peut être bien aussi parce qu'ils peuvent s'entraider avec des problèmes qu'ils ont. Il peut être un problème si vous avez seulement une personne qui est responsable d'une certaine chose et ils courent un problème, de sorte que vous ne voulez avoir un peu de chevauchement mais vous voulez surtout faire en sorte que tous les trous possibles sont remplis. 

La dernière chose - et cela devrait être évident, mais il est souvent pas. Vous voulez vraiment être en s'amusant. Le point de ce projet final CS50 et souvent le point de développement web en général est pas juste faire un travail parce qu'il a besoin de faire. Vous voulez vraiment être amusant, et vous voulez être faire quelque chose C'est vous motiver à travailler. Si ce que vous faites est une douleur de s'asseoir et de travailler, alors vous n'êtes pas choisir le bon projet. Vous voulez choisir quelque chose que vous trouvez intéressants, vous voulez vraiment voir le résultat, vous êtes excité lorsque vous obtenez une nouvelle idée sur quelque chose que vous pourriez faire - alors il ya toutes sortes de projets là que je suis sûr vous pouvez trouver - tout le monde a quelque chose qui serait vraiment intriguer les si ils font un projet basé sur le Web. Je vais le dire encore maintenant. Si votre projet semble comme une douleur et vous ne voulez pas travailler, choisir un autre projet. Choisissez quelque chose qui vous inspire vraiment. 

Ben mentionné ce concept de l'itération un peu, et je veux aller sur un peu. Il est vraiment important de travailler par à-coups lorsque vous obtenez quelque chose de fonctionnel. Il peut être très bien si vous avez ce plan d'un site qui va faire A, B, et C, et finalement il va y arriver. Mais vous êtes coincé dans cette phase où vous travaillez sur elle et de travailler sur elle, mais rien ne se fait. Vous n'avez rien à voir et, une chose fonctionnelle tangible. Ce que vous voulez vraiment faire autant qu'il semble une sorte de douleur parfois travailler sur quelque chose et puis sorte de couronner le tout afin qu'il soit au moins à un niveau stable, en cours d'exécution la version, même si elle ne possède pas toutes les fonctionnalités que vous souhaitez. Et peut-être il ya quelques fonctionnalités que vous voulez vraiment ajouter, mais vous ne pouvez pas parce que vous voulez pour obtenir ce site à un plan fonctionnel. Et si vous voulez avoir le genre de tout le processus de développement ressemble à ça. Vous voulez commencer quelque part fonctionnelle - ou essentiellement commencer avec rien - mais vous voulez arriver à quelque chose très simple et fonctionnelle. Et puis, faire une sorte de saut et obtenir de nouveau quelque part fonctionnelle. Vous construisez lentement, et il pourrait aller un peu plus lent que ne le feraient autrement, mais dans le long terme si vous êtes constamment coincé dans cette phase de terrain d'où vous n'avez pas réellement quoi que ce soit de travail, il peut être une très grosse frustration pour travailler sur votre projet, car vous êtes toujours si près de le faire marcher, et il n'a jamais réellement travailler. Vous voulez travailler dans ces poussées fonctionnelles, et vous aussi vous voulez faire un peu de réflexion après chacun d'eux. En d'autres termes, une fois que vous êtes à un point où le site est travaille maintenant - il n'a pas encore tout ce que vous voulez, mais il fait des choses - vous voulez penser, d'accord, c'est ce site réalisation de l'objectif que je me suis mis à faire? En d'autres termes, si le site va faire X, est ce que j'ai de travailler dans le sens de X? Sont toutes les fonctionnalités que je voulais il? Et d'ailleurs, il est au service de l'objectif général que je veux? Si vous trouvez que votre site est en train de virer dans une direction différente ou peut-être les choses juste un peu ne fonctionnent pas, il peut être temps de changer de vitesse un peu. En d'autres termes, il est utile d'examiner - il vaut la peine de jeter des idées si nécessaire et compte tenu de ce que je travaille vraiment à ce que je veux être. 

Je crois que c'est mon deuxième point. N'ayez pas peur d'abandonner les idées. Juste parce que vous avez passé beaucoup d'heures de travail sur une fonction et a finalement obtenu ce travail, mais il est vraiment pas aller si bien - comme ce n'est pas utile ou les utilisateurs ont du mal à utiliser - ce genre de chose - ne pas avoir peur de le jeter. Il suce que vous avez passé beaucoup de temps à travailler dessus, mais finalement vous ne voulez pas un site qui est de nature mis en place par ces pièces qui genre de travail, mais ne sont pas que bien servi. En outre, ne pas avoir peur d'embrasser de nouvelles idées. Si quelqu'un arrive et dit, hey, ce site a l'air vraiment cool, mais ne serait-il même être grande si elle aussi a fait cela? Juste parce que c'est quelque chose que vous n'aviez pas l'intention et quelque chose qui n'est pas dans votre spécifications, quelque chose que vous n'avez pas prévu de faire, ne pas avoir peur de prendre sur elle et puis de travailler avec elle. Parce que souvent les idées que vous exécutez à travers les cours de développement finissent par être les caractéristiques vraiment cool de ce site. 

Je l'ai dit avant. Je vais le dire à nouveau. Testeurs sont super, super utile. Essayez d'amener les gens qui n'ont jamais vu le site avant de vous connecter et de voir ce qui se passe parce qu'ils ne peuvent pas tester l'utilité du site et l'expérience utilisateur, mais ils peuvent aussi tester la fonctionnalité d'une manière que vous ne pouvez pas. Si vous faites une caractéristique qui fait une certaine chose et vous savez que ça va le faire même chose correctement à chaque fois, c'est très bien. Mais il peut souvent être difficile de tenir compte des cas où un coin de might utilisateur tapez quelque chose que vous ne vous attendiez pas - précisément parce que vous avez défini les caractéristiques vous-même. Donc, pour faire venir quelqu'un sur qui n'a aucune idée de la façon d'utiliser le site et à juste briser par tous les moyens qu'ils peuvent faire est vraiment utile parce que vous se faire une idée à partir d'un point de vue totalement différent de ce que sur votre site travaille et ce qui doit réparation. 

Enfin, je vais parler de quelques bonnes pratiques générales, et vous avez vu beaucoup de ceux-ci dans CS50, mais ils ont aussi vraiment, vraiment appliquer dans un cadre de projet. L'un est un commentaire. Toujours commenter votre code, surtout si vous travaillez sur une grande équipe. Il peut être si ennuyeux d'avoir juste un bloc géant de code qui quelqu'un a écrit et peut-être il fonctionne, peut-être ce n'est pas, mais vous n'avez aucune idée de ce qu'il fait, si vous n'avez aucune idée si c'est utile ou non, ou si elle doit être là ou pas, et si vous travaillez sur quelque chose d'autre, il est même possible que vous travaillez sur la même chose, si juste être très, très attention à être attentif à vos pairs et le code d'écriture qui est bien documenté. Vous n'avez pas à aller aussi loin que de faire toute chose où comme si vous incrémenter un compteur a un commentaire qui dit, je suis en ajoutant 1 à ce compteur. Il n'a pas à être de cette détaillé, mais pour toute fonction que vous êtes jamais écrit vous devriez avoir une documentation de ce que la fonction fait exactement, ce sont ses entrées, et ce qu'il devrait revenir. De cette façon, vous pouvez utiliser d'autres composants des gens du site et vous pouvez travailler à la construction de quelque chose de grand. 

Une autre chose importante est que vous voulez faire des nettoyages réguliers. Le code devient malpropre. Ne vous sentez pas mal si votre code est juste totalement illisible et un désordre géant. Cela arrive dans le développement web toujours. Vous ajout de nouvelles fonctionnalités, en supprimant les anciens. Stuff va être là qui ne devrait pas être. C'est très bien, mais vous voulez vous assurer que pour faire face à ce régulièrement. Vous ne voulez pas laisser s'accumuler au point où vous ne pouvez pas trouver quelque chose dans votre code, et vous n'avez aucune idée de ce que quoi que ce soit fait. C'est le cas avec le HTML. Parfois, vous vous retrouverez avec des objets qui ne contiennent pas du tout, et vous voulez vous débarrasser de ceux-ci. En CSS, vous pouvez faire allusion à des éléments qui ne sont pas plus là, si vous voulez vous débarrasser de ce code. En JavaScript, vous pourriez avoir retiré quelque chose de l'HTML. Donc, vous voulez vous assurer que vous êtes toujours nettoyer, faire des choses assez autant que vous le pouvez sur une base régulière. 

Une autre chose très utile que je ne pense pas est décrite très en CS50 mais il vaut la peine d'entrer dans le contrôle de version est. L'idée de contrôle de version, c'est quand vous êtes essentiellement garder la trace de tous les progrès vous avez fait vers votre site et si à tout moment vous vous rendez compte, oh, ce travaillais il ya un moment, mais ça ne marche pas plus, vous pouvez revenir aux versions précédentes et voir ce qui a changé depuis lors, et ce genre de chose. Le principal moyen de le faire est avec Git, Git est et tout ce genre de système qui Je crois que Tommy MacWilliam a donné un séminaire sur l'année dernière. Si vous allez dans les séminaires de CS50 pour 2011, vous pouvez voir son séminaire à ce sujet. L'idée de Git est fondamentalement que, à intervalles réguliers que vous faites de ces engagements qui sont manières de dire le site est dans une version assez stable en ce moment donc Je l'emballer et l'envoyer loin à un serveur, et alors vous pouvez aller à ce serveur et de regarder toutes les versions précédentes de votre code et de voir comment il a progressé et toute cette sorte de choses intéressantes. Donc, c'est essentiellement cela. En ce qui concerne le développement web, nous sommes heureux de rester et de répondre à toute des questions en ce qui concerne notre présentation. C'est tout. Merci. >> [Ben] Merci. [Applaudissements] 

[Billy] personnel, quelqu'un at-il des questions sur des choses que nous avons couvert ou des choses que nous n'avons pas couvert qu'ils espéraient nous aimerions couvrir? Nous serons heureux de répondre à celles-ci. N'importe qui? [Membre de l'auditoire] Quels sont les avantages et les inconvénients de l'utilisation de Ruby ou Python en utilisant? [Ben] La question était, quels sont les avantages et les inconvénients de l'utilisation de Ruby ou Python au lieu de comme PHP. Les avantages sont que Ruby et Python sont de bien meilleurs langues que PHP. Au moins, à mon avis, et je pense que dans un grand nombre des avis d'autres personnes aussi. Ils ont été conçus pour faire des trucs plus complexe, et moins pour la raclée ensemble les pages web très rapidement avec un peu de contenu dynamique. Les inconvénients sont qu'il ya un peu de - il ya plus d'une courbe d'apprentissage de les faire mettre en place. C'est, comme en PHP, vous pouvez juste avoir un fichier HTML et vous écrire moins que, point d'interrogation, puis vous écrivez du code, puis vous écrivez interrogation, supérieur à, puis vous avez terminé. Dans d'autres langues comme Ruby ou Python, vous devez passer par un peu plus de travail pour obtenir le site initial fonctionnement. Il ya aussi - du moins il l'habitude d'être le cas - qu'il ya plus de documentation disponible pour PHP juste parce qu'il ya plus de gens qui l'utilisent. Je pense que ce n'est pas tant d'une question plus. Il ya certainement une très bonne documentation pour des trucs comme Ruby on Rails ou Django pour Python est l'équivalent. PHP est l'un que tout le monde utilise depuis des années, et vous savez comment cela fonctionne. Ruby et Python sont un peu moins mature. 

[Membre de l'auditoire] Si vous deviez choisir entre l'un d'eux d'apprendre ou de ramasser, qui préférez-vous? Honnêtement, je pense que cela dépend de la personne. Je suis désolé. La question était de savoir lequel choisiriez-vous pour quelqu'un d'apprendre? Je trouve personnellement Python la plus belle. Il ya beaucoup de gens qui - j'ai fait mon premier projet de dev web en Python et Django. Il ya beaucoup de gens qui aiment Ruby on Rails également. Probablement plus de gens qui connaissent Ruby on Rails. Honnêtement, je voudrais juste aller avec ce que les gens autour de vous savent de sorte que vous avez des gens à poser des questions. 

La question était - sur des serveurs partagés est-il un peu difficile de travailler sur Python? Cela dépend de votre hébergement. Il ya un certain nombre de hébergeurs de sites qui afficheront Python choses. WebFaction fait ça, non? WebFaction est un que Billy et moi avons utilisé pour certains projets. Ils sont vraiment super. Ils soutiennent la plupart des langues. Mais c'est vrai que PHP est beaucoup plus large soutien. Donc, si vous êtes coincé sur un hébergeur qui ne fait PHP, c'est une bonne raison d'utiliser PHP. 

[Membre de l'auditoire] Je viens à apprendre à interroger certaines bases de données, et je sais que mon SQL est partout, mais je me suis récemment exposé à - et vous l'avez fait sortir. Vous voyez JSON et bases de données extensibles. My SQL est encore partout. Comment voyez-vous que cela se produise? Est ce qu'il y aura une tendance croissante pour plus extensible (inaudible)? La question était - que je pense qu'il va y avoir une tendance vers des bases de données non-SQL. Par exemple, comme MongoDB. Je pense que c'est certainement vrai. Mon conseil a été principalement liée à MySQL ici seulement parce que MySQL est standard de l'industrie. Personnellement, je préfère de beaucoup les bases de données qui n'ont pas schemos comme MongoDB où vous n'avez pas la question de, oh, j'ai besoin d'ajouter une autre colonne. Malheur à moi, comme tout ce que je fais? Il est très difficile de le faire sur mySQL, mais quand vous avez quelque chose comme Mongo c'est beaucoup plus agréable. L'autre bonne chose à propos de Mongo est que vos dossiers sont en fait des objets JavaScript. Il n'y a pas de tri de l'étape de conversion où vous devez prendre ces lignes de base de données et les transformer en un objet JavaScript et puis les envoyer sur le fil. Je pense que des choses comme ça va être très, très utile pour le développement rapide d'applications web à l'avenir. 

[Billy] Quelque chose J'ajoute qui est juste un point de vue général est que ne vous sentez pas comme vous devriez avoir appris toutes les langues dont nous avons parlé de notre séminaire. Évidemment, le but est de vous donner une idée de ce qui existe, et si vous êtes intrigué par l'une des choses que nous avons mentionnées, vous pouvez les Google et lire sur eux. Et comme je l'ai mentionné, il ya quelques séminaires qui traitent précisément de ces choses. Il ya encore plus de séminaires que je n'ai pas mentionnés qui obtiennent probablement en ce genre de choses ainsi. L'idée est que si vous voulez travailler sur quelque chose, voici les outils à votre disposition. Ne vous sentez pas dépassé si vous n'êtes pas vraiment sûr de ce que ces outils font exactement, mais ils savent qu'ils sont là et que vous pouvez faire usage large d'entre eux par Google. 

[Membre de l'auditoire] Quel genre de choses que vous devez faire pour vous assurer que votre site web semble bon sur les appareils mobiles? [Billy] Les appareils mobiles sont un peu durs. Il ya deux façons que vous pouvez l'approcher. La première est que vous avez réellement un site web mobile. En d'autres termes, vous effectuez une sorte de détection au début lorsque le navigateur fait la demande à votre site Web qui soit dit retourner ce point de vue - qui sera le point de vue pour les navigateurs de bureau ou portable - et cette autre vue pour les appareils mobiles. C'est un endroit où les vues sont vraiment bien en ce que vous pouvez très bien l'échange deux sortir et avoir une interface qui fonctionne vraiment bien sur les appareils mobiles et un autre totalement différent qui fonctionne bien sur les appareils de navigation. Le problème, c'est que cela prend beaucoup de temps parce que cela signifie codage une interface totalement différente. L'autre façon que vous pouvez faire c'est - un grand nombre de téléphones modernes affichera sites et essayer de les rendre comme un navigateur serait, et ils font de leur mieux. Vous pouvez sorte de tenter de rester la lumière sur le montant de JavaScript jQuery vous utilisez qui tend à être là où les choses peuvent mal se passer un peu. C'est en quelque sorte le chemin que vous devez utiliser si vous n'avez pas beaucoup de temps. Si vous avez le temps de travailler sur une interface mobile, c'est évidemment la meilleure option. 

Je pense qu'en général, pour les projets de CS50, vous allez avoir à choisir l'un ou l'autre. En d'autres termes, vous voulez faire une application mobile ou si vous voulez faire un site Web de bureau. Et qui détermine en quelque sorte où vous allez avec ça. Mais si vous voulez l'étendre plus tard, probablement votre meilleur pari est effectuer une autre interface pour l'autre. J'ai un peu d'expérience dans le développement de sites basés sur WordPress. J'ai animé un site perso sur WordPress pour un certain temps. Ces types de cadres peuvent être de belles choses comme très de base. Souvent vous suffit de lancer dans un grand nombre de questions de personnalisation bien. Vous aurez envie d'avoir quelque chose de regarder d'une certaine façon ou être d'une certaine façon et vous pouvez tout simplement pas parce qu'il est codée en dur dans le système c'est de cette façon que vous avez à faire des choses qui peuvent être un peu un problème. Depuis, j'ai été genre de plus enclins à travailler avec des sites à partir de zéro. Pour des choses comme les bases de données de blog et ce genre de chose, c'est vraiment pas difficile de construire un cadre. Si vous êtes vraiment tendu par le temps, vous pouvez bien sûr utiliser quelque chose comme WordPress ou ce genre de chose pour un blog. Le genre de choses que les blogs magasin et faire ne sont pas vraiment assez dur que si vous utilisez dans aucune de ces sortes de choses, vous êtes probablement le meilleur juste de faire une version en interne. 

Je pense que c'est à ce sujet, donc merci encore d'être venus. Nous avons vraiment apprécié de parler à vous les gars et nous espérons que vous avez appris quelques trucs. [Ben] Nous sommes heureux de parler - nous avons à faire, mais nous sommes heureux de parler plus à l'extérieur si vous avez une autre question. Merci encore. [Applaudissements] [CS50.TV]