Production process and pipeline related subjects
We discussed the full production process (minus “publishing”).
Outlined below is a short list of the subjects covered. To read a more complete description of each item visit the production process page.
Today we reviewed many of the most important features of CSS. We reviewed the simple CSS demo and walked through it line by line discussing the possible values for css properties: Simple CSS Demo
The Advanced CSS demo includes CSS3 features that aren’t supported in older browsers but can add a lot of visual interest to a design: Advanced CSS visual styling
Very complex and experimental css Features: Transformations, animations, etc.
We discussed how to position elements on the screen via floating. Students must be able to set the widths of elements (width, padding, margin properties) and float them to create columns.
Discussed static, absolute, relative and fixed positioning and the differences between their positioning models.
Walked through the first design layout for a website.
Today we discussed several HTML related subjects, including tables and forms. We also spent a fair amount of time discussing paths and how to create links between files.
We also reviewed the homework assignments. Most of the student decisions were solid except for nested hierarchies. I think that in the future I will emphasize creating a nested architecture of HTML that provides the most semantic information possible for content items.
Students learned about relative and absolute paths and worked through a short student assessment for creating paths between files.
The natural path starting with one file and to another. This is probably the most common format for links between files on the same server.
Good things to remember
“current working directory” is the directory where a file is located. For instance, the index.html file is located in the root of the server. If we link from the index.html file, then the current working directory is “root”.
“../” means to move up one director to the parent of the current working directory.
“/” means to move down into the next directory.
Examples:
theironweb.com
-root- index.html
|
|-img-
| |-face.jpg
|
|-sub-
|-products.html
|-aboutus.html
In the proceeding example, we have the root of the site. In the root is the index file and two directories, “img” and “sub”. In the “img” directory is one image, “face.jpg”. In the “sub” directory are two files, “products.html” and “aboutus.html”.
A path from index.html to products.html: “sub/products.html”
A path from aboutus.html to face.jpg: “../img/face.jpg”
A path from products.html to index.html: “../index.html”
Absolute Paths start at the root of a site and are usually full urls.
Examples:
A path to products.html: “theironweb.com/sub/products.html”
A path to face.jpg: “theironweb.com/img/face.jpg”
A path to index.html: “theironweb.com”
Students learned about the table tags and structure and how to control the width and span of table cells. They marked up a table of baseball statistics (yeah!).
Tags to remember:
Students learned about the structure of forms, get and post requests, actions and most of the common form field options. Students composed a survey for collecting data about the movie watching habits of users.
Tags to remember:
Also remember that many form fields are determined by their type attribute. The input form field can be a checkbox, a text input, a radio button, submit, and many other input types. Please review the w3c tags page for a full listing.
Today we worked through a bunch of housekeeping stuff:
Illustrator is a vector editing program for working with resolution independent graphics.
Students need to familiarise themselves with the text tools, creating shapes, and changing colors. Students should also be able to navigate the layers panel. A couple students had not downloaded this app so they were given additional homework to make sure they have the basic skills necessary to work with the software.
Photoshop is a bitmap editing program for working with raster graphics.
Students need to familiarise themselves with the text tools, creating shapes, and changing colors. Students should also be able to navigate the layers panel.
Sublime Text 2 is a text editor that enables authors to program with powerful features like code expansion and syntax highlighting.
Students should be able to open a directory with Sublime Text and to edit and save .html files.
Every student downloaded Slack. Still need to get some of them into the TIY Students account and to create the class chat thread.
Chrome is the browser that we will use for viewing our code and for testing.
Students should be able to open the developer tools and view the html, css and box model views. Students should also be able to open their local text files in Chrome for review.
Portfolio Day will take place about a week before the class is over. Each student will present a minimum portfolio of 3 sites for review by around 12 professional designers and developers. Students should talk competently about the problems their site solve and should be able to justify their UX and design decisions.
Demo Day is an option presentation opportunity for student. They will be given the opportunity to create a 10 minute Keynote about their best project to present before a room full of hiring partners. Students must have completed all steps of the project and have practiced their keynote in front of their classmates.
We discussed the concepts of Semantics and Syntax. We discussed HTML attributes and nesting.
Tags covered: a, aside, blockquote, ul, ol, li, h1-h6, img, nav, header, footer, section, figure, div, span.
NOTE: Some tags are semantic and some are not. Can the students remember which is which?
The first assignment is to convert 4 pages of content into raw HTML. DUE TOMORROW.