reading-notes

Class 4 Notes - structure web pages with HTML

A process to define and plan the information heirarchy of a web site/app/product’s deisgn. Focus on how you want user to process your info, ideally using user research. Before building with code, designers and coders need the info laid out in black and white with buttons and menus in the diagrams. Style/design is pointless if a user can’t navigate without it.
Wireframe examples You can use a program or paper/whiteboard (easier to change, can test at every stage easier, can keep track of more detailed decisions).
Things to Consider how much emphasis on visual design & how much uncertainty remains with the design
Examples of Wireframe Processes * wireframe - interactive prototype - visual - design * sketch - code * sketch - wireframe - hi-def wireframe - visual - code * sketch - wireframe -visual - code
Tools: free wireframe tools like UXPin, InVision, Wireframe.cc

Research * look at UX trends and best practices, ID your user
Prepare for quick reference * Make note of key takeaways, reminders of best features, a few quotes from the audience
Map user flow
Draft & sketch vs. draw or illustrate
Add detail and start testing
Turn wireframes into prototypes

HTML = Hyper Text Markup Language; it’s a markup language that defines the structure of your contenet. It’s composed of elements that are enclosed by using tags.
Main parts of the element are:
1. Opening Tag
2. Closing Tag
3. Content
4. Attribute: attributes contain extra info on an element that you don’t want to show in the content
  - Attributes always have: 1. space between it and hte element name 2. attribute name followed by = 3. attribute value wrapped by opening and closing quotation marks
Nesting elements: you can put elements inside other elements, called nesting.
Void elements: some elements have no content (i.e. ‘’ elements)

Semantics = the meaning of a piece of code; i.e. what effect or purpose does this line have?

From the source above:

“In JavaScript, consider a function that takes a string parameter, and returns an <li> element with that string as its textContent. Would you need to look at the code to understand what the function did if it was called build(‘Peach’), or createLiWithContent(‘Peach’)?”

From the source above:

“In CSS, consider styling a list with li elements representing different types of fruits. Would you know what part of the DOM is being selected with div > ul > li, or .fruits__item?”

for example, ‘<h1>’ is a semantic element; it gives the text it wraps meaning.
HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Styling is managed by CSS.
Benefits of writing semantic markup:

All questions answered!