GD202 Week 10
Introduction to HTML
March 19
GD202 Interactive Design I
- Understanding web semantics and learn basic HTML tag structure.
- Discussion and design critiques.
- Lab time.
Designing with Web Standards
We stand on the shoulders of giants. Twenty years ago, we were struggling to figure out how to build the web.
The Web Standards Project
When The Web Standards Project (WaSP) formed in 1998, the web was the battleground in an ever-escalating war between two browser makers — Netscape and Microsoft — who were each taking turns “advancing” HTML to the point of collapse. You see, in an effort to one-up each other, the two browsers introduced new elements and new ways of manipulating web documents; this escalated to the point where their respective 4.0 versions were largely incompatible.
Realizing that this fragmentation would inevitably drive up the cost of building websites and ran the risk of denying users access to content and services they needed, Glenn Davis, George Olsen, and Jeffrey Zeldman co-founded WaSP and rallied an amazing group of web designers and developers to help them push back. The WaSP’s primary goal was getting browser makers to support the standards set forth by the World Wide Web Consortium (W3C).
In 2001, with the browser wars largely over, WaSP began to shift its focus. While some members continued to work with browser vendors on improving their standards support, others began working closely with software makers like Macromedia to improve the quality of code being authored in tools such as Dreamweaver. And others began the hard slog of educating web designers and developers about the importance of using web standards, culminating in the creation of WaSP InterAct, a web curriculum framework which is now overseen by the W3C.
It was Jeffrey Zeldman who led the charge as an evangelist for web standards with a book that transformed the way we work.
[Zeldman] wrote the bible of modern web design — the book that changed an entire industry. More than 85 universities — including New York University, UCLA, Dartmouth, and Brigham Young — list it as required reading.
Building a Community
The book that started the revolution that we are living in was written by Jeffrey Zeldman. There is a reason why there is such a huge community that has gathered around the work that he has been doing to advocate for web standards and a more thoughtful approach to design. People shared their code, their process, their ideas, and a community grew around the web standards movement that continues to this day.
Many others contributed to the work by creating sites and books that expanded on his ideas by bringing them to reality in projects that proved that this approach was the way forward.
The CSS Zen Garden by Dave Shea of Vancouver, BC was instrumental as a place where people could show how content could be independent of style.
Dave Shea continues to bring the web community together in Vancouver with a local series of meetups.
Learning to Code
There has long been a debate about whether designers should learn to code. There are advantages and disadvantages that have much more to do with the different trajectories a career can take in the world of design. There is so much to learn and there are many roles to fill as team grow to accommodate the demand and expectations for strategic, result-oriented projects.
The short answer is no, not everyone should learn to code. One of my mentors would say, “Don’t get good at something you don’t want to do.”
However, if you have a passion to learn, I would say, “Yes, learn to code.” At the very least, you will have a foundation for understanding how to communicate intelligently with developers and front-end designers. You should understand the materials that we use to build the web. Architects need to understand the nature of the materials with which they work in order to create forms that function well while at the same time meeting high standards of aesthetic design. Web designers and UX designers also need to understand what they are working with.
Also, if you are not aware of what is possible, as technologies are constantly changing and improving, it will be difficult to create innovative designs beyond the trends and typical approaches.
Learning to Think
These days, it is probably much more important to learn to think and to learn to develop empathy to create designs that acknowledge our need to be human and consider what is best for each other.
If the content is delivered for the good of the general public, the presentation must facilitate slow, careful reading. If it’s designed to promote our business or help a customer get an answer to her question, it must be designed for speed of relevancy.
Code That Means Something
For now, let’s learn the basics of HTML and semantic data. Hypertext Markup Language, or HTML, is a form of XML (Extensible Markup Language) that is designed for creating content that is structured into meaningful pieces that can also be recognized by computers in a way that allows each piece to be handled differently based on their semantic structure.
Semantics is the linguistic and philosophical study of meaning, in language, programming languages, formal logics, and semiotics. It is concerned with the relationship between signifiers — like words, phrases, signs, and symbols — and what they stand for, their denotation.
Understanding HTML
When we were learning about Markdown, we were creating HTML structures by using a special syntax for typing content that separates text into the basic building blocks for headings, paragraphs, list items, and hyperlinks.
Periodic Table of the Elements
Josh Duck created a table of HTML elements in a form similar to the periodic table of chemical elements.
The idea has since been recreated by Mike Riethmuller after Josh Duck removed it from his site.
Tools
All you need to write HTML is a text editor.
https://support.apple.com/en-ca/guide/textedit/welcome/mac
Atom from GitHub would be a good choice for anyone who writes code for a living, because it has been designed by coders for coders by the organization that set the standard for sharing code. It is also open source and free.
Looking Under the Hood
The web is open source. You can discover a lot about how things work by taking a look at the source code of the sites you visit.
Use the developer tools in your favourite web browser to see how everything is working. Many files will be minimized to optimize them for download speed across the web. But you should still be able to view the basic structure through tools such as Chrome DevTools.
Sharing Code
Don’t reinvent the wheel. Search open source code to learn how other people are building stuff and share what you learn with the global community.
Standards
The World Wide Web Consortium sets the standards for web technologies.
