Class hours: 9:40am – 2:05pm
Mr. Cronin
Mr. Moore
Notes
- NTHS is Thursday!
- Quiz Friday!
- During 7/8 or what not, I do have Web Dev grades to share. I was going to try to post them online, but it was getting to be more trouble than it was worth trying to anonymize the data, while still keeping the layout in alphabetical order for my own sanity. So, I have grades for Web Dev 1, with Web Dev 2 due tomorrow.
9:40 Attendance and Article
9:45 Web Design Content: The Responsive Web
- What is “Responsive Web Design”?
- Really well-done example at MarthaStewart.com off all places.
- The opposite of well done.
- What is the history? What were m-dot sites?
- What are Media Queries? What is the “Write once, run everywhere” idea of Responsive Web Design (And Java – stealing a bit from them here.)
- Overwriting rules to fit your needs, simple as that.
- Validation – a good first step – created by the W3C.
- Inspect Element – learning to rely on the built-in Developer Tools in Chrome for Web Designers.
We are going to explore this first by creating a mobile version of our Vaporwave layout. Validate, tinker, work. etc.
10:45 Break (15 Minutes)
11:00 Taking over your Web Space
This morning we are going to start talking about managing our own web site long term. You are first going to manage your spot on the server.
This will be a combination of creation and long-term maintenance. If you don’t maintain it well, you will get zero’s as I can’t access your work.
First, let us clear up some naming issues on our servers. If we are consistent, our design life will be much easier.
Then let’s talk about wireframing out a structure for our site using a floating page layout on desktop & mobile.
You are going to have to have:
- <main> html5 element to hold everything
- <header> html5 element / Display text for you.
- No nav – this is a single page
- <section> html5 element to hold the main info.
- Use of a Google Web font for the display text. This will be your name up at the top. Display Text (as it is typically shorter, and larger) can have a funky font.
- Use Arial for the body text. It is very legible, which is most important for smaller, narrative text.
- In the section, I want to have a split between first quarter, second quarter, midterm, and 3rd quarter work. Headings and links which go to the subfolders.
- If you are taking WebDev, create a subheading and links for that.
- Links to three friends in class. Create absolute links to their homepages. What is the difference between an absolute and a relative link?
- This homepage is going to be called “index.html” so it auto loads and it will go in the root directory of your web server. All other assets such as your css and images folders go next to it. This entire project lives outside of your weekly folders.
First, we are going to wireframe. This is graded as a pass / fail.
Once you have the wireframe checked off, you can get to work on building it.
You must have this built and ready for grading tomorrow so I can access your work. If anything you have to AT LEAST have a link to your Week 24 work or Wednesday at 3pm I won’t be able to access your work!
12:10 Lunch (30 Minutes)
12:40 Attendance and Article
12:45 Tuesday Afternoon Client Redesign – Cafe and Bakery at CTE
This afternoon you are going to redesign the Cafe and Bakery for CTE. There are some issues that I want to address. While it has some decent info, it is obviously structured on a school / larger organizational approach that offers a great deal of superfluous information we are going to eliminate.
We are going to wireframe a menu structure which strips out any information which would not show up on a paper menu. We are going to bring it in line which other restaurants that offer clean, simple, classic menu structures.
Recode using the content in the example folder – (I copied and pasted so we all have a good starting point.)
Make sure setup for responsive. I never want to see a horizontal scrollbar ever again.
Call your file “index.html” and place all assets in a “cafe” folder inside Week 25. This will create a project which autoloads when I enter the folder. We are moving away from clicking on links to active the project.
2:00 Dailies
