[MUSIK]
Heutzutage in der Web-Entwicklungswelt hören wir oft Leute,
die die Begriffe responsive Design und mobilen ersten Ansatz erwähnen.
Lassen Sie uns versuchen zu verstehen, was mit diesen Begriffen gemeint ist und
wie sie sich auf die Art und Weise auswirken, wie Sie Ihre Websites und Webanwendungen entwerfen.
Ihre offensichtliche Frage wird sein, warum Responsive Design in Betracht ziehen?
Um uns zu helfen, dies zu verstehen, lassen Sie uns überlegen, wie Menschen heutzutage auf Websites zugreifen?
Traditionell, wenn Websites zum ersten Mal entworfen wurden, könnten Sie so ziemlich davon ausgehen
, dass Menschen Ihre Websites von einem Computer aus durchsuchen werden.
Heutzutage könnten Ihre Websites von einem Smartphone, einem Tablet oder
einem Computer mit unterschiedlichen Bildschirmgrößen und Bildschirmauflösungen besucht werden.
Wie rendern wir unsere Websites konsistent auf Geräten unterschiedlicher Bildschirmgröße?
Die Einheitsgröße passt allen Ansatz, dass traditionelle
Website-Designer haben nicht mehr feste Rechnung genommen.
Wir brauchen einen besseren Ansatz, einen Ansatz, der
Ihre Website automatisch an die Größe des Bildschirms anpasst, auf dem sie angezeigt wird.
Hier müssen wir einen Ansatz verfolgen, um sich an den View-Port des Benutzers anzupassen.
Dies muss in Ihr Website-Design und Entwicklung integriert werden
, damit es sich automatisch an das Darstellungsfenster des Gerätes des Benutzers anpasst.
Um Ihnen zu helfen, die Notwendigkeit,
Geräte unterschiedlicher Bildschirmgrößen anzusprechen, besser zu schätzen.
Ich nehme die Hilfe der Entwickler-Optionen, die Safari-Browser
bietet, die mir ermöglicht, die Website mit Bildschirmen unterschiedlicher Größe anzuzeigen.
Das wird hoffentlich von Ihnen überzeugen, warum wir Responsive Web-Design gemacht haben.
Hier sehen Sie also, dass Coursera Website
auf einem 1920 mal 1080 Bildschirmseiten gerendert wird.
Dies wäre ein typischer großer Desktop oder ein hochauflösender Laptop-Bildschirm.
Dann lassen Sie uns die gleiche Website betrachten, die mit einem kleineren Bildschirm wie angesehen wird.
So sehen Sie automatisch, dass sich Ihr Bildschirmlayout leicht
an die Größe des Ansichtsfensters Ihres Geräts anpasst,
das Gleiche bei 800 mal 600.
Also lassen Sie uns in Bildschirmgrößen nach unten gehen, dies ist ein iPad schließen Ansicht der gleichen Website.
Dies ist ein iPad Air 2 Größe, dies ist ein iPad Mini 4 Größe,
beachten Sie den Übergang von einem iPad Mini 4
Größe zu einem iPhone 6S Plus im Hochformat.
Sie werden nun feststellen, dass der Navigations-Bot jetzt in eine Schaltfläche eingeblendet ist,
die beim Klicken die Optionen aus Ihrer Navigation Bash zeigt.
Und schauen wir uns das Gleiche in unserem iPhone 6S
im Querformat an, beachten Sie, wie sich der Bildschirm selbst annimmt.
Ähnlich für ein iPhone 6S im Querformat und
gehen Sie nach unten zu einem iPhone SE, und Sie sehen, wie die Website
hat die Art, wie es gerendert wird ändern.
Hoffentlich hat dieses Beispiel Ihnen gezeigt, wie und
warum wir Responsive Webdesign brauchen.
Das zweite verwandte Konzept, das Sie hören werden, ist zuerst mobil.
Der mobile erste Ansatz betrachtet stattdessen zuerst eine Website für
ein mobiles Gerät zu entwerfen.
Überlegen Sie also, wie Sie die Bildschirmeinschränkungen Ihres Mobilgeräts erfüllen würden.
Und dann, wenn sich Ihre Bildschirmgröße vergrößert, würden Sie automatisch
eine App auf Ihrer Website zu den größeren und größeren Bildschirmgrößen starten.
Vielleicht sind Sie bereit, mehr und mehr von den Inhalten.
Um die Vorteile der zunehmenden Bildschirm Immobilien zu nehmen.
So könnte die gleiche Website, wenn sie auf einem mobilen Gerät sehen, nur
Teile der Informationen, die dem Benutzer offenbart werden.
Aber dann, wenn es auf einem vollständigen Fledge-Desktop gerendert wird,
könnte es eine viel detailliertere Version der Website anzeigen.
Dies muss nun automatisch basierend auf den Informationen angepasst werden
, die Sie von dem Gerät erhalten, von dem aus Ihre Website aufgerufen wird.
Also, wie bekommen wir diese Informationen?
Glücklicherweise wird das reaktionsschnelle Webdesign von
vielen der modernen Front-End-Web-UI-Frameworks einschließlich Bootstrap unterstützt.
Also, wenn wir uns Bootstrap-Definition auf seiner Webseite ansehen, heißt es,
reaktionsschneller mobiler erster Ansatz.
Ja, wie gehen wir, indem wir reaktionsfähiges Webdesign machen?
Es gibt also mehrere Konzepte, die in Ihre
Frame-Time-Web-UI-Frameworks integriert sind, die zur Hilfe kommen, wenn Sie Responsive Webdesign durchführen müssen.
In erster Linie ist das, was man nennt, ein Grid-System?
Im nächsten
Vortrag werden wir uns das Grid-System des Bootstrap genauer ansehen.
Damit wir genau verstehen, wie wir das nutzen können, um
Responsive Webdesign durchführen zu können.
Der zweite Aspekt sind flüssige Bilder, so dass sich Ihre Bilder, die Sie in Ihre
Website aufnehmen, automatisch an die Bildschirmgröße anpassen.
Und der dritte Teil ist, was als CSS-Medienabfragen aus Ihrem CSS-Code bezeichnet wird.
Sie können die Größe der Medien abfragen und dann Ihre CSS-Klassen entsprechend
an die Größe des Bildschirms des Geräts anpassen.
Wie funktionieren Medienabfragen jetzt?
Sehen wir uns das als Nächstes an.
Medienabfragen werden in CSS wie folgt unterstützt.
Die Technologie ermöglicht es Ihnen, eine Medienabfrage durchzuführen, um die Mindestbreite
des Bildschirms anzugeben, unter dem dieser bestimmte Satz von CSS-Klassen aktiv ist.
Dies würde also in Ihrer CSS-Datei als @media angegeben werden, und
dann innerhalb der Klammer geben Sie zum Beispiel min-width an.
Es gibt viel mehr Optionen für die Medienabfragen als das, was ich hier zeige.
Dies ist nur ein Beispiel dafür, wie Sie eine Medienabfrage in Ihrem CSS-Code erstellen würden. Werfen wir
einen Blick auf den CSS-Code von Bootstrap selbst,
lassen Sie uns hineingehen und sehen, wie Medienabfragen von Bootstrap verwendet werden.
Hier sehen Sie ein Beispiel für eine Medienabfrage, wo es heißt, @media und
min-width 576 Pixel.
Und dann gibt es an, dass diese bestimmte CSS-Klasse Container aufrufen
, über den wir in der nächsten Vorlesung
und auch in der folgenden Übung mehr erfahren werden.
Wir werden sehen, dass die Breite des Containers basierend auf der Breite des Bildschirms festgelegt wird.
In ähnlicher Weise wird bei einem Bildschirm mit höherer Breite die Containerbreite automatisch angepasst.
Dies ist also, was es Ihrem Web-UI-Framework ermöglicht,
responsive Webdesign zu unterstützen.
Durch Medienabfragen ist Ihr Web-UI-Framework in der Lage,
festzustellen, auf welcher Art von Gerät Sie Ihre Website rendern.
Und entsprechend passen Sie die CSS-Klassen an, um
diese bestimmte Geräte-Bildschirmgröße anzupassen.
Die nächste Frage, die Ihnen dann in den Sinn kommen wird, ist, wie wir
das in der Praxis machen?
Glücklicherweise, wenn Sie mit einem gut gestalteten
Front-End-Web-UI-Framework wie Bootstrap beginnen, werden die Dinge sehr einfach.
Wir werden mehr darüber in der nächsten Vorlesung und in der folgenden Übung erfahren.
( MUSIK)