MODUL
Design
TYP
Workshop
SOURCE
INTRO Webseiten programmieren mit HTML und CSS
mit Anna Laederach und Daniel Nikles | 15.11.23
The city's layout, its streets, and buildings are akin to HTML in web design. Each HTML element, like a unique building or area, serves a specific purpose, from welcoming visitors (<header>) to guiding them through the main thoroughfares (<nav>), and to the diverse neighborhoods (<section> and <article>) that make up the city's vibrant community. The city's boundaries (<footer>) encapsulate it all, holding crucial information and links to the world beyond.
If HTML is the city layout, then CSS is its architecture and design language. It's the colors, fonts, and unique architectural features that give each building its character. The city planning techniques, like Flexbox or Grid, dictate how these buildings and spaces interact, creating a harmonious and visually appealing environment. Responsive design, represented by adaptable buildings, ensures the city remains functional and beautiful in all conditions.
JavaScript infuses life into the city, much like dynamic activities and interactions do in an urban space. It's the technology behind the scenes that enables the city to evolve, expand, and entertain, from a responsive postal service (form validation) to the city's ever-changing skyline (dynamic content loading) and vibrant festivals (animations and interactive elements).
A well-designed city, like a responsive website, is accessible and enjoyable, whether you're on foot, in a car, or on a bike. Mobile-first design prioritizes pedestrian (user) needs, while breakpoints in responsive design are akin to areas that adapt to different urban demands.
Just as a city administration manages resources and information flow, a CMS governs a website, ensuring consistency (templates) and functionality (plugins and modules), akin to urban zoning laws and city services.
The land and address system of our digital city, hosting provides the space where the city lives, and the domain is its unique address, identifying it in the vast world of the internet.
Accessibility in web design ensures that everyone, regardless of ability, can navigate and enjoy the city. It's the digital equivalent of pedestrian-friendly sidewalks, braille on signs, and accessible public buildings.
Also intresting to think about "Hostile Architecture" in this context.
UX in web design is about making the city not just navigable but also a joy to explore. It's the efficient public transport (fast load times), the intuitive city layout (navigation), and the engaging parks and museums (content and interactions).
UI design is the city's aesthetic appeal, the consistent and appealing design themes, and interactive elements that make the city not just functional but also visually engaging.
This is about keeping the city running smoothly, reducing traffic congestion (load times), and ensuring the public facilities are efficient and not resource-heavy.
The digital security of a website is as crucial as the safety measures in a city, from surveillance (SSL certificates) to regular updates and patches that keep the city's infrastructure robust and secure.
For websites handling transactions, e-commerce integration is like the bustling marketplaces and shopping districts, complete with secure payment systems and convenient shopping carts.
Just as urban planners use data to enhance city life, website analytics and user feedback are vital for understanding visitor behavior and improving the site.
A well-designed website, like a city, is ready to grow. Its design and architecture must accommodate more content and users, much like urban areas designed for future growth and expansion.
SEO is the city's signage and mapping system, guiding visitors to landmarks (keywords), giving overviews (meta tags), and connecting roads from other cities (backlinks), enhancing the city's (website's) discoverability and accessibility.
Daniel hat es treffend formuliert: "Du musst nicht wissen, wie zu coden, sondern nur, wie zu googlen." In der Welt des Codings, wo ständig neue Technologien, Frameworks und Best Practices auftauchen, ist es unmöglich, alles zu wissen. Hier kommt Google ins Spiel. Als eine Art universelles Nachschlagewerk ermöglicht es uns, schnell Antworten auf spezifische Programmierfragen zu finden, von Code-Snippets bis hin zu umfassenden Lösungswegen. Diese Fähigkeit, effektiv zu recherchieren und die richtigen Informationen zu extrahieren, ist fast genauso wertvoll wie das Programmieren selbst. Es ist, als hätte man eine ständig aktualisierte Bibliothek zur Hand, die Antworten auf fast alle Fragen bietet, die während des Codierens aufkommen könnten.
Meine eigene Erkenntnis baut darauf auf und erweitert sie. ChatGPT hat sich als noch wertvoller erwiesen, besonders wenn man kein grundlegendes Verständnis von Codierung hat. Mit ChatGPT ist es möglich, sich Code schreiben zu lassen, sich diesen anhand anschaulicher Beispiele - wie dem der Stadtstruktur - erklären zu lassen, und zu verstehen, wo und wie dieser Code implementiert werden kann. Noch wichtiger ist, dass ChatGPT eine interaktive Komponente bietet. Bei Fehlern oder Unklarheiten kann man nachfragen, neu analysieren und das Verständnis vertiefen. Es ist, als hätte man einen geduldigen Mentor an seiner Seite, der nicht nur Anweisungen gibt, sondern auch kontextbezogene Erklärungen liefert, die das Lernen und Anwenden von Code wesentlich zugänglicher und verständlicher machen.
Nils Niederhauser
n.niederhauser@gmx.ch
:D