Prototyping für Web III: Design mit HTML und CSS

1. Trailer: Ich bin Erika Heins. Ich bin Webdesignerin, Webentwickler. Ich arbeite seit über 10 Jahren im Feld und in den USA. In dieser Klasse geht es um einfache Web-Entwicklung. Also wirklich jedes bekannte CSS für Designer. Sie werden die Mockups für eine Website nehmen, die Sie bereits entworfen haben , und Sie werden sie in eine responsive Website umwandeln. Ich denke, diese Klasse kann beiden beginnenden Webdesignern dienen, die lernen möchten, wie ihre Designs in Code bringen oder vielleicht einen Schritt zurück gehen und sie ein wenig klarer planen müssen , bevor sie direkt in ihren visuellen Prozess springen. Diese Klasse ist gut für Studenten, die beginnen, die Responsive Design und die gesamte Planung zu Entwicklungsprozess verstehen wollen die gesamte Planung zu , oder erfahrene Designer, die ihren Prozess anpassen wollen. der Lage zu sein, Websites zu erstellen und Websites zu verwalten, um zu verstehen, wie sie funktionieren, wie sie leistungsfähiger zu machen oder die Tatsache, dass es nur eine der wertvollsten Fähigkeiten ist. 2. RWD-, CSS- und HTML-Prototypen: Willkommen bei Simple Web Development. In dieser Klasse werden wir die Mock-ups für unsere responsive Website nehmen und sie in echtes HTML und CSS umwandeln. Die Methoden, die wir verwenden, sind geeignet für Prototyping oder für den Start einer neuen Website. Diese Klasse optimiert den Front-End-Entwicklungsprozess für Designer. Ob Ihr Designer lernt, visuelle Erklärungen zu programmieren oder einen aktuellen Hybrid-Code zu wünschen und Ihren Workflow zu verbessern oder ihn an das responsive Web anzupassen, diese Klasse bietet Ihnen einen guten Prozess und eine vollständige Reihe von Ressourcen. Denn Baustellen machen uns zu besseren Designern. Wie Steve Jobs sagte: „Design ist nicht nur das, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.“ Wenn Sie Dinge erstellen, sehen Sie Designs in ihrem tatsächlichen Medium HTML und CSS. Sie zeigen zusätzliche Systemanforderungen, Sie können Interaktivität visualisieren und testen und vor allem GIFs hinzufügen. Sie können dieses Projekt als Prototyp oder Standort betrachten. Erstere wird typischerweise weggeworfen. Es ist nur ein klickbares Modell, das so schnell wie möglich gemacht wird, um zu sehen, wie die Dinge aussehen. Sie würden sich mehr auf Geschwindigkeit und Präsentation konzentrieren. Eine richtige Site verfügt über alle ALT-Tags, Fallbacks und Optimierung für Produktionsserver. Sie sollten sich auf solide, skalierbare und wartbare Systeme konzentrieren. Wir werden einen Prozess durchlaufen, der für beide hilfreich ist. Da Responsive Webdesign unsere gesamte Arbeit verändert hat, müssen wir die Dinge oft schneller und in kleineren Blöcken machen. Wir werden über aktuelle Philosophien in der Branche und die Vor- und Nachteile verschiedener Techniken sprechen. Mein Prozess ist es, die Situation zu beurteilen, dann meine Materialien zu organisieren, sie nach Bedarf anzupassen, alles gründlich zu testen und dann so viel wie möglich zu dokumentieren. Das Kit, das ich für Prototyping oder Produktion verwende, ist Coda zum Schreiben von Code, Sass für CSS-Erweiterung, Hammer für Vorlagen und Kompilieren, Bourbon für Mixins und Grids und SourceTree für Git-Commits. Also, geh und hol dir dein Werkzeug-Setup. Laden Sie die kostenlosen Testversionen von Coda oder einen anderen Texteditor herunter, den Sie verwenden möchten. Hammer oder einen anderen Sass-Compiler und SourceTree oder einen anderen GitHub-Client, wenn Sie einen verwenden möchten. Laden Sie außerdem die Ressourcen für diese Klasse herunter. Es gibt einige Quelldateien und Referenzen. Sie sollten bereits Sitemaps und Mock-Ups haben. Wenn nicht, möchten Sie die ersten beiden Klassen dieser Serie nehmen. 3. Beurteile die Situation: Der erste Schritt besteht darin, die Situation zu beurteilen. Der Zustand des Feldes und der Zustand unseres Projekts. Wir müssen immer lernen, dieses Feld verändert sich ständig. Also, wenn Sie seit sechs Monaten nichts getan haben, müssen Sie recherchieren, weil es wahrscheinlich einen besseren Weg gibt, dies zu tun. Dies ist ein Feld für Menschen, die gerne lernen und neue Dinge lieben. Aber schützen Sie Ihren eigenen Prozess. Werkzeuge werden kommen und gehen, also stören Sie nicht, was gut für Sie funktioniert bereits. Neue Werkzeuge sind störend. Hoffentlich, in einer guten Art und Weise, wo Sie Ihren Prozess aufräumen, aber es könnte auf eine schlechte Art und Weise sein, wenn es Sie ablenkt und Sie hofft. Bestätigen Sie also die Projektanforderungen. Was ist der eigentliche Zweck dieser Website? Wie lange ist seine Lebensdauer? Wie lange brauchst du es, um aufzustehen? Haben Sie Zeit oder finanzielle Budgets, die Sie brauchen, um zu treffen? Welche Geräte sollen angezeigt werden, wenn sie eingeschaltet ist? Welche Browser müssen Sie unterstützen? Und welche Art von Bildschirmen möchten Sie unterstützen? High Definition, Retina-Bildschirme. Gehen Sie durch und fragen Sie, welche Ressourcen Sie benötigen. Welches Niveau der Politur benötigen Sie auf dem Code? Sie könnten eine GUI-basierte Codierungs-App verwenden, wenn Sie nur etwas schnell und nicht für real wollen. Der generierte Code ist normalerweise ziemlich ausführlich. Wenn Sie nicht alle Funktionen von HTML und CSS nur die populären, die die App bietet, benötigen , könnte es Spaß machen, einfach Elemente auf der Seite zu ziehen und abzulegen. Auch wenn Sie nicht planen, die Programmierung fortzusetzen und Sie gerade bauen oder Sie nur eine Website für kurzfristig erstellen. Dreamweaver ist der alte Standard, Adobe hat auch ein neueres Projekt namens Edge und es gibt Upstarts wie Web Flow und Ara. Die Vorteile dieses schönen Interface, dass Sie schnell grundlegende Layouts erhalten und dass Sie Seiten visuell überarbeiten können. Aber wieder, Sie sind auf die bestimmte Feature-Set der App beschränkt, der Code benötigt im Allgemeinen noch Verbesserungen und Sie verwenden ihn nicht wirklich in der Produktion und viele von ihnen sind immer noch fehlerhaft. Also, warum sollten wir gerade HTML- und CSS-Codierung machen wollen? Da wir Zugriff auf die vollen Funktionen von HTML erhalten, sind wir nicht auf die Funktionen der Prototyping-App beschränkt, die wir uns entscheiden. Wir können die tatsächlichen Elemente, die Topographie und die Seitengeschwindigkeit sehen . Wir können Haltepunkte auf realen Geräten ermitteln und alle unsere Quelldateien sind nicht proprietär, was bedeutet, dass wir diesen Code an jede andere App übertragen können, die wir verwenden möchten. Sie können Ihren Prototyp in die Produktion aufpolieren, was Ihnen Zeit spart und Sie können eine Website in wenigen Stunden oder Tagen erstellen, wenn Sie schnell sind. Aber es ist schwierig, auf die Tastatur als Hauptdesignwerkzeug zu gehen , wenn Sie aus einem Designhintergrund kommen. Also, die App, die Sie verwenden, macht einen großen Unterschied. Sublime Text ist wirklich beliebt, es ist wirklich anpassbar und es hat eine coole Navigatoransicht auf der rechten Seite für Ihren Code. Ich benutze Coda, mit dem Sie Codeclips haben können, die Sie per Drag & Drop in Ihre Seiten ziehen können. Es hat auch Code Faltung und Färbung und eine Split-Fenster Vorschau genannt oder Sie können die Diät Coda iPad App zu leben eine Vorschau bei jedem Speichern generieren. Sie können ein Terminal-Fenster direkt in der gleichen App öffnen und es gibt auch viele Referenzhandbücher, die Ihnen helfen, Dinge zu suchen, während Sie Code. Aber wir werden nicht perfekt HTML und CSS codieren, es gibt einige wichtige Werkzeuge und Methoden, um viel Zeit zu sparen. Plug-Ins und Erweiterungen können uns zusätzliche Funktionen bieten, die wir wollen und brauchen. Zum Beispiel ist Emmnet CSS-Kurzschrift, Sie können einige Zeichen eingeben und sie in vollständiges HTML oder CSS erweitern lassen. Dann Sass ai ein CSS-Prozessor, der uns Variablen, Mix-Ins, Bibliotheken gibt , wenn dann Anweisungen und alle möglichen Dinge, die eine intelligente Programmiersprache haben würde. Ich liebe Hammer. Ich finde, es ist der schnellste Weg, statische Websites zu erstellen. Sie benötigen einen Compiler, wenn Sie Sass verwenden und Hammer tut das für uns und es enthält auch die Bourbon-Bibliothek von Mix-Ins standardmäßig und am besten von allen, können Sie einige Variablen einschließen, die einen regulären HTML kompiliert haben. Also, wieder, die Vorteile der Hand Codierung Dinge sind, dass Sie HTML und CSS so ziemlich überall verwenden können, es rendert die Designs und das eigentliche Medium, Sie erhalten die vollen Fähigkeiten des Browsers und es ist Open-Source oder nicht-proprietär. Das einzige ist, dass, ja, es gibt eine Lernkurve, ja, Sie müssen etwas Zeit in das Codieren all dieses Zeugs investieren und Sie müssen es im Browser testen. Frameworks können also ein glückliches Medium sein. Wenn Sie ein erfahrener Entwickler sind, denken Sie vielleicht über Node.js nach, weil Sie Apps erstellen aber wenn Sie auf dieser Ebene sind, benötigen Sie diese Klasse wahrscheinlich nicht. Framer Node.js ist eine weitere, die sich auf Prototyping und Animation konzentriert. Die nächste Ebene nach unten, die wir sagen könnten, ist Bootstrap. Es ist sehr beliebt für Apps in der Produktion, es gibt Ihnen alle Arten von Elementen in der Interaktivität. Für mich gab es ein paar Deal Breaker, weil es eingebaute Lass und Sass ist. Obwohl es einen Port gibt, wenn Sie Sass verwenden möchten und es viele Standard-Styling gibt, war es für mich zu viel Zeug, um zu überschreiben. Es gibt Ihnen Schaltflächen, es gibt Ihnen Formulare, es gibt Ihnen Standardüberschriften und Textilien, so dass Sie alle CSS schreiben müssen, um diese Stile zu überschreiben, wenn Sie möchten, dass Ihre Website einzigartig aussieht, was ein wenig Zeit in alle CSS schreiben müssen, um diese Stile zu überschreiben, wenn Sie möchten, dass Ihre Website einzigartig aussieht, Anspruch nimmt Deshalb sehen Sie viele Websites, die Bootstrap verwenden, die alle gleich aussehen. Foundation ist ein anderes Framework, das Bootstrap ähnlich ist. Ich bevorzuge seine Struktur ein wenig besser. Es gibt Ihnen eine Menge von Standardvorlagen. Also, Sie müssten diese Art von Layouts nicht von Grund auf codieren und so ist es gut, aber es ist sperrig, es gibt eine Menge zusätzliches Markup, wenn Sie diese Art von Spaltenlayouts machen und Sie erhalten Klassennamen überall in Ihren Markups. Also, ich finde, dass Sie die gleichen Dinge mit weniger Arbeit bekommen können. Compass ist ein weiterer beliebter, es ist eine riesige Bibliothek von CSS-Mix-Ins. Es ist ziemlich groß und es kann Ihren Seiten etwas Gewicht hinzufügen, also stütze ich mich auf Bourbon, was viel einfacher ist als Compass, es ist die gleiche Art von Idee einer Bibliothek von CSS-Mix-Ins, so dass Sie sie nicht schreiben und sie alle pflegen müssen selbst und ich finde, dass die Dokumentation viel einfacher zu lesen ist. Sie können Bourbon Neat auch verwenden, um mit Bourbon zu gehen, und es ist ein einfaches semantisches ansprechendes Gitter und wir werden später mehr darüber sprechen. All diese Frameworks bedeuten, dass Sie weniger von Grund auf neu abgeleitet haben, dass Sie zusätzliche Funktionen erhalten , die Sie möglicherweise nicht in der Lage sind, sich selbst zu machen und hoffentlich sind sie gut getestet. Die Nachteile sind, dass Sie einen Mangel an Kontrolle haben können, Sie müssen die Standards der Frameworks befolgen, die Sie verwenden. Es gibt eine Lernkurve zum Erlernen der besonderen Syntax und Fähigkeiten jedes Frameworks und es ist spezielles Wissen, es ist nicht so anwendbar für andere Tools, wenn Sie sich entscheiden, Frameworks später zu wechseln. Also, wenn Sie versuchen, mit solchen Dingen Schritt zu halten, fragen Sie sich, wie Sie von diesen neuen Tools hören, entscheiden Sie, welche die besten sind. News.layervault.com ist ziemlich gut und natürlich Twitter. Ich habe eine Liste der empfohlenen Leute im Bereich Design und Technologie erstellt, so dass Sie viele Informationen von Leuten bekommen können, die wirklich mithalten und versuchen, auf der Spitze ihres Spiels über dieses Zeug zu sein. Entscheiden Sie also, wie viel Sie für dieses Projekt lernen möchten. Überspringen Sie einige dieser Apps, überspringen Sie die Dokumentation, schauen Sie sich einige Tutorials an und erhalten Sie dann die Einrichtung. Ich werde Hammer und Sass, Bourbon und Bourbon Neat verwenden , also schlage ich denen vor, wenn Sie mitverfolgen möchten, aber natürlich, wenn Sie Bootstrap oder Foundation oder irgendetwas anderes lernen möchten , von dem Sie gehört haben Sie könnten das auch für Ihr Projekt einrichten. 4. Speichern: Unsere nächste Lektion ist die Versionskontrolle. Dies ist eine wertvolle und wesentliche Fähigkeiten. Also, selbst wenn Sie denken, dass Sie es bei diesem Projekt nicht brauchen, lassen Sie uns einen einfachen Weg lernen, dies zu tun. Wenn Sie in der digitalen Welt arbeiten, ist es sehr wichtig, Ihre Arbeit an mehreren Orten zu speichern. Versionskontrolle werden Ihre Dateien sowie alle früheren Versionen gesichert . Wir sind alle mit dem Konzept vertraut. Auf Ebene 1 verwenden Sie nur Dateinamen, -v1, -v2, -FINAL-FINAL-FINAL. Ebene zwei, wechseln Sie zu einem Versionskontrollsystem. Es gibt Apps wie LayerVault für Photoshop, und GitHub ist die große für Code. Mein Vater ist Programmierer und er sagt immer, dass Sie, bis Sie ein Versionskontrollsystem verwenden, ein Amateurentwickler und kein Profi sind. Aber dennoch ist GitHub ein wenig beängstigend. Durchsuchen Sie also die Registerkarte „Durchsuchen“, um einen Eindruck von all den Dingen zu erhalten, die Sie tun können. Sie können Ihre Dateien sichern, sodass Sie immer zwei Kopien haben. Sie können Aufgaben ganz einfach rückgängig machen, da sie jede Nebenversion speichert. Sie können alternative Ideen testen, weil es Gabeln und Zweige erlaubt. Sie können mit anderen Personen auf denselben Seiten zusammenarbeiten, da GitHub die Zusammenführungskonflikte verwaltet. Sie können Ihre Arbeit teilen, weil Open-Source uns alle vorwärts bewegt. Sie können auch ein privates Repo verwenden, wenn Sie möchten. Also, lesen Sie alle Tutorials. Das ist immer der beste Weg, um ein neues Werkzeug zu lernen. Aber ich habe all das getan, und ich bin immer noch verwirrt und verängstigt von GitHub, bis ich einige visuelle Werkzeuge gefunden habe. Also, es gibt einen GitHub für Mac, aber ich bevorzuge einen namens SourceTree. Es ist auch kostenlos und es hat alle Befehle direkt vor Ihnen. Also verwende ich nur die wichtigsten, wie Commit, Pull und Push. Sie können sehen, dass es diesen Knopf gibt. Also muss ich mich nicht an die bestimmte Syntax erinnern. Terminal ist nur, es gibt kein Rückgängigmachen, es gibt keine Farbcodierung, die angezeigt wird, wenn Sie einen Fehler eingegeben haben. Also, es war immer nur ein bisschen zu stressig für mich. Aber als ich angefangen habe, SourceTree zu verwenden, war ich völlig zuversichtlich, Git zu verwenden. Also, wie fängst du an? Zuerst musst du ihr Konto bekommen. Gehen Sie also zu github.com und erstellen Sie ein Konto. Dann möchten Sie auf Ihrem Profil oder auf der Homepage ein neues Repo erstellen. Also, ich werde meine Demo anrufen. Ich werde es öffentlich machen, damit ihr es alle sehen könnt, und ich werde auch das Kontrollkästchen aktivieren, das besagt, dass dieses Repository mit einem README initialisiert wird. Also, lassen Sie uns fortfahren und das Repository verwenden , weil es eine erforderliche Sache ist, eine README-Datei darin zu haben. Sie sind also gezwungen, ein Intro zu schreiben, das anderen Leuten erklärt, was dieser Satz von Dateien ist. Also, jetzt siehst du mein Repository. Es steht unter meinem Benutzernamen. Energy7/Demo ist, wo Sie es finden können. Sie können sehen, dass diese README-Datei nur den Titel hat und ich keinen Inhalt hinzugefügt habe. werde ich am Ende des Projekts tun. Wenn Sie also auf die rechte Seite des Bildschirms gehen, möchten Sie diese Klon-URL kopieren, wo SSH steht. Dann möchten Sie in SourceTree gehen. Gehen Sie also zu Ihrem Lesezeichen-Panel. Sie drücken Apple B, wenn Sie es nicht sehen können, und klicken Sie auf die Plus-Taste, um ein Repository hinzuzufügen. Sie werden ein Repository klonen. Da Sie es bereits auf GitHub erstellt haben, müssen Sie es nicht neu erstellen, aber Sie werden nur eine Kopie auf Ihren Computer klonen. Der Quellpfad besteht also darin, dass Sie von GitHub kopiert und dann einen Ordner auswählen. Ich behalte alle meine Repos in meinem Benutzerordner in einem Unterordner namens Sites. Ich werde meinen Repo-Ordner genauso aufrufen wie auf GitHub, das Demo ist, und dann wird es so aussehen. Sie werden sehen, dass dies das SourceTree-Fenster ist. Es gibt also noch keine Dateien, die wir lokal hinzugefügt haben. Also, alles ist leer, aber Sie können alle Tasten oben sehen. Dann auf der linken Seite können Sie sehen, dass wir nur mit dem Master-Zweig verbunden sind , der wie unser Haupt-Repo ist. Es gibt alle Arten von anderen Dingen, in die Sie eintauchen können , wenn Sie in einem professionellen Umfeld arbeiten. Also, jetzt gehe ich zu Hammer, und ich habe einige Quelldateien zur Verfügung gestellt. Ich habe eine Hammer-Vorlage für diese Klasse zur Verfügung gestellt. Also, es heißt Demo Template. Also, in meinem gleichen Repo-Ordner, werde ich eine Demo-Site mit dieser Demo-Vorlage erstellen. Wenn ich auf Speichern klicke, kompiliert Hammer alle diese Dateien. Sie sind alle so ziemlich leer, aber Hammer sitzt dort und beobachtet, und jedes Mal, wenn Sie sparen, kompiliert es wieder. Wenn ich dann zurück zu SourceTree gehe, sehe ich, dass alle diese Dateien, die von Hammer erstellt wurden, die Teil der Vorlage sind, jetzt in meinem Arbeitsbaum sind, was bedeutet, wie auf meiner lokalen Festplatte. Also werde ich sie per Drag & Drop ablegen. Ich wähle sie alle aus und ziehe sie bis in die obere Hälfte des Bildschirms, um sie zu inszenieren, was bedeutet, dass diese sind diejenigen, die ich bereit bin zu teilen. Dann klicke ich auf die Schaltfläche Commit, die erste Schaltfläche auf der linken Seite, und ich werde eine Nachricht schreiben, die beschreibt, was ich hier getan habe. Also, hier, habe ich gerade die Site-Dateien aus meiner Demo Hammer Template erstellt. Ich werde das Kästchen unten ankreuzen, das heißt, drücken Sie die Commits sofort zum Ursprung. Also, Commits ist genau wie ein Speichern, aber es ist nur lokal. Es tut dem Repo auf GitHub nichts. Sie müssen also die Dateien schieben, wenn Sie möchten, dass sie zu GitHub gehen. Also, sobald ich das mache, sehen Sie jetzt, dass ich meinen Demo-Site-Ordner auch im öffentlichen Repo habe. Also, du hast es getan. Sie haben den GitHub geschoben. Also, wenn Sie jemals in einem Vorstellungsgespräch sind, und sie fragen Sie, können Sie Git verwenden, können Sie jetzt ja sagen. SourceTree ist auch schön, weil Sie in der Mitte des Bildschirms sehen können, oberhalb der Pull-Taste, gibt es ein kleines Abzeichen, das Ihnen sagt, dass es ein wenig rote fünf gab. Also, das sagt Ihnen, wenn jemand anderes mit Ihnen an dem Projekt arbeitet, einige Änderungen am Repo vorgenommen, und Sie möchten diese ziehen, Sie möchten die Änderungen herunterladen, die Sie mit den aktuellsten Dateien arbeiten. Also, suchen Sie immer danach und ziehen Sie, bevor Sie in jedem Fall mit der Arbeit beginnen. Die grundlegende Syntax für Git ist also, dass Pull wie Download ist, dass Sie Änderungen in Ihre Dateien zusammenführen. Commit ist wie speichern. Es ist wie eine Meilenmarkierung, zu der Sie später zurückkehren können. Push ist wie Upload, wo Sie Ihre Commits wieder in das Repo zusammenführen. Revert ist wie rückgängig, wo Sie zu einem vorherigen Commit zurückkehren müssen, was Sie sehr froh macht, wenn Sie viele Commits zur Auswahl haben. Fork ist, wenn Sie ein Repo finden, das Sie als Basis verwenden möchten, wenn Sie einen Link beibehalten möchten. Wenn Sie also sagen, sie aktualisieren ihren Header, sie aktualisieren ihren Header, können Sie den Upstream-Zweig zusammenführen und Sie können auch diesen aktualisierten Header verwenden. So sieht es etwa so aus. Hier ist eine gute Illustration von Jessica Lord. Es gibt ein Originalprojekt, das eine Giraffe ist, und Sie könnten es verzweigen, und dann können Sie es ändern, wie Sie wollen, und vielleicht fügen Sie einen Tigerkopf hinzu, und dann würden Sie es wieder hochladen, wenn Sie Zugriffsrechte bis zum ursprünglichen Repo haben. Also, jetzt ist das Teil des Haupt-Repo, dieser Tigerkopf-Giraffe. Dann kann jemand anderes diesen neuen Code forken und einige Federn hinzufügen, und dann kann er ihn zurück zum Repo schieben und diese Änderungen auch zusammenführen. Ihr könntet also sogar miteinander an diesem Projekt in dieser Klasse zusammenarbeiten. Sie können dasselbe Repository verwenden und Dateien freigeben. Also, machen Sie weiter und erstellen Sie Ihr Repository. Downloaden Sie SourceTree, wenn Sie es nicht haben, und Hammer auch. Erstellen Sie ein GitHub-Konto. Erstellen Sie ein Repository und rufen Sie dann Ihre Repository-Einrichtung in SourceTree ab. 5. Die Knochen: Jetzt sind wir bereit, Seiten zu erstellen. Unsere Hintergrundlesung ist wieder von A Book Apart. Wenn Sie ein Web-Designer sind, gehen Sie einfach vor und kaufen Sie alle ihre Bücher. Die besten Übersichten zu jedem Thema, und sie sind kurz genug, um auf einer Flugzeugfahrt zu lesen. Also, wie kommen wir von diesen flachen Mockups in Code? Glücklicherweise hat unser netter Designer alle möglichen Haltepunkte verspottet, also treffen wir keine Layoutentscheidungen selbst, und wir haben eine Sitemap, um uns zu zeigen, welche Seiten Vielfache sind und wie viele es insgesamt gibt. Es geht nun um die Mustererkennung, und Hammer hilft uns dabei. Standardvorlagen werden mit einem Include-Ordner geliefert. Hier sehen Sie Kopfzeile, Fußzeile und Nav. Sie verwenden Includes auf allen großen Websites, so dass Sie den Header nicht fünfmal auf fünf Seiten einfügen müssen, aber sie benötigen eine dynamische serverseitige Sprache wie PHP oder Ruby. Hammer kompiliert diese Includes zu regulärem HTML, das Sie im Build-Ordner sehen. Dann, der Ordner Assets, sehen Sie, dass der CSS-Unterordner hat eine Stile.scss. Dies ist eine SaaS-Datei, die auch zu regulärem CSS im Build-Ordner kompiliert wird. Während wir hier sind, schauen Sie sich die Vorlage an, die ich zur Verfügung gestellt habe. In den CSS-Assets gibt es mehrere Unterordner. Wir werden später darüber reden. Es geht um das Entwerfen von Modulen, nicht um Seiten. Auch hier möchten wir eine Kopfzeile nicht fünfmal für fünf Seiten codieren, und Sie möchten also über Callouts und andere Funktionen auf die gleiche Weise nachdenken. Erstellen Sie also eine Liste Ihrer Vorlagen, nicht unbedingt Ihre Seiten. Sie können dies einfach in einer Textdatei tun, und Sie möchten sie am größten Haltepunkt beschreiben da mobile Layouts in der Regel eine Spalte sind. Wenn Sie also Ihre mobilen Vorlagen beschrieben haben, wären sie so ziemlich alle gleich, aber denken Sie darüber nach, wo Sie komplexe Drei- oder Zwei-Spalten-Layouts haben. Nun, es ist eine Frage der Semantik. Semantik bedeutet nur, Elemente basierend auf dem zuzuweisen, was sie sind, nicht wie sie aussehen. Ist dieses Stück Text ein Absatz oder eine Liste? HTML ist also das Alphabet des Webdesigns. Sie möchten all diese Briefe lernen, damit Sie mehr Wörter buchstabieren können. Sie werden nicht notwendigerweise all diese verwenden. Aber je mehr du weißt, desto mehr kannst du tun, und das ist eine andere Sache, die ich an Coda mag, ist, dass es mit Büchern über mehrere Sprachen kommt. Also, innerhalb der gleichen App, können Sie einfach die Dinge nachschlagen. Also, wenn ich ein Website-Tag verwenden wollte, kann ich zu dem Buch gehen und die richtigen Attribute nachschlagen und wofür es verwendet wird. So können Sie auch anfangen, Abkürzung zu verwenden, um ein bisschen schneller zu arbeiten. Markdown, eine Abkürzung für HTML. Es hilft Ihnen, sich auf die Semantik Ihrer Inhalte anstatt auf das Aussehen zu konzentrieren. Also, Sie müssen sagen, das ist ein H1, das ist ein H2, et cetera. Sie können Markdown in einer App wie Stackedit schreiben, um die HTML-Vorschau nebeneinander gerendert zu sehen , und dann könnten Sie HTML herunterladen, damit Ihre Inhalte alle markiert und bereit sind, in Ihre Vorlagen einzufügen. Emmet ist eine andere Art von Abkürzung für HTML und CSS. Es kommt als Plug-in für Ihren Code-Editor. Sie schreiben Code mit der Emmet-Syntax, die wie diese Zeile oben aussieht, und dann drücken Sie „Control E“, um es zu erweitern, und Sie erhalten das vollständige HTML oder CSS wie unten. Wieder, es ist eine Sache zu lernen, aber wenn ich in eine Phase gehe, in der ich für mehrere Tage programmieren werde, gehe ich zurück und lerne es wieder. Es fühlt sich wirklich an wie Magie. Die andere Sache, die super hilfreich ist, ist Clips zu machen. Wenn Sie zum 100. Mal eine ungeordnete Liste codiert haben, beginnen Sie sich zu fragen, ob das wirklich notwendig ist? Nein, ist es nicht. Sie können Ihre eigene persönliche Code-Bibliothek erstellen. Hier, Encoder, gibt es eine Registerkarte auf der rechten Seite für all deine Clips. Sie können meine HTML5 Clips, meine Hammer Clips, et cetera sehen. Sie können Ordner mit Clips für jedes Framework erstellen, das Sie verwenden, und dann können Sie sie einfach per Drag & Drop in Ihre Datei ziehen, um Ihren Code wiederzuverwenden. Es gibt eine Code-Eclipse-Site, die viele Beispiele enthält, sowohl einfache als auch komplexe für viele Systeme und Frameworks, und Pears. Es ist P-E-A-R-S. Es ist eine Website, die viele einfache HTML- und CSS-Muster hat. Suchen Sie auch nach den ansprechenden Mustern auf Brad Frost Website namens This Is Responsive. Er war super großzügig und schuf jede Menge nützlicher Muster wie reaktionsschnelle Navigation und Bilder. Seine neuesten Bemühungen heißt Pattern Lab, und es hat den gleichen modularen Ansatz, über den ich gesprochen habe. Anstelle der Buchstaben des Alphabets spricht er über Atome. Also, das könnte sein, Sie haben eine Farbe oder eine Schriftart. Das ist ein Atom Ihrer Website. Sie würden diese zu einem Molekül kombinieren. Sie könnten eine Überschrift bilden, und Sie würden mehrere Moleküle zu einem Organismus kombinieren, was eine Kopfzeile oder eine Seitenleiste sein könnte. Dann kombinieren diese Organismen zu Formularvorlage, die möglicherweise Ihre einzelne Spaltenvorlage, Ihre Rastervorlage, und dann würden Sie diese Vorlagen verwenden, um einzelne Seiten wie Ihre Willkommensseite oder Ihre Profilseite zu erstellen. Schauen Sie sich das System an, und Sie möchten es vielleicht erkunden, wenn Sie daran interessiert sind , weiter an der Webentwicklung weiterzumachen, aber achten Sie darauf, Ihre Clips zu sichern. Das Traurigste, was jemals passiert ist, war, dass ich einen Computerabsturz hatte , und alle meine Clips gingen verloren, und es war so viele Jahre Arbeit, alles kompiliert, und es wurde nirgendwo gesichert, also gelernt. Also, während Sie Ihren HTML schreiben, werden Sie beginnen, Klassennamen hinzuzufügen, an die Sie Ihr CSS anhängen werden. Es gibt also alle Arten von Ansätzen, wie Sie Ihre Klassen benennen, aber hier ist mein grundlegender Ansatz. Ihr Container möchte eine kurze Klasse haben, einfacher kurzer Containername ist großartig. So können Sie untergeordnete Klassen nach Bindestrich haben. Also, dieser Abschnitt habe ich Intro genannt, und dann sind meine Unterabschnitte Intro-Held und Intro-Blurb, die wiederum semantisch sind, und dass sie sich darauf beziehen, was es ist, nicht wie es aussieht. Also, es ist nicht die oberste Reihe. Denn in einem reaktionsfähigen Layout kann sich diese oberste Zeile nach links bewegen, aber es ist die Introzeile oder was auch immer Sie sie nennen möchten. Die populären Methoden, das sind Menschen, die viel Zeit damit verbringen , über große Systeme nachzudenken, wie Sie Ihre Klassen nennen müssen. Einer war OOCSS, das objektorientierte CSS von Nicole Sullivan ist, und das war irgendwie eins der ersten abstrakten Stile in Modulen. Also würden Sie eine Art sehen Stile von Logos schreiben , die Sie auf verschiedenen Elementen kombinieren , indem Sie eine ganze Reihe von Klassennamen in das Markup setzen, aber Sass tut dies jetzt. Auch hier ist es nicht so schön, alle Klassen im Markup zu haben. Ein weiterer beliebter ist BEM, der Block Element Modifier ist, was nur bedeutet, dass Sie a.class für die Hauptsache verwenden. Dann verwenden Sie für ein Kind zwei Unterstriche, und dann für eine Unterklasse verwenden Sie zwei Bindestriche. Das ist also ziemlich erkennbar, wenn man jemanden sieht, der BEM benutzt. Dann ist SMACSS eine andere, die ich mag, die für Scalable Modular Architecture steht, und das besagt, dass Sie Ihr CSS in fünf grundlegende Abschnitte aufteilen möchten. Eins ist wie Ihre Basiselemente. Zwei sind alle Stile, die Ihr Layout erstellen. Drei sind alle Module. Also, Callouts oder wiederverwendbare Stücke, über die wir gesprochen haben. Vier sind die Staaten. Also, es ist ausgewählt oder es ist ein Fehler, und fünf ist die Themen, was bedeutet, wenn für große Websites Sie oft ein Thema Abschnitte mit dem gleichen Code wie andere Abschnitte. Also, wir werden eine ähnliche verwenden. Ich benutze eine ähnliche Aufschlüsselung, um meine Ordner von Partials zu organisieren, aber ich bin nicht streng darauf, Sass zu letzterem zu folgen. Wichtige Lektionen, die ich gelernt habe, als ich meine Klassennamen ausgewählt habe, besteht darin, keine IDs zu verwenden, weil sie sehr spezifisch sind, und sie werden die meisten anderen CSS überschreiben. Wenn Sie also einige vorhandene CSS optimieren müssen, müssen Sie eine Tonne Spezifität oder eine wichtige Aussage verwenden, was ein Problem ist. Sie möchten also eine Klasse gleich Benutzerprofil machen, und keine ID entspricht Benutzerprofil. Wenn Sie dann Ihr Markup schreiben, möchten Sie Abhängigkeiten reduzieren. Also, das bedeutet nur, dass Sie keine Änderung in Ihrem CSS wollen , um Ihr JavaScript zu brechen und umgekehrt. Es ist also großartig, Klassennamen zu verwenden, die jedem zugewiesen sind. Also, für JavaScript-Hooks verwende ich IDs oder Datenattribute oder Klassennamen, die mit.js beginnen, und dann sind alle anderen Klassen nur zum Styling. Weise weiß ich, dass ich so viele Änderungen an meinem CSS vornehmen kann, wie ich möchte, und ich werde das JavaScript nicht brechen. Also, das ist eine Art fortgeschrittene Lektion, aber ich werde es Ihnen sagen. Ok. Sie werden also anfangen, Ihre Demo-Seiten zu programmieren, und es wird wirklich verlockend sein, reinzugehen und sie zu stylen, aber konzentrieren Sie sich darauf, alle Elemente auf die Seite zu bekommen. Also, schreiben Sie Ihr Markup, herauszufinden, wie der Inhalt codiert werden sollte und in welcher Reihenfolge er auf der Seite gehen sollte. Also, es ist hilfreich, sich Ihre mobilen Wireframes anzusehen, um herauszufinden , in welcher Reihenfolge die HTML-Elemente gehen müssen, und dann gehen wir in Kürze in das Responsive Styling ein und finden heraus, wie Sie sie nebeneinander auf den größeren Layouts erhalten. Also, starten Sie Ihre HTML-Seiten, indem Sie Ihre Container markieren, die Abschnitte, Artikel, divs oder etwas anderes sein könnten . Sie fügen Ihre Texte, Überschriften, Absätze, Listen und markieren Ihre Medien. Also, Bilder, Videos, Audio, was auch immer noch in Ihren Layouts sind, und halten Sie sich an Github, während Sie nur für die Übung gehen, oder wenn Sie mit anderen Menschen zusammenarbeiten. 6. Flexibilität: Mein nächster Schritt besteht darin, diese Vorlagen reaktionsschnell zu machen, damit jeder sehen kann, wie der Inhalt auf verschiedenen Geräten neu fließt. Um dies zu tun, werden wir Sass brauchen, damit wir das Bourbon Neat Gitter benutzen können. Auch hier wird uns ein Buch Apart einen tollen Überblick geben. Wir sehen Features wie Verschachtelung; um Ihren Code organisiert zu halten, können abhängige Klassen in ihren übergeordneten Klassen gespeichert werden. Variablen, um zu vermeiden, finden und ersetzen, können Sie eine Konfigurationsdatei für jede Website schreiben, die als Thema fungiert, so dass Sie die eindeutigen Farben und Größen für diese Website alle an einem Ort haben können, und dann einfach die Variable verwenden, die mit das Dollarzeichen überall sonst auf Ihrer Seite in Ihrem CSS. Auch Mixins, um komplexe Logik zu behandeln, oder um das Schreiben langer CSS-Fallbacks wie Anbieterpräfixe zu vermeiden. Zum Beispiel können wir einfach einen Wert von 10 Pixel übergeben, so dass diese einzeilige Grenze Radius mixin, und es wird die vier Zeilen CSS und unsere endgültige Datei erzeugen. Wir müssen nicht alle unsere eigenen Mixins schreiben, wir können Bibliotheken für die üblichen Dinge verwenden, so dass es aktualisiert wird, wenn die Browser es tun. Sass-Dateien können in Partials aufgeteilt werden, so dass Sie nicht eine 3000-Zeilen-CSS-Datei nach oben und unten scrollen müssen, um nach etwas zu suchen. Dann kompilieren Sie sie, CSS-Erweiterungssprache von Sass, also brauchen wir einen Compiler, um es in tatsächliches CSS zu verwandeln. Das ist ein weiterer Sieg für Hammer. Sie können Sass mit JavaScript auf dem Server kompilieren, aber das ist ein bisschen langsamer für Ihre Besucher. Sie können eine App namens Codekit verwenden, die wirklich großartig ist, aber Hammer hilft uns wieder, nur so wenige Tools wie möglich zu verwenden , es wird unsere Sass für uns kompilieren. Also, hier ist eine Beispiel-Konfigurationsdatei, die im Grunde ein Thema für unsere Website ist . Das hier ist eine Beispielfarbpalette, und wir können unsere Variablen für unser Raster wie die Anzahl der Spalten und alle möglichen Dinge festlegen . Schauen Sie sich also im Beispiel die Demo-Vorlage an und sehen Sie, wie eine Konfigurationsdatei aussieht. Sie möchten Ihre Dateien organisiert halten. Also, Leute tun dies auf verschiedene Arten, aber meine Ordner für das Prototyping sind eine Basisdatei, entschuldigen Sie mich, ein Basisordner, in dem Sie Ihre normalisieren-Datei sehen und auch diese Konfigurationsdatei, die ich mit all Ihren Theme-Variablen erwähnt habe. Dann habe ich einen Ordner mit all meinen Mixins, die vielleicht die Bibliotheken, das Raster und alle meine benutzerdefinierten Mixins sind, die ich selbst schreibe. Dann habe ich einen Ordner von all meinen Partials, das ist bei weitem die größten Ordner, und manchmal wird es in mehrere aufgeteilt, es könnte Ihre Kopfzeile sein, Ihre Fußzeile, ich füge auch meine Zustände hier ein, so dass es kaputt ist, entschuldigen Sie mich, es ist ein Fehler, es ist auf es ist aus dieser Art von Sachen, und dann gibt es den Plugins-Ordner, so Dinge wie fitbits oder jquery-Plugins, die später entfernt werden könnten, es ist schön, dass CSS ausgeteilt wird, also müssen Sie nicht wieder durch die Länge Ihrer CSS-Datei für jedes bestimmte Styling, aber es ist alles an einem Ort.Also, dann importieren Sie einfach alle diese verschiedenen Partials, mit Ihrem style.scss, so dass dies ist, wie man neigt zu suchen. Also, zuerst importiere ich meine Basis, Setup, so dass dies dieser normalisierte Reset und dann meine Konfiguration für meine Variablen, dann importiere ich alle diese Bibliotheken und Mixins, die ich alle meine verschiedenen Partials verwenden werde. Dann importiere ich meine verschiedenen Partials, und die Reihenfolge, in der Sie sie importieren, ist wichtig. Daher sind Dinge, die Sie später importieren , nicht für Partials verfügbar, die zuvor importiert wurden. Also, Sie möchten alle Ihre Basiselemente so tun, wie Ihre Typografie zuerst kommen muss, und dann können Sie diese typografischen Stile verwenden, sagen Sie Ihre Schaltflächen oder Ihre Menüs, die später aufgerufen werden. Dann ist mein letzter all diese Plugins wieder, diese Add-ons, die später entfernt werden könnten. Für Updates über Sass und CSS und all das Zeug folgen Chris Coyier CSS-Tricks ist seine Website, und er ist wirklich auf dem neuesten Stand in all diesem Zeug. Auf Responsive Web-Design und die Anforderungen dort. Unsere Hintergrundlesung hier ist von Herrn Ethan Marcotte, der ein guter Freund ist, der auch auf Twitter folgen kann. Es kommt von dieser Anforderung oder dieser Tatsache, dass wir nicht mehr für Set-Größen sind Proportionen entwerfen können. Wir können nicht mehr nur für die Apple-Nutzer entwerfen. Als Smartphones für eine Weile rauskamen, sind wir einfach wie oh! Also, jetzt brauchen wir nur, iPhone-Styles und dann iPad-Stile und dann Desktop und jetzt gibt es alle Arten von Menschen mit allerlei Tablets und Smartphones, also müssen wir ein bisschen kreativer sein. Also, eine Sache, die hilft, ist, dass einige Leute zusammenstellen, was man den Goldilocks-Ansatz nennt. Welches ist nur die geräteunabhängige Möglichkeit, Responsive Web-Design zu betrachten. Man denkt also an kleine, mittlere und große Layouts oder einspaltige, zweispaltige , mehrspaltige Layouts, das ist ein guter Anfang. Wenn Sie dann granularer werden möchten, denken Sie es als Content-Out-Layout. Wo Sie versuchen, diese Haltepunkte zu erstellen, versuchen Sie, diese Layouts basierend auf den Angaben Ihrer Inhalte zu erstellen. Also, eine Website mit vielen Textartikeln unterscheidet sich wirklich von einer Website mit vielen Videos, so dass Sie Breakpoints trennen möchten, nicht basierend auf iPad, sondern basierend darauf, wenn Ihr Video nicht mehr eine höhere Auflösung hat, oder was auch immer. Also, Sie kommen mit diesen Haltepunkten, indem Sie klein beginnen. Sie beginnen mit Ihren mobilen Layouts, Ihrem mobilen Code, und dann vergrößern Sie das Fenster, bis Sie beginnen zu sehen, dass es schlecht aussieht, und fügen Sie dann einen Haltepunkt hinzu und wiederholen Sie dann. Also, was meinst du mit schlecht? Also, dieser Artikel über Content-Out-Layout, das ist eine wirklich gute Referenz von den Jungs, die Gridset gemacht haben. Vorträge über Sie bekommen diese Muster wie Siebener, wo die zugehörige Beschriftung hängt vom Bild und es ist nicht wirklich, sieht gut daneben. Drifts mit den White-Space Dinge, Sie sehen, dass die Bilder in der linken Spalte machen einen starken vertikalen Block, aber sie sollten tatsächlich mehr mit dem Inhalt auf der rechten Seite von ihnen zugeordnet werden. Dann kneift, wo Ihre Ränder oder Ihre Dachrinnen beginnen zu brechen, so dass Sie sehen, dass viele der Schlagzeilen und Bilder es ist nicht klar, was mit was verbunden ist. Also, da fängt man an zu sagen: „Oh, es muss einen Haltepunkt geben“ oder „Oh, dieses Layout zeigt meine Inhalte nicht wirklich an.“ Die andere Sache zu betrachten, ist die Linienlänge. Wenn sich Ihr Text über die Seite erstreckt, 45 bis 75 Zeichen als optimal angesehen, 90 Zeichen sind immer noch in Ordnung, für schnelles Lesen, aber wenn es wirklich lang wird, würde ein Haltepunkt die Lesbarkeit. Dann auch, wenn Sie ein einzelnes Spaltenlayout haben und Sie diese breiter und breiter dehnen, offensichtlich, dass Leerzeichen nicht ausgelastet sind, und Sie könnten, sobald Sie genug Platz haben, diese nav Elemente nebeneinander schweben und erhalten Sie mehr Inhalte auf dem Bildschirm für den Besucher. Also, das ist, wenn Sie Breakpoints hinzufügen. Also, Sie sehen Layout in etwa so, mit Rastern. Sie müssen nicht immer Grids im Webdesign verwenden, aber wenn es um Entwicklung und besonders responsive Entwicklung geht, machen sie die Dinge so viel einfacher, indem Sie gerade diese Container und diese Vorlagen machen reaktionsschnell, anstatt Sie wissen, 100 verschiedene einzelne Elemente auf der Seite reaktionsschnell. Die Art und Weise, wie Sie Breakpoints hinzufügen, ist durch CSS-Medienabfragen. Sie sehen so aus, es ist nur normalerweise ganz unten in einer CSS-Datei und fangen Sie einfach mit @media an und dann setzen Sie Ihren Parameter es könnte min-width oder max-Breite sein, ich werde über den Unterschied sprechen, und dann sagst du einfach, wenn es auf 768 und höher kommt weißt du, dass ich diesen Block ändern möchte, um schmaler zu sein. Standardmäßig wäre ein Block 100 Prozent Breite, also würden Sie an dieser Stelle sagen, dass ich auf 75 gehen möchte, an diesem Punkt möchte ich unter 50 oder aber sonst planen Sie Ihre Layouts. Aber wir können auch Medienabfragen als tun, oder Haltepunkte als Sass mixin. Wir können auch Breakpoints als Sass Mixin machen. Das sieht also so aus, es ist ein bisschen überwältigend oben, aber wirklich praktisch, wenn Sie es in der gesamten Datei implementieren. Also setzen wir eine Funktion namens Breakpoint und wir übergeben eine Variable namens point, und dann können Sie später unten sehen, gibt es einen anderen Platzhalter, der Inhalt ist. Also, in unserem CSS in unserer Beispielklasse von Intro Dash Held hier, würden wir sagen, fügen Sie dieses Mixin von Breakpoint ein und wir würden es die Variable des Mediums übergeben, und dann ist unser Inhalt, dass Breite gleich 75 ist. Indem wir dieses mehrzeilige Mixin am Anfang einrichten, können wir später einfach sehr klare und einfache Mixins haben. Also, eine ist jedoch, dass es einige Diskussionen darüber gibt, ob es in Ordnung ist, Medienabfragen in Klassen wie diese zu setzen. Es macht das kompilierte CSS viel länger, aber meiner Erfahrung nach ist es viel einfacher zu pflegen und es ist besser, weil das Antwort-Styling nicht vergessen wird. Speziell für Websites mit Plugins, ist es, wenn Sie dieses Plugin später oft entfernen, gibt es Legacy-CSS in der Datei gestreut und wenn Sie alles innerhalb der gleichen Klasse haben , sind Sie sicher, dass Sie die Dinge sauber halten. Folgt Ethan Macrcotte erneut auf Twitter, er hat darüber geschrieben und wir werden sehen, wie sich die neuesten Praktiken herausstellen. Ok. Also, jetzt, wo wir das alles aufgestellt haben, können wir unser Gitter benutzen, das Bourbon Neat ist. Auf der Bourbon Neat Website können Sie einige Beispiele sehen, also hier ist ein Beispiel-Layout. Also, Sie sehen, dass unser Container div nur diese einzeilige Mixin von Include Out-Container benötigt . Dann, wenn wir zwei Spalten darunter machen wollten, würden wir nur diese Zeile von Include-Span-Spalten und sechs von 12 Spalten hinzufügen, ist ein 12-Säulen-Raster. Auf jeder dieser beiden Klassen und sie würden einfach direkt nebeneinander schweben, und Sie können eine beliebige Zahl setzen, also von eins bis 12 darin. Dann müssen Sie nur auf die letzte auf der rechten Spalte setzen , die Sie einfügen möchten Omega, nur um den Rand auf diesem letzten div zu löschen. Also, das sieht so aus, in Ihrem CSS. Wieder muss der Container des äußeren Containers enthalten und für mich werde ich alle Dachrinnen in meinem Gitter entfernen , also werde ich diese Include Zeile gleich Tabelle verwenden. Dann mein Held Bild auf der linken Seite, werde ich sagen, es wird volle Breite auf Handy sein, und es wird volle Breite auf Tablet sein. Aber sobald ich den Desktop-Break-Punkt mag, den ich groß nenne, werde ich sagen, lassen Sie uns einfach acht dieser 12 Spalten verwenden , machen wir es zwei Drittel der Breite der Seite. Auf diese Weise werde ich meinen Autotext auf der rechten Seite passen, so dass die Aufnahme von Span-Säulen von vier, also ist es ein Drittel der Reihe. Dann gebe ich auch den Intro-Blurb diese Aufnahme von Omega so, da es der letzte Abschnitt in dieser Zeile ist. Also, gehen Sie zu den Bourbon Neat Dokumenten, um die Details zu sehen. Wieder ist es eine weitere Sache zu lernen, aber nach meiner Erfahrung ist es super, es ist der einfachste Weg, Gitter zu machen, es ist semantisch, es behält alle Ihre Grid-Klassen in Ihrem CSS, anstatt sie über Ihr Markup verstreut zu haben, wie einige Frameworks und es macht reaktionsschnell leicht, Layouts neu zu fließen. Sie haben vielleicht früher bemerkt, dass ich min-width anstelle von max-Breite bei meinen Medienabfragen gemacht habe, und dies kommt von einem Mobile-First-Ansatz. Luke Wroblewski hat so viel zu dieser Idee beigetragen, und es ist wirklich praktisch, weil ein Mobile-First-Ansatz weniger CSS in ihnen schafft, weil Sie das einfachste Layout als Basis verwenden. Sie brauchen also keine Floats in einem mobilen Layout, wenn Sie sich um ein einziges Layout befinden, und Sie fügen sie nur hinzu, wenn Sie sie in größeren Layouts benötigen Am Ende wird also weniger CSS erstellt. Es erzwingt Optimierungsdiskussionen, weil Sie es mit Telefonen zu tun haben, und Sie denken über das Laden von Seiten und die Größe von Inhalten. Sie verwenden diesen Ansatz der progressiven Verbesserung, dass wir mit der einfachsten Umgebung beginnen, und dann fügen wir Sachen für mehr und mehr fähige Geräte hinzu, im Vergleich zu dieser alten Schule, ältere Methodik von anmutige Degradation. Es erkennt auch die Realität an, dass immer mehr Menschen auf Telefonen sind. Globale Nutzer neigen dazu, über Telefone hinaus so, wenn wir halten denken, unsere Websites als Desktop-Sites, wo wir ein wenig falsch waren. Auch hier zwingt das einspaltige Layout „ Mobile“ zuerst dazu, Ihre Informationshierarchie aufzulösen, indem Sie die Dinge in einer linearen Reihenfolge auslegen. Also, mit all dem, lassen Sie uns unser Responsive Styling machen. Gehen Sie also zu Ihren Vorlagen und machen Sie sie reaktionsschnell, indem Sie diese Medienabfragen hinzufügen. noch keine Sorgen um Typografie oder Farben, es ist wirklich verlockend, voran zu gehen und die einfachen Dinge zu tun, Hintergründe füllen und Schriftarten auszufüllen, aber versuchen Sie, dieses knifflige Zeug zu machen, damit Sie Ihren Prototyp wieder fließen können. Wieder habe ich Ihnen eine Beispielvorlage für Sass-Dateien gegeben, also sollte es ein wenig reibungsloser gehen. Also, lassen Sie Ihr Responses Styling einrichten. 7. Die Eingeweide: Ok. Jetzt werden wir alle Inhalte in unsere Layouts einbinden. Die Werkzeuge, die Sie benötigen, hängen stark von Ihrem Design ab, aber ich gebe Ihnen einen Überblick über die Hauptakteure. Das erste, was ist Typografie. Früher mussten Sie jede ausgefallene Schlagzeile als Bild schneiden, aber eine Reihe von Unternehmen haben nun die technische und lizenzierende Komplexität von Schriftarten im Web herausgefunden . Also, hoffentlich, Ihre Modelle wurden mit Schriftarten entworfen , die Web-Font-Versionen zur Verfügung haben. Typekit war einer der ersten und besten. Das Kit ist einfach einzurichten und es sagt Ihnen, wie viel jede Schriftart zur Dateigröße hinzufügt. Sie geben Ihnen alle Beispiel-CSS, und Sie können Ihre Meinung ändern und Schriftarten später wechseln, wenn Sie möchten. Google ist auch super einfach, und es gibt Ihnen ein gutes Gefühl für das Gewicht der Seite mit seiner kleinen Kurzwahl. Wie Typekit haben Sie nur eine Zeile JavaScript, die Sie in Ihren Header einfügen, und dann haben Sie das Beispiel-CSS, das Sie in Ihren Sass- oder CSS-Dateien verwenden. Font Eichhörnchen ist eine weitere wirklich nützliche Seite. Sie können den gesamten Code generieren, den Sie benötigen, um Schriftartdateien selbst zu hosten, und es ist gut, um Open-Source-Schriften zu finden oder hochzuladen und zu konvertieren. Icons sind ebenfalls viel einfacher geworden. Wenn Sie ein Symbolset verwenden, das Sie online gekauft oder heruntergeladen haben, würden Sie es in der Regel als Bilder aufteilen, oder jetzt können Sie es zu einem Symbol Schriftarten machen. Sie können die Größe, Farbe und andere CSS-Eigenschaften jederzeit ändern . Ich habe mit Symbolset entworfen, das viele große Icon-Familien hat, und tut diese magische Sache, wo Sie das Wort eingeben, wie Liebe, und es verwandelt es in das Symbol, ein Herz. Dies gilt sowohl für Mockups als auch für Code, daher ist es schnell und semantisch. Wenn Sie die Schriftart kaufen, wird sie mit dem Beispiel-CSS geliefert, das Sie benötigen. Ein iCOMoon macht wirklich Spaß, wenn Sie Ihre eigene Icon-Schriftart erstellen möchten. Ich arbeitete auf einer Seite namens Riffle, wo ich eine benutzerdefinierte Schriftart für unsere 20 Icons erstellt. Sie können dort auch Open-Source-Symbole finden und verwenden, und Sie können sie herunterladen, ändern und sie dann neu erstellen, wenn Sie möchten, wieder, erstellen Sie Ihre eigene Symbolschriftart. Es gibt auch ein Vektorformat, das im Web funktioniert, SVG. So können Sie Vektorgrafiken und Skizzierer Illustrator machen und sie im Web verwenden. Dies ist ideal für HD-Displays und für die Dateigröße. Folgen Sie also einfach dem Tutorial und den CSS-Tricks, wenn Sie das tun möchten. Videos angeht, sind ansprechende Videos eigentlich ziemlich einfach. Normalerweise hosten Sie die Videodatei nicht auf Ihrem eigenen Server mit Vimeo oder YouTube, so dass Sie nicht mit allen Bandbreitenproblemen zu tun haben, aber Sie müssen immer noch herausfinden, wie Sie sie reagieren können. Aber wieder, es ist ziemlich einfach, weil es wirklich nur eine Hauptoption gibt. Es ist dieses tolle Plugin namens Fitvids. Also, Sie laden einfach die Datei herunter, Sie fügen die JavaScript-Datei zu Ihrem Asset-Ordner hinzu, und dann rufen Sie sie von Ihren HTML-Seiten auf und wenden Sie sie auf Ihr Video-Mockup an. Bilder sind wahrscheinlich der zeitaufwändigste Teil des Asset-Exports. Vielleicht stellt der Designer Slices bereit oder vielleicht möchte der Entwickler, dass die Quelldateien diese Entscheidungen einfach selbst treffen. Aber wer auch immer es tut, wollen Sie natürlich, dass die Bilder so klein wie möglich sind, während die bestmögliche Qualität beibehalten wird. Daher ist die Palette „Für Web speichern“ in Photoshop der Standardort, um dies zu tun. Sie können hier die vier Ansicht sehen, wo Sie das Original oben links sehen und Sie können beurteilen, ob Sie mit diesem JPEG unten links auskommen können, was weniger als ein Zehntel der Größe ist, oder brauchen wir die volle Farbe Qualität des PNG oben rechts, die nur die Hälfte der Größe ist. Also, Sie treffen diese Entscheidungen hier und Sie können sie anpassen, wie Sie wollen. Ich mache mir keine Sorgen um Retina-Bilder für Prototyping, aber wenn Sie eine Website für echte machen, werden Sie wollen, um es zu suchen. Das würdest du auch hier tun. Sie würden JPEG mit der doppelten Größe für das HD-Display exportieren, und Sie können damit mit etwa 40 Prozent Qualität auskommen. Aber, nochmal, schauen Sie sich das an. Ich mache typischerweise Prototypen für kleinere Standorte und nicht für Retina-fähige Websites. Wenn Sie für das Laden von Seiten optimieren, müssen Sie auch CSS Sprites in Betracht ziehen. Hier ist ein Beispiel aus der Google-Suchergebnisdatei. Jede einzelne Grafik auf der Seite ist Teil dieses einen Bildes. Also, der Browser des Benutzers muss nur einen Anruf an den Server und nicht 30, was eine große Einsparung in der Ladezeit der Seite ist. Es gibt Werkzeuge, die Ihnen helfen, diese Sprites zu erstellen und zu pflegen , weil es eine Art Schmerz ist. Wenn Sie in Sketch arbeiten, können Sie die PNGs exportieren, indem Sie einfach eine beliebige Datei und beliebige Ebene in Finder eine beliebige Ebene in Finderziehen und diese Ebene als PNG-Slice exportieren. Oder Sie können auf die Ebene klicken, und wenn Sie unten rechts sehen, gab es eine Schaltfläche, die sagt Exportierbar machen und dann kommt es mit diesen Optionen, die Sie bestimmte Exporteinstellungen festlegen können. Also, Sketch ist wirklich großartig, wenn Sie in den Bau der Website übergehen. Also, wieder, in Photoshop würden Sie Save for Web oder Sie könnten auch versuchen, diese App namens Slicy, die automatisch generiert Slices aus allen Ebenen. Skizze ist groß, weil der „Drag & Drop“ und auch die besonderen Einstellungen, und verwenden und speichern Sie alle diese Bilder in Ihrem Assets Schrägstrich Bilder Ordner. Wenn Sie reaktionsschnelle Bilder machen, müssen Sie sich zwei Teile vorstellen Sie skalieren das Bild und liefern es dann. Skalierung werden nur die Bildbreite und die Prozentsätze festgelegt. Also, das ist ziemlich unkompliziert. Aber wenn Sie freundlich zu Ihren mobilen Nutzern sind, die dieses hochauflösende Heldenbild nicht benötigen, werden Sie ihnen auch eine kleinere Version jedes Bildes zur Verfügung stellen. Es ist wie Fitvids darin, es gibt einen echten Weg, es zu diesem Zeitpunkt zu tun, obwohl die Technologie sich verändert, während wir sprechen. Also, das heißt Picturefill, und es ist eine weitere HTML-, CSS- JavaScript-Kombination, wo Sie einfach den Anweisungen folgen und den entsprechenden Code in Ihre Seiten einfügen. Aber dieser wird tatsächlich Teil der HTML-Sprache in der Zukunft werden, so dass Sie im Voraus lernen. Andernfalls werden Sie nur Ihre Bilder für Desktop-Größen exportieren und Prozentsätze verwenden, um sie nach unten zu skalieren und alle Ihre mobilen Benutzer sehr traurig zu machen, wenn sie ihre Bandbreitenrechnungen erhalten. Also, mach weiter und mach das. Bereiten Sie Ihre Assets vor, wählen Sie Ihren Webfont-Service und fügen Sie dieses Skript zum Seitenkopf hinzu, damit Sie in der nächsten Lektion mit dem CSS beginnen können. Sie tun dasselbe für alle Symbolschriftarten, die Sie verwenden möchten, und exportieren dann alle restlichen Bilder in Desktopgröße. Verwenden Sie SVGs, wo Sie können und versuchen Sie, alles andere als JPEGs oder PNGs zu optimieren , wenn Sie sie benötigen. 8. Die Haut: Okay, jetzt lassen wir uns endlich wirklich in das Styling unserer Seiten einsteigen. Also, unsere Hintergrundlesung dafür wäre das CSS3 Buch von A Book Apart. Auch hier möchten wir über Module nachdenken und wie dies für das Styling gelten könnte. Daher möchten wir uns daran erinnern, dass Websites aus Systemen bestehen. So haben Sie es nicht nur eine Million verschiedene Textstücke. Sie haben ein H1, ein H2 oder ein H3. Also, Sie möchten diese zuerst codieren und dann so wenige Variationen wie möglich machen. Also, nicht all diese Millionen von einzelnen Stilen, sondern modulare Systeme von Stilen. Also, in jedem Ihrer Partials, also zum Beispiel, Ihr Menü teilweise, möchten Sie von allgemein zu spezifisch gehen. Also, zuerst machen Sie Ihre Basisstile für all dieses Element oder die Standardklasse für dieses Element, dann machen Sie Ihre modularen Stile. Dies sind also die wiederverwendbaren Teile, die Sie auf verschiedenen Seiten und Vorlagen haben, und dann erhalten Sie in die seitenspezifischen Vorlagen, wenn Sie etwas haben , das ein benutzerdefiniertes Layout ist. Denken Sie also immer darüber nach, wie Sie etwas zu einem modularen Stil anstelle eines einzigartigen Stils machen können . Also, Erste Schritte. Sie haben eine Website, die in etwa so aussehen könnte. Es ist reaktionsschnell, aber vielleicht sind die Gitter noch nicht ganz perfekt und Sie haben keine der Styling-Setup. Aber der Code sieht besser aus. Wenn Sie es organisiert, eingerückt haben , können Sie sehen, dass wir unsere semantischen Klassennamen drauf haben. Es ist alles bereit, gestylt zu werden. Also, dieser Teil wird wirklich schnell gehen, wenn wir unser Markup und Reaktionsfähigkeit richtig einrichten. Also, Sie werden nur jedes dieser Elemente auswählen, so dass die Promo-Zeile oder das Promo-Retreat-Div, und dann durchgehen und alle Eigenschaften anwenden, die es benötigt. Genau wie HTML ist es ein großes Vokabular, das Sie erstellen können. Dies sind alle Buchstaben, die Sie verwenden können, und Sie werden nur die wichtigsten verwenden, um zu starten, Hintergrund, Rand, Farbe. Aber es gibt einige neuartige wie Flexbox, die kommen, die Ihr Leben viel einfacher machen werden, also macht es Spaß, diese weiter zu lernen. Wieder hat Coda Bücher eingebaut. Also, wenn Sie nicht sicher sind, wie Anzeigeblock oder Anzeige Inline funktionieren oder Inline-Block anzeigen, können Sie es einfach direkt dort nachschlagen, oder natürlich sollten Sie immer googeln. Sie können Websites wie kann ich verwenden, um zu wissen, was die Browser-Fallbacks sind und wie neu diese Eigenschaft ist. Dann können Sie auch verschiedene Arten von Selektoren verwenden, um spezifischer zu sein. Sie haben wahrscheinlich einen Doppelpunkt oder einen Doppelpunkt gesehen, um einen Link anzuzeigen, der ausgewählt wurde, oder einen Link, der mit dem Mauszeiger bewegt wird. Aber es gibt alle Arten von anderen Pseudo-Selektoren, bei denen Sie das n-te Kind tun können , um jedes dritte Element in einer Liste zu greifen, oder das letzte Kind, wenn Sie den unteren Rand auf etwas in einer Liste von Elementen ausblenden möchten . Also, wieder, lernen Sie diese. Sie können Ihnen das Leben viel einfacher machen. Es gibt auch einige neue Tools, mit denen Sie Ihre Quelldateien in Code konvertieren können. Wenn Sie Photoshop verwenden, gibt es Project Parfait, eine neue Sache von Adobe, wo Sie die PSD hochladen und Ihnen das CSS für jedes Element geben. Dann können Sie in Sketch beliebige Elemente auswählen und das CSS kopieren, rechten Maustaste darauf klicken und Sie erhalten ein Copy CSS Panel, und dann erhalten Sie so etwas. Sie sehen auf der rechten Seite, es ist mir gesagt, die Schriftfamilie, die Schriftgröße, die Farbe, und sie haben es in RGBA getan, weil es halbtransparent ist, und dann die Zeilenhöhe. Also, es gibt Ihnen die Grundlagen und dann können Sie von dort aus bauen. Eine Sache, die man über CSS wissen muss, ist, dass es in vielen Browsern immer noch einige Diskrepanzen gibt. In der Regel müssten Sie verschiedene Präfixe für Eigenschaften wie Border-Radius wie für Mozilla oder für Opera oder für alle anderen großen Browser setzen. Das sieht in etwa so aus. Für WebKit ist hier die Version der animationseigenschaft der background -Eigenschaft. Es scheint also ziemlich mühsam zu sein. Also, müssen wir das wirklich alles tun? Zum Glück nein und das ist ein weiterer Vorteil von Bourbon. Also, wenn Sie diese Mixins wieder verwenden, können Sie einfach ein einzeiliges Mixin verwenden und die Variable für Ihren Border-Radius übergeben, und dann generiert die Bibliothek alle Hersteller-Präfixe in Ihr CSS nach Bedarf, und das Beste daran ist, dass Wenn die Browser ihren Code ändern oder wenn Sie keine Anbieterpräfixe mehr benötigen, wird das Mixin aktualisiert, sodass Sie nicht nachvollziehen müssen, welche Präfixe noch benötigt werden oder nicht. Sie können sich darauf verlassen, dass sich die Bibliothek darum kümmert. Auch hier werden Ihnen CSS-Tricks einige andere Optionen geben. Ich benutze Bourbon. Ich benutze eine Bibliothek. Aber es gibt einige Tools wie Grunt oder Autoprefixer, wenn Sie komplexere Apps erstellen, die Sie verwenden können. Also ja, lernen Sie weiter CSS. Es gibt eine Menge Ressourcen online. Es gibt all diese Medienabfragen sind Teil dieser App-Regeln, Schriftart Gesicht, wenn Sie Web-Fonts tun, das ist Teil dieser App-Regeln, also warum nicht lernen Sie den Rest von diesen, und dann sind Pseudo-Elemente, wo Sie eine viele coole Dinge , wo Sie tatsächlich in Ihrem CSS Inhalt in Ihren HTML einfügen können. Also, wenn Sie jemals ein Symbol vor einem Link hinzufügen möchten, können Sie ein Pseudo vor dem Element machen und es dann mit Ihrer Web-Schriftart formatieren und ein Symbol hinzufügen. Auch hier ist das CSS, es kann gefärbt und dimensioniert werden, ohne Ihr Markup zu ändern. Also, das Mozilla Developer Network hat ein großartiges CSS Referenzhandbuch, so dass Sie das überprüfen können. Danach können wir über mehr Effekte nachdenken. Wenn Sie im Laufe der Zeit Animationen und Übergänge und andere Arten von Effekten durchführen, möchten Sie sich an Ihre Markenrichtlinien erinnern. Also, wenn die Dinge nur erscheinen oder gleiten, sollte es im Einklang mit der ursprünglichen Persönlichkeit, die Sie für Ihre Marke festgelegt haben, und idealerweise würde Ihr Designer auch Stil leiten. Obwohl es oft vergessen wird. Also verwende ich jQuery meistens. Dies ist die beliebteste Animationsbibliothek. Es ist für immer da und wenn es so ziemlich alles gibt, was ich will, kann ich normalerweise in jQuery nur einfach ein- und ausblenden für Hover-Layer finden. Manchmal rutschen einige nach unten oder rutschen nach oben. Wenn Sie eine einseitige Website sehen und es einen Bildlauf durchführt, um zu bewirken, wo es ein oberes Navigationsgerät gibt, und Sie klicken und es scrollt auf der Hälfte der Seite nach unten, das normalerweise mit jQuery getan. Also, hier können Sie einfach gehen und das Feld hier durchsuchen , um den bestimmten Effekt zu finden, den Sie benötigen. Es gibt auch, für einige der häufigsten Fakten, gibt es Tutorials oder Bibliotheken, die zusammengestellt wurden. Also der Parallax-Trend, der mit diesen einseitigen Seiten umging, wo die Front- und die Back-Layer mit unterschiedlichen Raten scrollen und diesen Videospiel-Effekt erzeugen würden , der Parallax genannt wird. Es gibt Demos, die auf der ursprünglichen Nike Better World basieren, der ersten Seite, die das getan hat. Sie können sich also Bibliotheken und Dateisysteme ansehen, um Ihnen dabei zu helfen, diese Art von Dingen zu erledigen, oder Dinge wie dieses Gitterlayout, das auf Pinterest und anderen Websites verwendet wird. Das wurde von David DeSandro entwickelt. Es war ursprünglich das Masonry Plug-in und er hat jetzt ein Paar, da gibt es Isotop und Packery. So können Sie sich diese JavaScript-Bibliotheken ansehen und das gibt Ihnen die Möglichkeit, komplexe Layouts zu erstellen. Dies ist eine, wo genau wie Bourbon brauchen, es macht ein einfaches Gitter, aber mit Mauerwerk oder Isotope oder Packery. Packery können Sie diese Elemente per Drag & Drop in andere Abschnitte ziehen. Isotop können Sie sie filtern, sodass Sie auf der Grundlage Ihrer Sortierkriterien klicken und den Neufluss des Rasters beobachten können . Also, es gibt Ihnen nur eine komplexere Interaktivität. Das könnte also eine andere ganze Klasse an sich sein. Also, fangen Sie an, etwas davon zu untersuchen, wenn Sie interessiert sind. Also, von hier aus, gehen Sie einfach rein und beginnen Sie mit dem Styling Ihrer Seiten. Ein Beginnen Sie mit den CSS-Eigenschaften für Ihre Container, und Ihren Text und Ihre wichtigsten Assets, und fügen Sie einige Antworten Styling für jeden Haltepunkt, wie in Ihren Mockups gezeigt. Denken Sie daran, von allgemein zu spezifisch zu gehen. Also, versuchen Sie, universelle Klassen so viel wie möglich zu machen, und dann modulare Klassen, und dann letztes Mittel sind einzelne Klassen. Also, viel Spaß. 9. Tests: Okay, wir sind in der Homestretch auf diesem und jetzt zu jedem Lieblingsteil, der getestet wird. Es ist wirklich wichtig, auf Ihre Projektanforderungen zurückzugehen und sich daran zu erinnern, was Sie vereinbart haben, auf welchen Geräten unterstützt werden müssen, welche Browser unterstützt werden müssen, da sie sich zwischen Plattformen und Geräten wirklich unterscheiden. Genau wie beim Bauen, Testen machen uns bessere Designer, weil wir verstehen, dass nicht jeder auf einem iPhone ist und wir verstehen, wie unterschiedlich alle verschiedenen Proportionen sind und Schnittstellen sind und es macht uns zu besseren Designern. Also, Jacob Nielsen spricht über Usability und wie Sie jedes Mal iterieren, wenn Sie versuchen, werden Sie wahrscheinlich etwas reparieren oder die Schnittstelle ein wenig ändern und das ist eine Iteration. Also, während Sie dies tun, werden Sie alle Arten von Fehlern und Dingen finden , wo Menschen Dinge nicht sehen oder sie nicht wie erwartet arbeiten oder es funktioniert nicht auf diesem bestimmten Gerät und so Sie loswerden so viele Interaktionen Fehler, die nur vorhanden sind, weil die Websites ein komplexes Medium sind und schließlich werden Sie sogar zu einem Ort zu erreichen, wo Sie anfangen die Schnittstelle neu zu konzeptualisieren, die Sie erkennen, dass das mentale Modell des Benutzers vielleicht völlig anders ist und Sie kann es auf eine andere Art und Weise neu aufbauen und Dinge rationalisieren. Es ist also etwas, dass es ein kontinuierlicher Prozess des Bauens und Testen und Bauens und Testen sein wird. Also, wenn Sie versuchen, verschiedene Geräte zu testen, im Idealfall testen Sie auf echten Geräten, aber wir haben nicht alle eine Million Telefone. Möglicherweise haben Sie ein oder zwei alte Telefone oder Sie können einige von Freunden ausleihen aber größere Unternehmen halten ein ganzes Gerätelabor im Haus. Weil es viele Emulatoren gibt , aber sie rendern den Code nicht genau auf die gleiche Weise. Wenn Sie also wirklich richtig codieren, möchten Sie Zugriff auf ein Gerätelabor haben. Also, das erste, was ist, nur können Sie beginnen, über die verschiedenen Breiten nachzudenken. Wir könnten also bei 320 anhalten, weil dort iPhones sind, aber einige Geräte sind noch schmaler, also können wir uns die ansehen und hier ist eine einfache Sache, die Matt Kersley darauf gebaut hat, sie alle im selben Fenster hat, also Sie müssen nicht zu verschiedenen Geräten gehen, aber Sie können zumindest einige Bruchpunkte für Ihr Layout alle nebeneinander sehen und beginnen, dort einige Pläne zu machen. Sie können Kanteninspektion auch verwenden, wenn Sie eine Ebene ernster sein möchten. Auf diese Weise können Sie ein Profil einrichten , das auf jeder Art von Gerät funktioniert, die Sie mit ihm verknüpfen. Also, Sie können dann Ihre Debugging-Tools auf jeder dieser Plattformen verwenden und es ist ein wenig Setup, aber es ist ein wirklich hilfreiches Tool, wenn Sie versuchen , mit dem Universum der Geräte umzugehen, die da draußen sind. Dann natürlich Browser. Browser-Stack ist mein Hauptwerkzeug, mit dem Sie sich bei einer virtuellen Maschine anmelden können. So können Sie sich bei Internet Explorer anmelden, ältere Versionen und sogar Firefox sieht plattformübergreifend anders aus. Sie müssen also wirklich eine Menge Tests durchführen, und das hängt wiederum wirklich davon ab, ob Sie Prototyping sind und wie ernst Sie Prototyping sind oder wenn Sie eine Website für einen Start bereit machen, es ist sehr unterschiedlich, wie viel Arbeit Sie tun müssen hier. diesem Tool können Sie also tatsächlich in einer virtuellen Maschine navigieren , was praktisch ist, wenn Sie keinen Zugriff auf die tatsächlichen Systeme haben. Aber für mich ist der Haupttest, den ich mache, auch mit Benutzern. Wieder, wir alle haben diese Malkovich Bias, wo es wirklich schwer ist, wir alle stellen uns vor, dass die Leute das Internet genau auf die gleiche Weise nutzen, wie wir es tun. Ich habe viel über User-Tests in der ersten Klasse in dieser Serie gesprochen. Aber für jetzt werden wir nur sagen, dass an dieser Stelle im Prozess usertesting.com ist das hilfreichste Tool, das Sie senden können, Sie eine Reihe von Aufgaben posten und dann können Sie aus ihrem Pool von Testern wählen und Sie können Alter angeben, Fähigkeiten, eine Plattform, auf der sie sind, es ist wie $40 pro Test, es lohnt sich und dann können Sie das Video des Tests mit etwa 150 Prozent wiedergeben, wie 1,5 Geschwindigkeiten, so dass Sie sie schneller sehen können, es dauert eine Weile wenn Sie Wenn Sie eine Tonne Tests durchführen, möchten Sie normalerweise wie drei, fünf Personen bei jeder Iteration testen, aber Sie können die Wiedergabe beschleunigen. Es sieht so ähnlich aus, dass Sie durchgehen und oben rechts auf der Seite sehen Sie diesen Benutzer die erste Hälfte, die wir ihnen gegeben haben, und wir können Kommentare schreiben, wir können Zeitstempel die Notizen auf der rechten Seite für uns zurück zu gehen , wie wir sind Überprüfung des Tests. Also, das ist absolut ein unschätzbares Werkzeug, wenn Sie es tun, wenn Sie mitten in der Entwicklung sind und wenn ich in der agilen Entwicklung gearbeitet habe , würden wir Benutzer jeden einzelnen Sprint testen. Also, wir würden etwas bauen und dann ein paar Leute durch es schicken, die uns über mehrere Plattformen hinweg testen lassen und sehen, wie es wirklich aussah und wie Benutzer wirklich die Dinge verstanden haben. Wir würden das bei jedem einzelnen Sprint tun. Die Art und Weise, wie Sie Benutzertests vorbereiten, ist mit Szenario. Also, wieder habe ich dies im Detail in der Planungsklasse in dieser Seriedurchgemacht der Planungsklasse in dieser Serie aber Sie identifizieren im Grunde nur die wichtigsten User Stories wie ein wiederkehrender Benutzer versucht, den Support zu kontaktieren und dann formulieren Sie sie als Szenarien für den Test. Also, das hilft der Person, die den Test macht, sich in diese Denkweise zu setzen. Also würden Sie sagen, Sie haben einen Fehler in Ihrem Konto gefunden und Sie müssen den Kundenservice kontaktieren und dann von dort aus können Sie bestimmte tun, es gibt alle Arten von Tests darüber, was Sie zuerst auf dieser Seite sehen oder wo würden Sie gehen, um zu sehen wie sie Ihre Layouts und Ihre Website interpretieren. Die letzte Art von Test, auf die sich wirklich konzentrieren soll, ist das Laden der Seite. Wenn Sie auf diese und die Optimierung der Geschwindigkeit und wieder für Prototypen sind, ist es nicht immer eine Variable, aber für Produktionsstandorte ist es eine riesige Variable. Sehen Sie sich an, wie Paul Irish einen großartigen Vortrag machte, der das Laden der Seite erklärt und wie es funktioniert, und es macht Sie wirklich verstehen, wie das Internet tatsächlich funktioniert. Dass die Dinge, die beeinflussen, wie schnell Ihre Seite in der Reihenfolge ihrer Wichtigkeit geladen wird, Nummer eins sind diese Sache genannt Geschwindigkeitsindex, die ist, wie schnell das Zeug über der Falte lädt. Sie möchten wirklich optimieren, Sie können wie verrückte Techniken tun, um Ihr CSS für nur das Zeug über der Falte wie wirklich fortgeschrittene Techniken zu inline Ihr CSS für nur das Zeug über der Falte wie , wenn Sie wirklich ernst mit diesem Zeug sind. Die zweite Sache ist, dass Sie die Anzahl der Gesamtanfragen reduzieren möchten, wie wir mit Bildern gesprochen haben, jede Datei, die Sie verknüpfen, ist wie ein Telefonanruf an den Server. Deshalb würden Sie ein CSS-Sprite machen, weil es ein Anruf statt 50 ist. So reduzieren Sie die Anzahl der Anfragen, die Sie stellen, und dann geht es um Ihre Bildübertragungsgröße. Also, natürlich Bildoptimierung ist riesig, Sie wollen Ihre JPEGs schneiden, schneiden Sie Ihre Fotos so viel wie möglich unter Beibehaltung der Qualität und das ist über die Gesamtübertragungsgröße. Also all die anderen Dinge Ihr JavaScript, Ihr CSS, sie summieren sich, sie sind viel kleiner als Bilder, aber sie addieren sich und dann die Anzahl der Bildanforderung. Also wieder, CSS sprites diese Art von Sache. Also, das ist wieder, für wirklich, wenn Sie gehen pro auf Ihrer Website, für Prototyping dies nur macht es Spaß zu wissen, weil es Ihnen hilft, das Internet zu verstehen , aber Sie vielleicht nicht zu viel Zeit damit verbringen für einen schnellen Prozess. Also, die wichtigsten Werkzeuge dafür sind Sie gehen YSlow, ist das Beste und es ist nur, dass Sie wie eine Chrome-Erweiterung oder ein Lesezeichen darauf bekommen können und klicken Sie einfach auf die Schaltfläche und es wird Ihre Website analysieren und dann natürlich die Chrome Dev-Tools, Tauchen Sie ein und Sie können Timelines sehen, wann jedes Element auf der Seite geladen wird, und dann gibt es auch eine Website namens Webseitentest, die durchlaufen und eine Analyse für Sie durchführen wird. Also, YSlow sieht einfach so aus und es macht Spaß nur weil es dir wieder ein Gefühl gibt, wie das Internet funktioniert, dass es mir einen Fehler gibt, dies ist eine Analyse von twitter.com und es sagt, sogar Twitter bekommt ein F. Angenommen, sie verwenden kein Content-Delivery Network oder sie verwenden nicht abgelaufene Header. So gibt es Ihnen wieder einen Sinn, ein Vokabular für die technische Sprache des Internets, was ziemlich interessant ist. Also, gehen Sie durch und skizzieren Sie Ihre Tests, gehen Sie zurück zu Ihren Projektanforderungen und erstellen Sie einen Plan, für welche Geräte Sie testen müssen und wie Sie diese Geräte oder virtuellen Geräte, welche Browser Sie werden testen und noch einmal, wie Sie das tun werden, welche Benutzertests Sie tun möchten. es um einen bestimmten Fluss, den du machen willst? Geht es darum, zu sehen, wie diese Bildschirme auf verschiedenen Plattformen funktionieren? Führen Sie erneut einige Geschwindigkeitstests aus, und wenn Sie an der Optimierung Ihrer Website arbeiten, gehen Sie zurück und arbeiten Sie daran, Ihre Assets kleiner und prägnanter zu machen. 10. Dokumentation: Ok. Wir sind am letzten Schritt in unserem Web-Entwicklungsprozess, der Dokumentation ist, und ja für andere, aber definitiv für sich selbst. Das ist unerlässlich. Die Nummer eins sind Kommentare. Sie werden sich so sehr bedanken, wenn Sie gehen, um Ihre Website in einem Monat zu bearbeiten und Ihr Code ist gut kommentiert und es ist leicht herauszufinden , welche Klassen auf welche Abschnitte und welche Seiten angewendet wurden. Der große Test ist jedoch, dass jemand anderes Ihren Code lesen und verwenden kann. Es ist sehr selten, dass eine Seite nur von einer Person bearbeitet wird. Also, fast immer kommt später jemand rein. Vor allem, wenn es sich um eine Client-Site handelt und sie in der Lage sein müssen, zu verstehen, wie die Website funktioniert. Kommentieren Sie Ihren Code ist eine andere Sache, die professionelle Entwickler von Amateuren trennt. Sie müssen sich keine Sorgen machen, zu viel Masse zu Ihren Dateien hinzuzufügen, und besonders in Sass können Sie die einzeiligen Kommentare machen, die nur Zeilen sind, die mit zwei Schrägstrichen beginnen und diese aus dem kompilierten CSS entfernt werden. Also, wenn Sie die Sass-Datei öffnen, werden sie da sein, um Ihnen zu helfen, aber das CSS wird überhaupt nicht vergrößert. Und dann gibt es auch regelmäßige, die zwischen den Schrägstrichen mit dem AsteraX liegen und das sind mehrzeilige Kommentare. Diese werden erhalten, wenn Sie also etwas Wichtiges über Ihre Quellen oder über Ihre Abschnitte haben wollten , , um immer noch im CSS zu erscheinen, ist das in Ordnung, aber wieder Benutzer wirklich zu. Es fügt wirklich nicht viel und die Dateigröße hinzu, und Sie können sogar Ihren Minifier festlegen, um den gesamten Leerraum zu entfernen und alle Kommentare zu entfernen. Also, Sie müssen sich keine Sorgen darüber machen, zu viele Kommentare hinzuzufügen , schreiben Sie einfach alle Ihre Notizen da drin wie verrückt. Dann möchten Sie unbedingt eingehen und Ihre ReadMe-Datei ausfüllen. Also, Sie können hier sehen, ich bin zurück gegangen und habe Ihnen gesagt, welche Ordner in dieser Demo sind, Repository und in meinem GitHub-Konto gibt es eine Vorlage, es gibt einen Standard und dann arbeite ich an dieser Demo-Website. Also, geh zurück und fülle das aus. Also, es ist leicht, wieder für sich selbst und für andere zu verstehen, und die nächste Ebene ist, einen Styleguide zu machen. Also, das wird Ihnen gut dienen, wenn die Website wächst. Wenn Sie planen, dass dies größer wird, sollten Sie einen Styleguide in Betracht ziehen, und das ist notwendig, weil wir kein statisches Element entwerfen. Poster, es ist wie es alles eingesperrt ist, senden Sie ein Depressivum es getan ist, und ein Buch, das Sie ein wenig systematischer sein müssen, Sie wollen sicherstellen, dass die Titel jedes Kapitels die gleiche Größe und Position haben und was auch immer, aber die Größe ist unendlich komplexer. Also, wir können nicht vorschreiben, wir können keine Spezifikationen für jede einzelne Seite erstellen. Sie ändern sich, sie reagieren, sie sind flexibel. Daher ist ein Styleguide wirklich der beste Weg, um das Aussehen Ihrer Website zu erhalten da es Entwicklern und Designern leicht macht , mit der bereits geleisteten Arbeit fortzufahren. Alist Apart hat wie immer tolle Artikel dazu. Sie hatten gerade einen auf der Erstellung von Style-Guides von Susan Robertson , der eine großartige Front-End-Entwickler ist. Sie hat eine ganze Liste von Beispielstil-Guides zusammengestellt. Sie können sehen, wie diese in der Regel funktionieren und wie sie tendenziell nützlich für Webentwickler und Webdesigner sind. [ unhörbar] wie immer, ist eine großartige Referenz für Branding und diese Art von Sachen und so hier ist ein Beispiel dafür ein guter Styleguide für eine Website aussieht. Also, auf der linken Seite sehen Sie alle unsere Navigation. Wir haben all unsere Hauptelemente angesprochen. Das Raster, die Typografie, wenn wir Foren haben, Navigationstabellen, wo sie sogar benutzerdefinierte Dinge haben, die sie Lamellen oder Freddys Special nennen, Freddie-Symbole und hier ist ein Beispiel für ihre Feedback-Nachrichten. Also, als Designer, wenn Sie eine neue bezahlt für die Website entwerfen und Sie müssen eine Fehlermeldung erscheinen, sollten Sie nicht entwerfen eine brandneue. Du solltest das Zeug benutzen, das schon da ist. Also, wenn wir einen Styleguide haben, kann ich einfach durchstöbern, ich kann sehen, wie es aussehen wird, also kann ich es in meinen Design-Comps markieren, und dann gibt es sogar Code und es ist eine Beschreibung, wie man ihre bestimmte Klassen. Alle auf derselben Seite. Das ist also großartig und sehr hilfreich. Yelp hat eine weitere riesige, wo sie einige Zeit damit verbracht haben, Ihnen alle Header, die Haupttypografie, alle verschiedenen Schaltflächen und dieKlassen zu zeigen die Haupttypografie, alle verschiedenen Schaltflächen und die , die Sie verwenden würden, um diese Schaltfläche zu generieren. Also wieder, jemand wird nicht einen anderen kleinen orangefarbenen Knopf von Grund auf codieren, aber sie wissen, dass es bereits einen gibt. Hier ist eine, die ich für Riffle gemacht habe, wo es gerade war, hier sind unsere Hauptfarbvariablen, die wir verwenden, und dann ging ich durch alle, sogar die JavaScript-Muster und einige der QA-Muster, die wir verwendeten, war wirklich hilfreich, um haben, dass alles kodifiziert. Sie werden ziemlich riesig, wie Sie auf der linken Seite sehen können, das ist, wie lange dieser Style Guide endete. Wenn Sie nur einen kleinen Prototyp machen, müssen Sie dies nicht tun, aber wenn Sie irgendeine Art von Website tun, wenn Ihre Website wird eine gewisse Langlebigkeit haben dann gehen Sie voran und tun dies wird Ihr Leben auf lange Sicht leichter machen. Der grundlegende Kern besteht darin, dass Sie alle Grundelemente von HTML und dann alle speziellen Callouts und spezielle Module abdecken alle Grundelemente von HTML und dann alle speziellen Callouts und , die für zukünftige Layouts und für Ihre Marken, Online-Persönlichkeit replizierbar sind . Wieder, Brad Frosts' Muster Labor, Website ist ein cooles Beispiel. Eine coole Ressource, die Sie als Beispiel dafür verwenden können, um Ihren eigenen Styleguide zu erstellen. Also, gehen Sie durch und bereinigen Sie, kommentieren Sie Ihren Code, und dann können Sie herunterladen. Ich habe eine Style me Seite von Simon Cox Pin gehämmerte Vorlage enthalten, das ist wirklich praktisch, hat all diese HTML-Elemente. Also, Sie könnten einfach durchgehen und sicherstellen, dass es aussieht, wie Sie es erwarten und stellen Sie sicher, dass alle diese Basiselemente gestylt sind und fügen Sie dann weitere Elemente hinzu und erstellen Sie weitere Styleguides, wenn Sie möchten, und stellen Sie sicher, dass Sie aus dem Readme.MarkDown für Ihr Repo und Sie können Markdown in Stack-Edit oder Dateien wie iA Writer auf Ihrem Desktop bearbeiten und es dann einfach mit dem Quellbaum erneut hochladen. Also, das war's. Wir haben es geschafft. Du hast eine ganze Website aufgebaut, du kennst einen guten Prozess und hoffentlich wirst du es weiterhin zu deiner eigenen machen und die Stücke finden, die am besten für dich funktionieren und immer weiterlernen. Also, wenn Sie etwas anderes haben, das Sie lernen möchten , oder irgendwelche Fragen zu all dem, es ist eine Menge Zeug. Fühlen Sie sich frei, mich zu twittern und lassen Sie mich wissen, was Sie denken oder worüber Sie mehr wissen möchten. Ja liebte es, liebte es, weiter zu reden. Vielen Dank. 11. Was kommt als Nächstes?: Weg.