This page is a collection of resources and files for you to use and learn with.
To begin you need a text editor and a web browser. You already have some kind of web browser to be reading this. But if you are interested in the main cross platform browsers here are the big 2. The reason I recommend them is they have the most active developer resource groups and they are always pushing their own developer tools.
We are going to use the Atom editor, because its cross platform. By that I mean all platforms Linux, Macintosh and Windows. It is a good balance between user friendly and powerful. Download the app and look at the Atom Flight Manual. If you are interested in other choices Google Text Editors.
Everything starts with an html file, I have a very basic template for you to use. If you find you need some raw content to work with I have a couple text files and a website that gives you a page of lorem ipsum.
These are dictionary style lists of all the html tags and a description. If the explanation doesn't help you use the tag, Google the tag name and look for better explanations.
These are further examples and design concepts for you to work with.
My hypertext example is here.
A brief explanation of writing for context with hypertext
Hypertext article on Wikipedia. This is a gateway to so much information about the thinkers and concepts that led to where we are now that I don't expect you to digest everything.
This is the foundation workshop, so everything we do builds on what we have covered. So make sure you are comfortable with setting up web projects, creating, naming, and organizing files. Work on fleshing out your web poetry so you have material to work with. Spend some time with the Atom Editor until you are comfortable with it. Read the manual on customizing it and add some modules if you want.
If you are still bored or looking to avoid work, then find 3 websites you think are well designed and a reason why.
Bring your pencils to the next workshop!
People tend to confuse art and design, even artists and designers. Art is personal, the agenda is your own. Design is solving a problem usually someone elses.
The steps to designing a website are listed below. We will be stepping through each level in class.
Here are links to the drawing materials we used in class as well as the actual websites where the materials where developed. When doing things by hand on paper I always like to remember the quote by cartoonist
Wally Wood.
"Never draw anything you can copy, never copy anything you can trace, never trace anything you can cut out and paste up."
looking to upgrade your writing/drawing tools Jetpens is a great place to start.
Here is a new template to download it adds stylesheets, grids and images to the mix.
CSS stands for cascading style sheet. This is really how we get websites to look good. There is a lot to absorb so just take it in in pieces.
The box model using dev tools is the best way to see it. Here are the different browsers developer tools pages so you can learn from their tutorials. Pick the browser you prefer, there is no need to learn all of these.
Here are resources for picking web based colors.
We are using the Skeleton css framework because its simple ti use. You may want to look into the 2 most popular systems currently being developed, Foundation, and Bootstrap Bootstrap
Want to learn more about the swiss grid you can start here. Also look for published book at your library.
All the tools to make a site are here. Think about a small project, a resume, a recipe a short story. Explain something, or document something. Then go through the steps of the design process! Come into the next workshop with something for us to publish!
First there was the Internet, and it was good but it needed something to pull the pieces together. Then the World Wide Web was born
The four things you need to publish a website.
Here is my version of how the web works in .pdf format.
Whats a server? It can refer to the program dedicated to serving out information/content or if the hardware its running on is dedicated to the task of just server software we call it a 'server' as well.
There are lots of webservers out there but here are the main ones
File transfer protocol is the main system for moving your files up to publish on a webserver. Here are a couple of good free clients. There are a lit of choices for each platform.
Just a word of caution. Free software is great, but with anything you download and install, be careful and be wary of any dialogs where you are offered choices that are not part of the program you wanted. Filezilla 'offers' to switch you to Yahoo etc.
I've provided links below to the easiest choices and the current favorite for web developers. Also be aware that if you are running a Linux machine then you can use the same software that is used out on the internet. Macintosh users have access to similar software and since at its core macOS is a Unix-like system. You can install the brew package system and have almost the same software as a Linux system. Windows users can go with easy plug in software below or install IIS.
Flexbox is now a css system that is cooked into all modern browsers and should be used! Here are some resources to help.
Just a word of caution. Free software is great, but with anything you download and install, be careful and be wary of any dialogs where you are offered choices that are not part of the program you wanted. Filezilla 'offers' to switch you to Yahoo etc.