Sitepoint released a spot on article, Give Floats the Flick in CSS Layouts that goes over alternate strategies to lay out a page, mostly relying on the display property to change the display of an element from a list item to an inline-block, for example.
Inline-block displays block level elements into inline level elements with block attributes like margins, padding, width, height, and vertical-align, attributes that inline elements do not have. It’s incredibly useful in any situation where you want to align block elements horizontally in rows, as they can be aligned by the top, middle or bottom.
CSS Code View
Each line items can be more than just a menu item, which is what this property is often asked to do. The boxes can be aligned from the top, center or bottom, and can contain all kinds of objects to serve as a layout strategy. If your page were designed to contain a number of columns, this is one way to lay out that page.
Using Margins to Space Columns
By using a large margin to move the main body copy to the right, and using absolute positioning to place the content of the first column, you have a two columns page layout.
The markup for the 2 column layout looks like this:
Without using tables, of course. Apply the layout behavior of tables, rows and cells to any HTML element. For alignment into columns or rows, these display values are a quick and easy solution, harkening back when tables were the ubiquitous layout strategy, but unlike tables, this is legal.
CSS Code View
This can be used to create multiple column layouts.
CSS Code View
Bubble bath
A wet foam—such as that on a cappuccino—and a trough of plastic beads are both made up of nearly spherical, close-packed objects, but do these two types of materials, which are neither fully liquid or solid like, have anything in common? Experiments presented in Physical Review Letters suggest similarities between foams and granular matter that may lead to a more unified theory for describing the two materials.
In a tight spot, spin and charge separate
Strange things happen when there is a shortage of space. The Pauli exclusion principle is well known for its effect on fermions, but bosons (for instance, photons) also behave interestingly when pressed for space. For this reason, researchers are very interested in schemes that create this kind of environment, in search of new physics and new technologies.
Reading a single spin in silicon
The holy grail of research in quantum computing is to simultaneously meet the DiVincenzo criteria—five obstacles that must be overcome to transform a quantum system into a scalable quantum computer [1]. Overcoming the first two, namely to have well-characterized qubits and long decoherence times can be a simple matter: Nature provides a variety of long-lived quantum systems.
Vertically Centering a Box
It is almost impossible to vertically center an object unless you turn it into a table cell and assign it a vertical alignment of center. It could just as well be top or bottom, of course:
The markup for the centered example looks like this:
<div id="centered">
<div>
<div>
Vertically and horizontally centered
</div>
</div>
</div>
CSS Code View
Vertically and horizontally centered
These page layout solutions do not rely on the ubiquitous float. The time will come when the W3 Grid Layout module is adopted, and the landscape changes, but these techniques will not go away. Instead, use them where they fit, anywhere you need to layout out your document.
Using different layout strategies build your portfolio following your Photoshop comp. Read chapter 11. Due: The following week. First Quarter Assessment: Have your landing page, first two assignments and portfolio up.
Materials
Additional materials for this unit can be found by following these links (52 pages):
Cheat Sheets that list all of the different HTML5 and CSS3 tags you can use. Print them out, use them. Explore and get to know them. You can use these during the quiz next week:
HTML5 Cheat Sheet all of the different tags and the attributes they can have.
CSS3 Cheat Sheet all of the different properties and all possible values or value types they take.
Install these Plug-ins if you use Firefox or Chrome. They will facilitate your web development. Do not forget to activate the Show Developer menu in menu bar under the Advanced tab in Safari’s Preferences. Detailed help pages are available for Safari Web Developer are available.
There are many frameworks that allow you to build your websites using preexisting CSS. They arose because layout in CSS is neither intuitive nor easy, and go from simple grids to complete font-end frameworks.
There are many services that allow you to build your own websites, and you can use the HTML and CSS skills you learn here to modify them. This can give you the best of both worlds, for you can use their platform and templates, but modified so that they look unique in ways that goes beyond template options.
build your own
WordPress Build your own with lots of templates to choose from.
Or use a pre-made platform. Note that there are limitations imposed, like Wix depends on absolute positioning to give it flexibility in designing the site, but that end up curtailing the flexibility in other ways.
Tumbler Customize the experience with HTML and CSS.
Lynda.com is a resource for instructional videos. She has been at it for a long time, and there are a lot of videos on HTML (34) and CSS (36). They can be a great resource, and in addition to my performance in class, the class notes and portal, the good and the web itself, there are no reason for not knowing. That said, there are too many titles to intuitively know what to do, and this section will appear whenever there are supporting videos at Lynda.com
CSS (Cascading Style Sheets) describes the rendering of documents on various media. When textual documents (e.g., HTML) are laid out on visual media (e.g., screen or print), CSS models the document as a hierarchy of boxes containing words, lines, paragraphs, tables, etc. each with properties such as size, color and font.
This module describes the basic types of boxes, with their padding and margin, and the normal “flow” (i.e., the sequence of blocks of text with margins in-between). It also defines “floating” boxes, but other kinds of layout, such as tables, absolute positioning, ruby annotations, grid layouts, columns and numbered pages, are described by other modules. Also, the layout of text inside each line (including the handling of left-to-right and right-to-left scripts) is defined elsewhere.
Boxes may contain either horizontal or vertical lines of text. Boxes of different orientations may be mixed in one flow. (This is a level 3 feature.)
This CSS3 module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.
Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is a (non-normative) introduction to float positioning and content flow; the exact rules governing float positioning are given in the next section.
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the top of the floated box is aligned with the top of the current line box.
If there isn’t enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is re-flowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
(This is a more advanced development of floats to exploit their wide usage in layout. It is one of the layout strategies coming out of the W3.org) CSS Floats and Positioning Level 3 allows authors to have text and other inline content wrap around specified elements, thereby allowing for the creation of more intricate layouts than is currently possible with existing CSS floaters. Specifically, CSS 3 Floats, also known as “positioned floats”, can be absolutely positioned on a web document, while still affecting the document flow. Authors can individually specify whether intersected block elements surrounding a positioned float (e.g. paragraphs, divs, etc.) overlap with the positioned float, and if so how they overlap with it. Positioned float can also be styled with a wrap-shape property, which specifies both how text within the positioned float is laid out and how content outside the positioned float wraps around the positioned float. It is also possible to define a shape based on transparency values within an image.
A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
Open up the worksheet, right-click and show page source. Select all. Copy and paste into a blank Brackets document. Save as quiz-1.html and follow instructions. You will be writing CSS. Do not change the HTML.
Marking Up the Midterm
Designing for the web has 8 steps. The last step is a PhotoShop comp for desktops, tablets, and mobile devices. Write the content and mark up your portfolio site. Collect and prepare any pictures you plan on using, so you can be ready to apply the CSS layout covered next week.
Finish up your previous assignments if you have not done so already.
Grading Criteria
I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.
Information architecture for the web is the process for describing and classifying information used to help construct user experience paradigms. Just as a building is constructed by architects and finished by interior designers, so, the construction of a web site requires a taxonomy, that is, the science of classification and organization that makes the information work for the user experience, in addition to the design of the user experience, and the design of what it all looks like.
Information Architecture — User Experience
It sounds like they are intimately connected, and they are on the level in which you operate in this class. In the real world, for large sites, these are very separate skills. The Information architect comes to the web site from the side of the information, whereas the user experience designer looks at the information from the user point of view. The designer then cobbles together these two views into a coherent visual design that is marked up and styled using HTML, CSS and Javascript by the front end developer, who works in tandem with the back end developers that create the content management system (CMS), the databases and the server side scripts that make a modern web site work.
There is overlap between information architect and the user experience designer. Information architecture involves planning the site, what information to include on what pages, how many levels in the hierarchy of pages, navigational menu design, what labels to use to name pages, sub-sections and headings, how information should be laid out on a page to make it easiest to find and understand. Much of this is often represented by a taxonomy that in the end results in a hierarchical site map.
Taxonomies
Taxonomy is the branch of science concerned with classification. I know what you are thinking. My portfolio site will only have a dozen pages. Isn’t thinking about a taxonomy overkill? Yes it is, but that does not preclude you from preparing yourself for more complicated projects.
A web site, particularly when implemented on a content management system, where pages can be added with ease, can suffer because of a lack of information architectural planning. Other sites that would benefit from a carefully developed taxonomy are intranets, corporate web sites, e-commerce sites and the sites or large institutions like the New School web site.
A few words on taxonomy. A taxonomy is usually thought of as the tree-type of hierarchy that classifies topics like the biological tree of life, for example, but it can also be an imposed order by type, like the Dewey Decimal System in use by libraries, which has a unique ontological classification that drills down to each particular manuscript in library science.
The taxonomy terms are arranged so that more specific terms fall under more general categories. For your web site, for example, a specific print falls under the category prints, which falls under the category of illustration, which falls under the category of work.
In more complicated sites, there are relationships types that may not be hierarchical, and can be based on location, products, services, membership, utilization or ownership and other relations that you probably have not yet thought about. In these cases, it’s important to clearly define the terms of the taxonomy that relates the types, for that will make for a more consistent user experience.
Information Architecture
In print, the information architecture is mostly linear, with a table of content and an index to provide access to the discrete parts, or in a newspaper, where articles start on the front page and continue on other pages.
The hyperlinks on the web make for a much more hierarchical relationship, where the user can jump anywhere in the inverted tree-like hierarchies that make up most navigational systems. This makes overlapping taxonomies possible, as there can be a number of ways to approach the same information.
The point to take away from this is that being clear about the taxonomy will help users find the information they are seeking.
Whereas taxonomies focus on classifying the information beforehand, there is another movement that feels information should be classified by the people using it, called folksonomy
The Information Architecture Process
Information architecture works out the relation between the content and the navigation. It corresponds directly with the goal of the site, the objectives, the content and the needs of the user. The information architecture can be strictly hierarchical, more organic, or both, but the process starts by writing down and organizing the site objectives.
The information architect lists the content requirements and determines the appropriate page hierarchy for the site, be it top down or bottoms up, and design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear. A complete diagram of the information architecture is created by standardizing the navigation architecture with the organization of the content.
Designing for the User’s Interaction
The information architecture addresses all of the potential users whose interaction with the information is what the site is about. Knowing the target audience and what they need and are interested in can be made into scenarios that map out these ideal user interactions, through process flow charts, site-maps and wireframes can be constructed from that analysis that most represent the site’s objectives and strategy.
You were required to develop a number of personas, and in the second assignment, to organize the website with a number of such personas in mind. Figuring out who the users are and addressing them is a common starting point when developing a website.
Over a dozen distinctly targeted users with very different interests for a medical website has to be considered for which I did a user experience analyses. How to build an interface that meets the expectations of all of the users. The site objectives had to be applied to the different needs and interests of the multiple targeted users.
To communicate this back to the client, a schematic for each user was created and superimposed to get a sense of how to best approach the information architecture. To accommodate everyone, a number of different strategies were implemented using both primary and secondary navigation.
Process flow-charts not only allowed modeling an ideal user’s interaction to better comprehend their interests and needs, but combining all of the users allowed for a high-level overview of the web site’s requirements. This high-level approach, built up from the individual user assessments, is called the architectural approach, because it enables one to develop a comprehensive user interface for the system.
Once a system architecture is completed, it is possible to establish a site-map from the process flows, and from there, a wireframe that is true to the site’s objectives and strategy.
With the information architecture in place and user interactions determined, a complete user experience has been determined. That is when the structure of the information architecture, the layout of the information design, the interaction design concepts, and the desired brand identity come together in a responsive visual design.
Implications
Will you break out your first assignment into all of these steps? I would be surprised if you did, but they will be assumed nonetheless, so try to be as clear as possible in each of these activities, and write them down, insofar as you develop them behind the scenes, in your worksheet.
User experience (UX) Design, Semantic HTML5, Developing Content for midterm website, preparing images, and understanding color on the web.. Learn to upload files using FTP client and organize server space. Activity: Create HTML page for website you analyzed with eye on making your own portfolio. Activity: Activate the account school provides and upload first assignment.
1) Create landing page with links to assignment and worksheet. 2) Watch XU videos. 3) Create Workpage for portfolio site (8 steps). 4) Create content and markup your portfolio site. Read chapters 4-6. Due: The following week.
Questions from Last Weeks Class or Homework?
Goals
The goals of this unit are to:
Understand the user experience that drives web design.
HTML5 imposes semantic order with its tags.
Steps to take in designing your Portfolio.
Prepare images for use on the web
Understand how to use color.
Validate the HTML.
Materials
Additional materials for this unit can be found by following these links:
Two newspapers, the Guardian and the NY Times have updated their websites. Actually, the Guardian is currently (Fall 2014) asking for feedback, as part of its XU testing cycle, asking for user feedback.
The Semantic Web is a “web of data” that enables machines to understand the semantics, or meaning, of information on the World Wide Web. It extends the network of hyperlinked human-readable web pages by inserting machine-readable metadata about pages and how they are related to each other, enabling automated agents to access the Web more intelligently and perform tasks on behalf of users. The term was coined by Tim Berners-Lee, the inventor of the World Wide Web and director of the World Wide Web Consortium, which oversees the development of proposed Semantic Web standards. He defines the Semantic Web as “a web of data that can be processed directly and indirectly by machines.”
User experience (UX) is about how a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design. Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.
Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.
Web design is a broad term used to encompass the way that content (usually hypertext or hypermedia) is delivered to an end-user through the World Wide Web, using a web browser (e.g. Opera, Internet Explorer, Firefox, Google Chrome, Safari) or other web-enabled software to display the content. The intent of web design is to create a website—a collection of online content including documents and applications that reside on a web server/servers. A website may include text, images, sounds and other content, and may be interactive.
Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer.
Parsons students have experience with the language of design as it pertains to graphic design, illustration, fashion, product design, architecture, or photography, and so on. Lang students have experience developing cerebral arguments of one sort or another. There will be two main projects this semester: a portfolio and a final project. Each project follows the process of research/concept/sketches/comps/final. These steps need to be documented in a worksheet.
8 steps everyone needs to document in the worksheet before creating their website.
You are required to document each of your creative decisions in a Worksheet. I will use them to evaluate your midterm and final.
1) Develop Your Idea
Define the problem you are to solve when developing a web site. It is hard to create a good end product if the problem is not very well defined at the beginning.
Sometimes the problem is given to you by the client but the client does not alway know exactly what the problem is. It’s your job to figure that out.
Either way, develop your idea.
It’s hard to sell a bad idea.
This time you are your own client. That’s difficult.
Make sure that whatever you come up with will work and is worth the time spent making it real.
2) Discovery and Research
Discovery and research is the second step. You might have a good idea of what you want but test it by contrasting the idea with similar ideas that have already been executed.
Using OpenAI text is a great tool expand awareness of what the options are.
Google to see what others have done. The first assignment should have been a gigantic step in the right direction.
Find competitor web sites that have a track record that you can learn from, or have developed novel ways to express things that you are also desiring to express.
Tell me what you have learned and the conclusions you have reached from your research. I will be looking for that in the worksheets for both the midterm and the final projects.
3) Target Your Audience
Focus your energy by figuring out who your audience is, and target them.
Go further and read Designed For Use by Lukas Mathis and develop a killer user interface because this excellent book will give you a good understanding of how user interfaces work, and work well, and what to look out for, to make sure that they do work.
Whatever you do, keep the user in mind.
4) Inspiration and concepts
Look for sites that inspired you. There are lots of examples out there and precedent to follow.
Then experiment Mood boards are one way to proceed.
Mood boards visually stimulate your design sense. You can test colors images, design elements, ideas, etc, as you develop your design intent. Print these out and place them on a board, or layer them in a Photoshop document. Playing with the visual hierarchy of like or contrasting elements can help gel the creative process.
Mood boards are used to develop the overall feel of a project, putting together images and objects which inspire, target desires and facilitate creativity and innovation in establishing the aesthetic feel of a web site.
Things to explore in a mood board include photography style, color palettes, typography, patterns, and the overall look and feel of the site. Soft or hard? Grungy or clean? Dark or light? A rough collage of colors, textures and pictures is all it takes to evoke a specific style or feeling. This process can act like a catalyst and save a lot of time and help focus in on your final design.
Come up with a couple of different design concepts for the project. The concepts should be based on research and the target audience. Gather up content and make a compelling case for each concept. Minimum of two concepts but no more than five.
5) Thumbnails and Sketches
Illustrate and explain each of your concepts. Once you are clear as to what your problem is, have content, and direction, the next step is to explain the best concept and develop a responsive user centered design solution using pencil and paper.
Sketches show how you arrived at the solution. They should start simple and remain small (thumbnails).
Explore responsive possibilities, from watch to phone to tablet to computer desktop and back again. Each device needs to present the concept organized in a way that is coherent for the device.
It takes many thumbnails to work through and develop a finished concept. You can’t tell ahead of time what will or will not work but you can separate out what doesn’t work ahead of time. Increase your success rate by staying with paper and pencil till you are clear about how to solve the problem.
Circle or otherwise indicate the concept you will develop. Take a picture of or scan the drawings and upload them to the worksheet.
6) Wireframes and Prototypes
Wireframes are simplified designs devoid of any style, type, color, pictures, or meaning. They are fast to create and explore different elements of your design, and provide feedback on the general layout, are easy to manipulate and change, to get it right, before filling in the details. Wireframes allow you to explore user flows and the different ways to structure your website, without having to design any elements or design any content.
Translate the picked thumbnail into a wireframe for each device category. One each for the watch, the phone, the tablet and the desktop. If you are using FIGMA, pick out a frame for each page, and each device.
The wireframe of a website is the skeleton of a web page assembled using boxes and lines. A wireframe is conducive to content placement making it easy to establish hierarchy, figure out functionality and navigation problems in a format that can be adjusted easily. Wireframes are lines or boxes with little text and few visual widgets that represent your website structure and help you establish hierarchy. It is a clean interpretation of the thumbnail that you selected to develop.
Wireframes and prototypes help you understand the big picture. Rapid prototyping helps you explore more ideas, faster. Don’t let yourself get bogged down in unnecessary details too early. Create your wireframe/prototype in prototyping programs, illustrator, or hand draw them, but be ready to recreate them using CSS and HTML.
7)Responsive Mockup
Software like Adobe XD and Origami allow for quick and amazing prototypes, tools that facilitate and realize user experience design on different devices. The tools are slick, but don’t prototype something you can’t possibly code. It is easy to get lost when prototyping. Stay focused on what you need to communicate to your target audience. Some prototyping software allows you to export to HTML and CSS. Avoid them. We are here how to code, and shortcuts turn out to be longcuts. The code they produce is uneditable for beginners.
Prototype tools are both web based and stand along products. These can all be used free. figma.com (you can also sign up to get their professional package for education free of charge), Invision, Mockplus, Facebook’s Origami, and Adobe’s XD. You can also use HTML and CSS. That’s probably the most useful way to develop your prototype as you will learn HTML and CSS. You’ll be required to transform your prototypes into an actual website in two weeks, after we’ve covered layout using CSS in Week 4. You have till then to perfect your prototype.
8) PhotoShop Comp
The last step is to create Photoshop/Illustrator comp of what your website is to look like on a phone, a tablet, a desktop screen.
Putting It All Together
The next step is to build the site using HTML and CSS. You have three weeks to accomplish that.
Think of the photoshop comp as the end. It is a strategy game to figure out how to achieve that end using the HTML and CSS you will learn in the next three weeks.
Break your design into the fundamental boxes that determine how your design moves through every iteration of your responsive design. It has to work on a smartphone where the finger-tip is huge and will quickly slide through the information vertically, to the large horizontal monitors with 50 inch diagonal screens.
Your site is to look good every step of the way. Figure out how to make the HTML and CSS work. That is the strategy. Figure it out by creating a simple wireframe representing the elements as they move though each iteration of the responsive experience.
If you haven’t already done so, your first assignment needs to be finished and marked up with semantic HTML5.
The first assignment is a preparation for step one and two of Designing for the Web (8 steps) . Make User eXperience the central concern as you work through the eight steps. Finish with a statement on how your final comps reflect UX principles.
The eight steps are the basis for a sketch-book equivalent I call the work-sheet that is to accompany each major assignment. You will end up with two such work-sheets for the course, one for the portfolio site and one for the final. Worksheet Example
The purpose of the work-sheet is to organize all the behind-the-scenes creative-decision making. I give credit for good decisions even if they aren’t executed.
Jot down notes, questions and anything that helps you track your creative process. I will be looking at these to monitor your progress.
Write in full sentences and use headers to explain what you are writing about. I like to see work that’s structured in a consistent in a logical way.
Write down any questions, comments or observations that you may have in an ordered list <ol> at the top of the document.
Assess problems and identify solutions.
Include pictures of however many number of thumbnails it took (more is good) and at least one mood board to show the trail of ideas and colors that led you to your final product. Show the creative development, spatial exploration and how you’ve gone about solving the problems you’ve identified.
You can photograph or scan in the thumbnails together or as individual pictures and comment them as you wish using <figcaption>
Size any and all images to be no larger than the size you present them. Larger pictures take longer to download.
Landing Page
You are to create an index.html inside your parsons folder that contains
Make the h1 your name and update the page title to your name.
a picture of you (to help me associate the person with the name)
your major
your minor if you have one
the paragraph you wrote on your learning goals for this semester
An example of a link to an assignment looks like this: <a href="first_assignment/index.html>Website Analysis</a> I would put the OpenAI discussion below the links to your assignments. This assignment, along with the learning goals paragraph, is new for this semester, and has no precedent in the previous examples. Here is an example from a few semesters ago (expect assignments to be slightly different).
Copy and paste this table into a HTML5 Template at the location of the <p> (paragraph) tag, in the <article> tag. You will turn each homework into a link that leads to your assignment. The week 2 link is provided but only works if there is a folder first_assignment with an index.html for the first assignment.
See Setting Up Your Server Space for more complete details on how to set up the landing page and the other assignments on the server. See how to create a Relative Address and Creating Tags if you need a reminder of how to do that.
I am looking to see how your coding skill are progressing, in both the homework and the worksheet. The more you code, the better you get at it. Once again, using the validator will help you to deliver a technically perfect document. Use it often if you are having problems, every few lines of code, that way you can see the mistakes you make and correct them one by one.
I want to see you explore your solution in the creative process from how you state the problem to possible answers, and to have you eliminate all that does not work as well as the answer you end up with. Have many thumbnails to document the process, not just the few that lock into the concept that you’ve gone with. While all of this documentation is overkill for the current assignment, you will get into the habit and develop the proper methods when it comes to creating a complete web site.
I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.
Grading Rubric
I realize that English is not everyone’s first language. It is my second language. I am not going to ask the impossible, and I will take such difficulties into consideration. That said, persuasive content is crucial to a successful website.
At bare minimum, I expect a couple of paragraphs marked up for each part of the assignment, pictures sized correctly and placed on the page using HTML5.
Ideally, I expect the writing to be coherent and informative. This assignment will morph into your midterm portfolio, and I expect you to have some respect for your own work, and show that.
I will be pleasantly surprised if you are able to create a story that is engaging and fun to read, and not just coherent and informative.
Images are placed on the web using the tag: <img source="url_where_image_is_located.jpg" alt="description of image" >
Images need to be prepared so they upload quickly. Use Photoshop to limit the resolution to around the same resolution as the screen that will be displaying it.
Image Size
The resolution should be 1 to 1, pixel for pixel, to the screen. That there are many different screen sizes and resolutions does not make this easy.
To keep the ratio of a picture on the web, only the width needs to be specified. The height will adjust automatically. For best practices, in the style sheet, set the CSS for images to 100% of the parent element: img {width: 100%;} and size the figure tag.
If the picture is too small or large, the browser will up or down resolve it to fit. Try to hit the sweet spot in image resolution, not too small, and not too large, and compress it appropriately, from 30 to 60 jpg compression, depending on its importance and size. Images that are much larger than what is needed interrupt the user experience.
How bit will the image be displayed? I will end up grading your work on a HD HDR (4k high dynamic range) 42 inch screen. Will I notice that the image has been compressed. Probably not. I will notice that the page takes too long to load an image. Figure out the sweet spot between image size, compression, and user experience. You want your pictures to load quickly. Apple uses something called Retina display, which doubles or triples the resolution. That means designing for the computer continues to operate as it always has despite the continual increase in monitor resolution.
Responsive web design makes it possible to switch out different resolutions depending on the device or bandwidth used.
Image File Formats
Gif Images (and PNG-8)
For graphic images that have large areas of solid color, like those produced with Illustrator, or strongly contrasting finely detailed lines like serifs in type, use GIF or the license unencumbered 8 bit PNG. GIF stands for Graphics Interchange Format. PNG stands for Portable Network Graphics. They reduce the 16 million plus computer colors to a look-up table of up to 8 bits, or 256 colors. It is possible to assign one of the bits to be transparent but it is a 1 bit off/on transparency, and not an 8 bit alpha channel that can produce a smooth transition. That means there is no antialiasing of the transition, which makes it look pretty ugly when placed any background whose color does not match. You can see that the image on the right does not blend into the background color. The blend ends abruptly as the transparency gives way to the pink background. When the backgrounds do match, the 1 bit transparency works fine.
This format works well to preserve type and other fine detail in the picture. Use PNG when saving Illustrator files. It has a compression routine that describes similar colors and it can be more effective and result in smaller files than Jpegs. Jpegs tends to soften strongly contrasting detail and adds artifacts that disrupt areas of solid color.
A photo of a flower compressed with successively more lossy compression ratios from left to right.
Use the JPEG format (with the extension .jpeg or .jpg) for photographs. JPEG stands for Joint Photographic Experts Group. It’s the most commonly used method of lossy compression for photographic images, as photographs still look good even when they are a fraction of their original file size. Image degradation does occur when the compression is too great, so for good fidelity, use around 40%, or for high quality, like your portfolio images, use 60% compression. If there is a lot of noise or detail in the image, compression is less efficient.
With increased compression come artifacts. You may increase the compression till the artifacts become problematic. The example at the right is compressed at 10% to show off the artifacts but even at 60% introduces significant artifacts. That is why GIF and PNG-8 are preferred over JPEG for type and other finely detailed images. Before web fonts were widely available, titles were often set as a picture to maintain a typeface. GIFs are far superior than JPEGs for that purpose, as you can see.
There is no alpha channel associated with jpegs. That makes them rectangular, which is not always desirable. You would have to match the background if you want the image boundaries with the existing background color.
PNG-24
You can have the best of both worlds by using transparency with the 24 bit PNG format, which should really be called a 32 bit PNG format as it contains an 8 bit alpha channel. This format allows you to composite an image of any shape with perfect anti-aliasing, just like in photoshop. It renders all details perfectly, without artifacts. There is a price to pay, however. The cost of using PNG-24 is huge in terms of the file size, so be discrete in your usage of this otherwise marvelous format.
WebP
A new open format for lossy compressed true-color graphics on the web created by GOOGLE, producing files that were smaller than JPEG files for comparable image quality. Apple just included support for it in Safari, so it can become a web standard as soon as Photoshop and other image creation tools release WebP export. Google released WebPshop, a free webP export module for Photoshop.
HEIF
Apple’s replacement for Jpeg files, High Efficiency Image File Format, is not widely supported beyond Apple’s ecosystem, though the day will come when HEIF will be a web standard. Camera companies are starting to use it instead of Jpegs for storage. Like WebP, it will not become ubiquitous until image programs like Photoshop can export the format.
Save for Web
We all use Adobe products to prepare our images for the web. Use the save for web interface — command, option, shift S — to prepare your images, be it from Photoshop or Illustrator, and choose one of these methods. You can select the different attributes and compare the levels of compression and the quality.
Color
bit = 2 colors
bits = 4 colors
bits = 8 colors
bits = 16 colors
bits = 32 colors
bits = 64 colors
bits = 128 colors
bits = 256 colors
Color on the computer is composed of red, green and blue channels, or RGB, similar to the cones in our eyes. For the longest time the web used sRGB color gamut which can represent about a third of what our eyes can see. Because the monitors were not better, that was good enough. New monitors have a much wider gamut showing many more colors. This wider gamut is taken up by CSS Color Module Level 4. The following discussion uses the previous 8 bit color standard, where each RGB channel is allocated 256 levels of intensity. The computer starts counting its colors at 0 intensity, or off. The color, when all three channels are off, is black. If the red, green and blue channels are each at 255, or completely on, the color is white. There are over 16 million possible colors between black and white. The exact number is 256 x 256 x 256, or 16,777,216 colors.
8 Bits to a Byte
For the computer, each of the eight bits per channel represents a binary state that is either on or off. The number of different possible states that these 8 bits of information can form is 256. The computer functions in base 2. We function in base 10, because we have 10 fingers. Think of the computer as having only one finger that can be either up or down.
One bit is either off or on. That’s two possible states. Two bits make for four possible states. The bits can be off off, off on, on off or off off. If you were to add one more bit, you’d double the number of possible states because you get the same four possibilities twice. The first four with the third bit off and the next four with the third bit on. That makes for 8 possibilities with 3 bits. Adding another bit doubles this number again. This doubling continues each time another bit is added, so that 8 bits create 256 possible states.
One byte is composed of 8 bits of information. 256 represents the number of possibilities stored in one byte. Three channels at 8 bits each is known as 24 bit color. An additional alpha or transparency channel can be added as a mask, requiring 32 bits in all to describe the color state of each pixel in a png-24 image with transparency or a Photoshop layer. Know that Photoshop is essentially a calculator, calculating the 8 bits of information for each channel times four channels to arrive at the 32 bit layer. It then calculates all of the layers together to create a composite image. This is what you see when you’re working in Photoshop.
The Base 16 shortcut (Hexadecimal Numbers)
This color is 182 red, 161 green and 134 blue. To reduce space in web development, this color is often described, not in base 10, where the three RGB channels would take 24 bits, but in base 16, using hexadecimal notation, like this: #b6a186 . That reduces all three channels to only 6 from 24.
That is because programers divide the byte (8 bits) into two nibbles (4 bits each, or 16 possibilities) which corresponds into two hexadecimal numbers. Hexadecimal is a short hand way to write binary numbers and that make life easier for programers since they can describe 256 colors using only 6 digits rather than 0. See table of nibbles.
Hexadecimal is base 16. It is like having 8 fingers on each hand, or 16 fingers all together. We count that 0 1 2 3 4 5 6 7 8 9 a b c d e f. That’s 16 digits ain total. Two hexadecimal numbers can express a channel’s color: 16 x 16 = 256. Six hexadecimal characters can express any of the 16 million plus possible colors. For example, the hexadecimal b6 is the same as the base ten number 182 .
If the hexadecimal units are the same in each of the three channels, as in red: #ff0000 , it can be shortened to #f00 , green: #00ff00 , shortened to #0f0 , or blue: #0000ff , shortened to #00f . When all the channels are the same value, #888, the colors cancel each other out, and all that is expressed is the brightness value. #444 is dark grey while #bbb is light gray. If this sounds confusing, be glad we don’t use quantum bits to describe the color.
Hue Saturation and Brightness (HSB)
red is 0°
yellow is 60°
green is 120°
cyan is 180°
blue is 240°
magenta is 300°
It is not natural to think in terms of RGB. We think in terms of HSL. What color is it? How much color is there? How light or dark is the color? This is described by Hue, saturation and luminance (HSL), which takes three values: Hue is a degree on the color wheel from 0 to 360, where 0 is red, 180 is green and 240 is blue and 360 is red again. So is 720, or any other multiple of 360 — the colors repeat.
Saturation is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance.
Hexadecimal
Percent
#000
0%
#111
7%
#222
13%
#333
20%
#444
27%
#555
33%
#666
40%
#777
47%
#808080
50%
#888
53%
#999
60%
#aaa
67%
#bbb
73%
#ccc
80%
#ddd
87%
#eee
93%
#fff
100%
Luminance is also a percentage; 0% is dark (black), 100% is light (white), and 50% allows for full chroma. The table on the right gives percentages of grey translated from hexadecimal, or base 16, with middle grey being #808080.
Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color but it is preferred over the RGB method of specifying a color. With HSL it is easy to increase the saturation or luminance for a particular hue, something that is not at all intuitive using RGB.
Change the Color of the Background
CSS Code View
Live Demo
Color Names
You can use names instead of code. The name silver is a light grey. The actual code for silver is #c0c0c0 and it has an RGB value of 192 for each channel. Common color names are red, orange, yellow, green, cyan, blue, purple and pink. A list of all the names of the colors, with their Hexadecimal and decimal numbers:
Color
Color name
Hex rgb
Decimal
aliceblue
#f0f8ff
240,248,255
antiquewhite
#faebd7
250,235,215
aqua
#00ffff
0,255,255
aquamarine
#7fffd4
127,255,212
azure
#f0ffff
240,255,255
beige
#f5f5dc
245,245,220
bisque
#ffe4c4
255,228,196
black
#000000
0,0,0
blanchedalmond
#ffebcd
255,235,205
blue
#0000ff
0,0,255
blueviolet
#8a2be2
138,43,226
brown
#a52a2a
165,42,42
burlywood
#deb887
222,184,135
cadetblue
#5f9ea0
95,158,160
chartreuse
#7fff00
127,255,0
chocolate
#d2691e
210,105,30
coral
#ff7f50
255,127,80
cornflowerblue
#6495ed
100,149,237
cornsilk
#fff8dc
255,248,220
crimson
#dc143c
220,20,60
cyan
#00ffff
0,255,255
darkblue
#00008b
0,0,139
darkcyan
#008b8b
0,139,139
darkgoldenrod
#b8860b
184,134,11
darkgray
#a9a9a9
169,169,169
darkgreen
#006400
0,100,0
darkgrey
#a9a9a9
169,169,169
darkkhaki
#bdb76b
189,183,107
darkmagenta
#8b008b
139,0,139
darkolivegreen
#556b2f
85,107,47
darkorange
#ff8c00
255,140,0
darkorchid
#9932cc
153,50,204
darkred
#8b0000
139,0,0
darksalmon
#e9967a
233,150,122
darkseagreen
#8fbc8f
143,188,143
darkslateblue
#483d8b
72,61,139
darkslategray
#2f4f4f
47,79,79
darkslategrey
#2f4f4f
47,79,79
darkturquoise
#00ced1
0,206,209
darkviolet
#9400d3
148,0,211
deeppink
#ff1493
255,20,147
deepskyblue
#00bfff
0,191,255
dimgray
#696969
105,105,105
dimgrey
#696969
105,105,105
dodgerblue
#1e90ff
30,144,255
firebrick
#b22222
178,34,34
floralwhite
#fffaf0
255,250,240
forestgreen
#228b22
34,139,34
fuchsia
#ff00ff
255,0,255
gainsboro
#dcdcdc
220,220,220
ghostwhite
#f8f8ff
248,248,255
gold
#ffd700
255,215,0
goldenrod
#daa520
218,165,32
gray
#808080
128,128,128
green
#008000
0,128,0
greenyellow
#adff2f
173,255,47
grey
#808080
128,128,128
honeydew
#f0fff0
240,255,240
hotpink
#ff69b4
255,105,180
indianred
#cd5c5c
205,92,92
indigo
#4b0082
75,0,130
ivory
#fffff0
255,255,240
khaki
#f0e68c
240,230,140
lavender
#e6e6fa
230,230,250
lavenderblush
#fff0f5
255,240,245
lawngreen
#7cfc00
124,252,0
lemonchiffon
#fffacd
255,250,205
lightblue
#add8e6
173,216,230
lightcoral
#f08080
240,128,128
lightcyan
#e0ffff
224,255,255
lightgoldenrodyellow
#fafad2
250,250,210
lightgray
#d3d3d3
211,211,211
lightgreen
#90ee90
144,238,144
lightgrey
#d3d3d3
211,211,211
lightpink
#ffb6c1
255,182,193
lightsalmon
#ffa07a
255,160,122
lightseagreen
#20b2aa
32,178,170
lightskyblue
#87cefa
135,206,250
lightslategray
#778899
119,136,153
lightslategrey
#778899
119,136,153
lightsteelblue
#b0c4de
176,196,222
lightyellow
#ffffe0
255,255,224
lime
#00ff00
0,255,0
limegreen
#32cd32
50,205,50
linen
#faf0e6
250,240,230
magenta
#ff00ff
255,0,255
maroon
#800000
128,0,0
mediumaquamarine
#66cdaa
102,205,170
mediumblue
#0000cd
0,0,205
mediumorchid
#ba55d3
186,85,211
mediumpurple
#9370db
147,112,219
mediumseagreen
#3cb371
60,179,113
mediumslateblue
#7b68ee
123,104,238
mediumspringgreen
#00fa9a
0,250,154
mediumturquoise
#48d1cc
72,209,204
mediumvioletred
#c71585
199,21,133
midnightblue
#191970
25,25,112
mintcream
#f5fffa
245,255,250
mistyrose
#ffe4e1
255,228,225
moccasin
#ffe4b5
255,228,181
navajowhite
#ffdead
255,222,173
navy
#000080
0,0,128
oldlace
#fdf5e6
253,245,230
olive
#808000
128,128,0
olivedrab
#6b8e23
107,142,35
orange
#ffa500
255,165,0
orangered
#ff4500
255,69,0
orchid
#da70d6
218,112,214
palegoldenrod
#eee8aa
238,232,170
palegreen
#98fb98
152,251,152
paleturquoise
#afeeee
175,238,238
palevioletred
#db7093
219,112,147
papayawhip
#ffefd5
255,239,213
peachpuff
#ffdab9
255,218,185
peru
#cd853f
205,133,63
pink
#ffc0cb
255,192,203
plum
#dda0dd
221,160,221
powderblue
#b0e0e6
176,224,230
purple
#800080
128,0,128
rebeccapurple
#663399
102,51,153
red
#ff0000
255,0,0
rosybrown
#bc8f8f
188,143,143
royalblue
#4169e1
65,105,225
saddlebrown
#8b4513
139,69,19
salmon
#fa8072
250,128,114
sandybrown
#f4a460
244,164,96
seagreen
#2e8b57
46,139,87
seashell
#fff5ee
255,245,238
sienna
#a0522d
160,82,45
silver
#c0c0c0
192,192,192
skyblue
#87ceeb
135,206,235
slateblue
#6a5acd
106,90,205
slategray
#708090
112,128,144
slategrey
#708090
112,128,144
snow
#fffafa
255,250,250
springgreen
#00ff7f
0,255,127
steelblue
#4682b4
70,130,180
tan
#d2b48c
210,180,140
teal
#008080
0,128,128
thistle
#d8bfd8
216,191,216
tomato
#ff6347
255,99,71
turquoise
#40e0d0
64,224,208
violet
#ee82ee
238,130,238
wheat
#f5deb3
245,222,179
white
#ffffff
255,255,255
whitesmoke
#f5f5f5
245,245,245
yellow
#ffff00
255,255,0
yellowgreen
#9acd32
154,205,50
Transparency
CSS3 also added the opacity property for transparency, or opacity. Add a slash to the rgb or hsl color definition and a value range from 0 to 1, with 0 being transparent and 1 being opaque. That makes .5 half way transparent. Examples: color: rgb(100% 0% 0% /.5), color: color(sRGB 0 1 0 /.5) and color: rgb(255 0 0 /.5) or color: hsl(0 50% 50% /.5)
color: color(sRGB 0 1 0 /.5) and color: hsl(0 50% 50% /.5) are part of the new CSS level 4 color specification. The CSS color module level 4 allows for wide P3 gamut colors beyond the sRGB gamut that has been standard for the last 20 years.
You can make any element transparent by using the opacity property.
To help you see the relation between the HLS and opacity, change the numbers in this demo. I’m sure you have a favorite color or color combination. Change some of these colors to your favorite colors:
CSS Code View
Hue is from 0 to 360°: red=0°, orange=30°, yellow=60°, green=120°, cyan=180°, blue=240°, purple=280°, magenta=300°, pink=320°, red=360°, and so on, for the colors repeat.
Saturation is from 0% to 100%. Luminance is from 0% to 100%, with 50% being fully saturated. Transparency is from 0 to 1, with 0 being fully transparent and 1 being fully opaque.
A detailed and comprehensive explanation of using and compressing images on the web: Essential Image Optimization by Addy Osmani and a nerd’s guide to color on CSS Tricks. Smart Phones and new displays are able to use the expanded P3 color gamut that is 50% larger than RGB. Apple pioneered P3’s use and CSS Tricks has an article to explain it. The new CSS Color Module Level 4 specification.
sRGB linear expresses the new colors as if they were in the default RGB space before gama corrected. The resulting correction is non-linear sRGB. (There was no explanation for this in the article, in case you were wondering :-).
Everyone needs to publish their work on the web. We start the class by making sure that everyone can, using Fetch.
The server space is a lot like your desktop, only instead of folders, they are called directories. These servers are usually run by computers running Linux. These operating systems do not tolerate spaces, and lower case letters and capitalized letters (a and A) are two different letters. As long as you follow those rules, you should have no problem uploading files to your web space.
You can drag and drop between the Finder window and Fetch, and the document icon in Textwranger can also be dragged into fetch. Know that when you drag the same document into Fetch, the document will be overwritten without warning.
TextWranger is a free program that will serve as our text editor. There are a number of useful features that will make your life easier, including coloring the code so you know that you are doing it right, search and replace over multiple documents, show line numbers, invisibles, etc. If you need more help, download the TextWrangler Documentation PDF.
The most important features that you need to be aware of is that by clicking on the document icon, you go to it in the finder. You can use that icon to drag the file into the browser or into Fetch as well. The pencil locks the document, if you do not want to make any changes to one or another document (useful if you are comparing one document to another and get confused). The pop-up list shown as a box with the T has a number of useful preferences, including Soft Wrap Text and Show Line Numbers. At the bottom of the toolbar is a pop-up list that has the open documents in it, and next to that is a pop-up list that shows major tags and comments. This is one way to easily get around a long document, provided that you comment your work. Another useful feature for long documents is the ability to split the document window into two views, which you do by click and dragging the small grey rectangle right above the scroll bar.
The goal is to prepare a semantically well formed HTML document. How do we go about doing this?
Organizing the Content
Document structure before HTML5 was organized according to the hierarchy of header tags, which went from the most general to more specific, following the way content is created.
How content is created? In a well written document, the topic is expressed by the title. It is then supported by subtopics. This structure is duplicated in HTML. The main header expresses the title, and sub headers express the subtopics.
This hierarchy of headers used to be the only structure an HTML document had. The title is an <h1> header that explains what document is about. Second level topics are given a <h2> header, and if there are third or forth level topics, they receive a <h3> or <h4>. Headers become more specific as the levels go down, to level <h6>, the most specific header available in HTML. There is no <h7>.
Here Come the Machines, or The Semantic Web
We can understand the content of a web page, because we are cognizant beings. The World Wide Web was originally built for human consumption, and although everything on it is machine-readable, this data is not machine-understandable. It is very hard to automate anything on the Web, and because of the volume of information the Web contains, it is not possible to manage it manually.
It has been a goal of the 3W.org and of Tim-Berners-Lee in particular to overcome this problem. To that end, Tim Berners-Lee coined the term semantic web, and has simplified it to something he calls linked data. You can see this idea embodied in a discussion of statistics by Swedish professor Hans Roseling.
The goal of the semantic web project is to make machines understand, as far as possible, the meaning of the content from the structure and meta information contained in the markup itself. This would allow automated agents, like bots that cruse the web, to link up information in a meaningful way.
Such agents would automatically locate related information on behalf of the user. That would allow us to cut through the noise, so to speak.
The semantic web has been gaining ground, and is currently (2015) expressed as
In addition to the classic “Web of documents” W3C is helping to build a technology stack to support a “Web of data,” the sort of data you find in databases. The ultimate goal of the Web of data is to enable computers to do more useful work and to develop systems that can support trusted interactions over the network. The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data.
HTML vs XHTML
HTML is tolerant of human differences in coding and allows for errors. That made it difficult for machines to understand the semantic meaning of the content. W3.org introduced XHTML as a way to clean up the excesses of human error. It saw XHTML as the future of the web, and was fully prepared to release XHTML2 as the future of the web back in 2005-6. Good thing for us that didn’t happen.
Based on XML, or extensible machine language, it would have make the web much more friendly for machines to repurpose the information, but at a price. Humans would have been required to write code with machine like accuracy to create all their web pages. To enforce that accuracy, draconian error handling would not render pages if they were not XHTML2 compliant.
A group of browser makers (Apple, Mozilla Foundation and Opera) revolted and came together in 2004 to form the Web Hypertext Application Technology Working Group (WHATWG). They created HTML5 in response to XHTML2, making it forgiving to human error, even standardizing how errors are to be resolved, and introduced new tags that would allow for a more semantic web.
The messy world of human error won over the more perfect coding world of machines. XHTML 2.0 was canned by the W3.org and was allowed to expire in 2009, officially recognizing HTML5 as the way of the future. It should be noted that there is an XHTML5 version, for machines to read and write, but we need not be concerned with that.
You can view the differences between HTML and XHTML in this Table. To provide but one example, while XHTML requires all starting and ending tags, HTML is quite cavalier about it, so that both starting and ending tags are optional for the html, head and body tags. A well formed HTML5 document can start and end with the content itself. End tags are optional for li, dt, p, tr, td. I personally started to leave these out as the W3.org site itself leaves them out. I figure that they set the standard by which we are to measure our web pages. Roll over in your grave, XHTML2.
Tag Soup
The model for marking up a page is to let the CSS do all of the styling. This is most easily done by using the <div> tag for block elements and the <span> tag for inline elements, and then giving them id or class attributes: <div id="header">. <Div> stands for division, and is a generic element that, along with other block elements, can be thought of as boxes that divide the page. The <span> tag “spans” the content of inline elements. The content of inline elements are like characters, though they can be pictures, links or characters that make up the content of a paragraph.
Everything can be marked up with these <div> and <span> tags, and before HTML5, this is what a lot of people did, to the exclusion of using the other HTML tags.
The problem is that these are generic tags that do not impart any meaning onto the content. The over-use of these tags, called “classitis” and “divitis”, of which I have been guilty of in the past, contributed to a lack of semantically well formed web pages. Being semantically neutral, the markup could not be counted on to help machines understand the meaning of the content.
The solution is simple. Use the different HTMl tags to determine the content, and only use the <div> and <span> tags if necessary.
Imparting Semantic Meaning to the Markup.
The content can be structured so that it becomes more semantically meaningful, by using the header tags, specific tags, microformats and meta tags. HTML5 then comes along and introduces a number of new tags that help determine the document content’s. meaning .
Document Hierarchy and structure
As mentioned above, before HTML5, documents were structured using the header tags <h1> through <h6>. This does not always synch up with a designer’s gut reaction, which visualizes header 1 as bigger and bolder than header 2. This is how they are in the default browser style sheets. Designers then use these header tags according to their idea of the visual hierarchy.
This may or may not be correct, as the design’s visual hierarchy does not necessarily follow the semantic requirement that header tags reflect the structural meaning of the content. It’s possible, for example, to make a <h1> smaller and less bold than a <h3> if that is what the layout calls for.
Before HTML5, each document should have only one <h1> tag that expresses the title and purpose of the page. All of the subsequent content should be organized according to the <h2> through <h6> headers. With HTML5, each tag can have its own hierarchy of <h1> to <h6> headers, making it much easier to structure complicated documents.
Semantic Code Elements
Tags that describe the content are:
<cite>
Citation, used to cite a source of information.
<code>
Computer or Programming code.
<del>
Deleted word or phrase.
<dfn>
Definition.
<dl>
Definition List. Similar to UL and OL but uses DT (Definition term) and DD (definition description) to show terms and definitions.
<em>
Emphasis, displayed as italicized text.
<ins>
Insert, used to display text you have inserted due to an edit at a later date.
<kbd>
Keyboard instructions.
<ol>
Ordered List.
<samp>
Sample output, used to show sample output from programming code.
<ul>
Unordered List.
<var>
Variable, used to represent a variable in programming code.
<strong>
Strong, or bold, emphasis on a word or phrase.
MicroFormats
Microformats are agreed upon classes used to tag certain information. Instead of making up your own name for the class, which would be specific only to your document, a name has become universally recognizable by convention. This is quite handy for things like contact information or calendars, and can be seen in Apple’s Address Book and iCal, which uses standardized microformats.
In this example, the contact information is presented with generic markup:
<div><div>Joe Doe</div><div>The Example Company</div><div>604-555-1234</div><ahref="http://example.com/">http://example.com/</a></div>
With hCard microformat markup, that becomes:
<divclass="vcard"><divclass="fn">Joe Doe</div><divclass="org">The Example Company</div><divclass="tel">604-555-1234</div><aclass="url"href="http://example.com/">http://example.com/</a></div>
Structured data
To improve your website’s chances at being found in a search, Google recommends using structured data, which goes beyond the HTML elements used to display content to using microdata to give information about the content’s meaning. Google’s article on structured data. Microdata requires the use of a standardized vocabulary of which schema.org is the most used. Using such a vocabulary makes it possible to provide meaning for content that can be read by browsers, readings apps, search engines, and technologies like Apple’s watch. Implementing structured data is above what will be covered in the course, but you should be aware of structured data.
Accessible Rich Internet Applications (ARIA)
ARIA is a set of HTML attributes that define ways to make web content and web applications more accessible to people with disabilities. Where HTML5 provides some semantic meaning, javascript often does not, which makes for broken and incomplete transfer of information to people with disabilities.
W3.org provides for resources for how to address people with disabilities. They even provide stories of people with different disabilities so you can better understand the challenges they face. Ideally, web design address all possible cases. HTML 5 goes a long way to structure content in ways that make it accessibility for people with disabilities. As the websites produced in this course tend to be simple, well structured HTML5 documents will be the primary way disability compliance is addressed.
Meta Tags
Meta tags that described the content. They are used by bots to identify page content. This use to be especially important for search engine optimization but was abused. Google will still take them into account but they no longer have the weight they used to have.
Here is a list of some of these meta tags that can appear in the header of the web page. You can use these yourself. Just fill in _missing_fields and delete unwanted tags.
HTML5 added structural elements that provide additional semantic meaning, replacing the divs that would otherwise have marked up the page. Incorporate these elements into the structure of the document as part of its semantic structure. You can find out more about HTML5 elements here.
The HTML5 Tags help to structure your content/document
main is an element that can be used only once per page. It represents the main content of the body. The main element may not be a descendant of a article, aside, footer, header or nav element.
section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
article represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside represents a piece of content that is only slightly related to the rest of the page. For complimentary content to the main content (Taken from XHTML 2.0 specification)
header represents a group of introductory or navigational aids.
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav represents a section of the document intended for navigation.
picture represents a container for multiple img elements that gives browser hints as to which img to display depending on pixel density, viewport size, image format, etc..
figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document, and used to attach a caption to that content using figcaption
