Weekly Breakdown of Classwork

We will go over the basic class requirements, syllabus and expectations.

Browsers - SYSTEM

• Edge (replacing Internet Explorer)
• Safari Apple
• Chrome Android|ChromeOS Chrome help

INDEPENDANT

• Firefox Mozilla
• Firefox Developer Edition Mozilla
• Brave all about security and privacy
• Opera very different, been around forever.

TOOLS

• An article that explains taking screenshots of everything
• Plug-in EFF Privacy badger
• Adobe Acrobat reader sometimes you just need the original
• Google Docs help
• adding monitor keyboard and mouse to laptop
• multiple monitors Windows, Macintosh

Web Publishing Toolkit

When we work on web publishing we need a set of software tools to help us.

Text Editors

Sometimes referred to as code editors, they can be dedicated to just HTML or many different forms of code. Notepad comes built-in to Microsoft Windows. It does not provide any help when coding. TextEdit comes built-in to Apple macOS also does nothing much to help you, but they are there if you just need something.

• Atom Editor Created by the people from GitHub it is available for all 3 operating systems* and is free.
• Visual Studio Code is Microsoft's entry into free code editors, available to all.
• Brackets is Adobe's Opensource editor focused more on HTML than general coding. Available to all.
• Sublime Text is commercial software with an endless free trial. Currently one of the most popular editors in use.

There are other choices, if you are a die hard Linux user you can try using VI or VIM. Windows users like Notepad++ and for Macintosh people there is BBedit. I am currently using Nova from Panic software that is a brand new replacement for CODA.

Another thing you might have never considered, there are lots of typefaces designed to help you read code in an editor.

• Hack is an open-source typeface designed for coding.
• iA has created their own version of IBM's Plex font called Duo. Check them out.

Where to begin

We are going to talk about the basic parts that include and support HTML. I strongly suggest that you take notes. Either now or by skimming through the recorded lesson later. Make a master folder/directory on your system and keep your notes with your work. If you are a hand writer dump images into a sub-folder. Otherwise use your text editor, its good practice.

TUESDAY | HTML Dive-in

This week we really start the process of making HTML pages.

I have 2 text files with my own favorite filler text ozymandias.txt and jabberwocky.txt.

Things for your toolbox

So you don’t get in trouble search images under CC copyright.

HTML elements reference

HTML5 test page on GitHub

Introducing Semantic Elements

Reading

This week, I would like you to read through Chapter 4 Creating a Simple Page. Pages 49–70. We will come back to the first 3 chapters later.

Reference

These are links to the main sites. Keep these in your toolbox. More often than not a Google search will lead you strait to one of their pages.

• W3Schools
• Mozilla MDN

THURSDAY | An Interweb of Cats

We have an html page that sits by itself. Now we add the H of HTML and hyperlink things.

The cat because the World Wide Web was created by cats for cats.

I mentioned before that all HTML is just a text file. That fact never changes. When we start adding things like images and other media or links to jump somewhere else we still only have a text file, nothing is ever embedded into it.

Images

We are talking about links and the image tag is a kind of link that pulls an image onto the rendered page.

Hypertext

So what is a hyperlink? A clickable thing that takes your to a different place.

So you should have a basic understanding of the structure of an html page. A short set of tags that let you format your page. Now you can add a simple image and make hyperlinks.

LAB ASSIGNMENT: Stupid web poetry. I want to you create a series of webpages, all linked together as a narrative (minimum of 3 pages). All pages need to have the correct structure and elements. All links must work. You may choose to use images or not. I also want you to make a set of navigation links separate from the narrative that allow someone to move from any of your pages to any other pages.

TUESDAY | HTML5 semantics and structure

Today will with follow along chapter 5 in the book (page 71). I will be giving you a textfile of content to play with that I borrowed from Wikipedia about Murial Cooper. We are going to use it to break down formatting, structure and semantics.

THURSDAY | The Cascade of Style

We went over a lot on Tuesday and I left you to work though trying to markup the text of Muriel Cooper's bio. We will revisit this and review.

We are now going to introduce the style sheet. We refer to it as CSS or Cascading Style Sheet. When we talk about CSS we need to expand our understanding of Web Publishing and how the browser renders a page including things like the DOM or Document Object Model. The other big concept is that of the 'cascade' which we deal with when we add styles in different ways.

If you are caught up on reading chapter 5 and have no personal life to speak of, you can read chapter 11 in the book introducing CSS.

Note: Next week are going to start talking about the web and internet and web servers and how you will be running your own local development server.

Running your own local server

We are only going to serve static pages meaning html and css.

The original web server was called httpd. We call background processes servicesi now, but UNIX called them Demons (Deamons) like Beastie the BSD demon.

The first working web server ran on a NEXT machine so many of the World Wide Web’s conventions are UNIX flavored.

LAMP stack

The most common web server system is called a LAMP server. Linux Apache MySQL PHP. You will see P interpreted as Python and lots of other scripting languages. There are lots of competing ’stacks’ now. If you have ever worked with WordPress or its cousins you have used a LAMP system.

• Apache webserver
• NGINX web server designed for UNIX/LINUX it was designed to handle modern high scale transactions.
• Microsoft IIS Internet Information Services

Set up your own

The easiest to install and available to all platforms is XAMPP. It runs a complete web server as an application, meaning you can run and quit it like any other app on your computer.
FYI: MAMP is another similar project but I find XAMPP is easier.

If you have a working version of Python running on your computer. You have a simple HTTPD server on demand. First go to the directory you want to use as root. Then type:

		
			python3 -m http.server 8000
		
	

Use ctrl+c to kill it.

For those who are already playing with Virtual Machines and have already installed Virtual Box take a look at Vagrant.

We will go over how the web works and what we need to understand to make it work.

Be ready to run around your computer and look at stuff.

Grab a fresh copy of the HTML5 test page on GitHub if you don't have it handy. Start reading Chapter 11 in the book introducing CSS page 239.

RESOURCES

Mozilla Dev CSS reference and the W3School CSS scroll down to the reference section.

Hyperlinks have a set of pseudo classes and a particular order they require in a stylesheet.

Color resources

• Wikipedia color chart
• HTML Color cade design site
• Adobe Color

Typography

We are just scratching the surface here.

• Google Fonts

We begin to enter the Matrix. To understand the nature of a web page we must understand The Box Model. Here is a bit of CSS magic to help you see.

		/* The Red Pill */
		* {
	  	outline: 1px solid red !important;
			}

Developer Tools

Style Editor
Layout tab

The basic parts of the box model

• Box Model basic width and height properties.
• margin property
• The padding property
• The boarderproperty

Now that you understand the box model, let me change it for you. CSS box-sizing was a cry for help from Web Designers who where tired of keeping 2 sets of numbers in their heads.

The box model is one fundamental part of a web page. The compliment to it is the display property.

We talked about using pixels for our measurements. We also can use percentages. The new one for you to absorb is the em. The em comes from Typography and loosely represents an ‘m’ in the typeface. It allows us to relate all our measurements to the type.

Your turn: Show me you understand the box model

• start a new html file. Use one of my text files or grab some working text of your own.
• create a series of boxes within boxes 3 total. Color them with CSS
• box 1 use percents
• box 2 use Ems
• box 3 use pixels

Tables are one of those workhorse systems that don't get a lot of love. However the web has lots of data and there is no better way to present data than a table.

Tables are in Chapter 8 page: 163 of the book, and W3c shools link.

Please use your SUNY email and sign up on Github we will be using this later to host our live projects.

Any time we interact with a website we use a form. Forms are the interface between the user, the browser and some form of scripted logic/database. This makes then the most complicated and multistep of all html tags.

The simple form that’s not so simple.

Form elements

There are several good reference sites for forms. Mozilla who also talks about the button tag.

Tabindex is a really important aspect of making web forms. When a user clicks the ’tab’ key or equivalent the focus will jump to the next form input. It is important that the flow makes sense to the user - imagine an order for humans and order for machines.

Tools

We are going to use some apps and tools to explore forms as they where meant to be used. We will then have a better idea what we are coding in the future.

• bootsnip is part of a larger framework.
• WuFu is a side company from Mailchimp and allows you to make dedicated web forms.
• Google Forms is the one we will be playing with, it is part of Gsuite so everyone has it.

Form Design

A good web form requires some pre-thinking and design. These best practices will introduce you to good methods and ideas.

Iframes are an html convention that refuses to die. If you are reading this in Blackboard you are using one.

Assignment - make a form using google forms or wufu. Capture the person’s full name and favorite color. Ask 5 questions regarding what they want to eat for lunch.

You need to use

• text box for open questions
• drop down /(single choice from multiple options)
• check box (multiple choices for multiple items)
• multiple choice
• date

Email me the link to the form and I will fill it out.

Before we can make all those cool looking websites we need to organize our stuff and more important, tell our webpages where to find it. You can read about it in the book starting on page 116.

Image formats are something you need to be comfortable with and easily identify. Know your jpeg and even mpeg from your gif and png. If you are looking for an open source image editor to work with GIMP has a large following and lots of tutorials.