WEB AUTHORING / HTML? / Term 4, Week 1

To kick-start the term with, we were introduced to web authoring – what this course entails, and how to create a website starting from knowing the softwares to use, the design workflow and what skills will be needed.

Principles of good design apply equally to any medium, be it print or digital platform. The difference in web authoring comes in the technique, “language” (HTML 5/CSS3, Javascript, etc.) and the design process/workflow. In designing a website, we have to consider the functionality not only on one medium, but to many different gadgets and web browser- all with different screen sizes, preferences and resolution. One thing to take into consideration is “backward compatibility” – how t0 make design the interface / user experience for older versions?

But let’s not get there first.

There are several steps to web design workflow.

  1. Plan – in this step, designer meets the client(s), know what they want, discuss idea about the website. Time and budget will be calculated; unfortunately, because there are several different websites that help web authoring with pre-set templates, clients are getting more reluctant to allocate hefty budgets for designers.  Designer will then plan hw the user will use and view the site – across what platform, gadgets? Basic structure & navigation will be thought of – the sitemap and siteflow, thinking about the user experience. Wireframing – creating rough sketches and refining them to thumbnail sketches of the website display on screen.
  2. Create – Visual mockups will be created after wireframing – note that visual mockups are flatplan of the website done digitally (using Psd/Ai), while wireframing is a handsketch of it. While creating visual mockups (flat design of the website – no navigation functions yet), we will be creating the design elements (which is referred to as “Assets” to the website too. After designer created the visual mockup, starting with a web prototype will be possible – transferring the assets to web designing applications and give them some basic navigation functions
  3. Assemble – Here comes the production work, where individual design elements that were created on Ai/Psd are exported and assembled in Muse/Dreamweaver. This is similar to when working with prints – assembling the design elements and layouting in InDesign. Difference is that we didn’t have to work with coding and all the new lingo.
  4. Proof – The moment of truth! Proofing would mean checking the function and compability; opening the website on browsers and testing it out. Does the website function correctly / as desired? Are there any bugs? Should there be faults, we will need to return to step 2 (Create).
  5. Publish – So you’re one lucky cookie! Publishing means copying all the files from computer to the web server and have the website published.

Helpful sites:

http://screensiz.es/phone

http://codeacademy.com

http://awwwards.com

http://alistapart.com

http://uxmovement.com

http://w3schools.com

To train our coding skill, we are required to complete some of the catalog/lessons on Code Academy throughout the whole term.

Code Academy

Catalog: Make a Website

Exercise 1: A Lesson in HTML

screen-shot-2016-10-18-at-10-06-05-am
Off to a good(?) start!

screen-shot-2016-10-18-at-10-07-37-amscreen-shot-2016-10-18-at-10-07-45-am

screen-shot-2016-10-18-at-10-10-54-am
Changing the text written in between <h1></h1> (Heading element)

screen-shot-2016-10-18-at-10-10-52-am

 

Ollie Bike Sharing website

screen-shot-2016-10-18-at-10-12-26-am
Changing the heading element (h1)
screen-shot-2016-10-18-at-10-13-57-am
Adding another heading element, text written in between <h3></h3>. Notice that the type size is much smaller than <h1>
screen-shot-2016-10-18-at-10-15-16-am
Adding a paragraph / body text to the website with the tag <p></p>
screen-shot-2016-10-18-at-10-15-38-am
Paragraph shown on display
screen-shot-2016-10-18-at-10-18-57-am
Hyperlink source in a text using the tag <a href=”weblink”>word</a>. This is called an “anchor element”.
screen-shot-2016-10-18-at-10-19-00-am
Clicking the link leads to the “Cities” page.
screen-shot-2016-10-18-at-10-20-06-am
Anchor element
screen-shot-2016-10-18-at-10-24-30-am
Sourcing an image on website using <img src=”link”/>
screen-shot-2016-10-18-at-10-25-38-am
Adding a video.

screen-shot-2016-10-18-at-10-27-53-am

screen-shot-2016-10-18-at-10-36-09-am
Adding list using “<ul>”(unordered list). The opening of the list starts/is enclosed by <ul>, followed by <li> which is the title/name of the list. In this case, <ul> is the parent and <li> is the child element.

screen-shot-2016-10-18-at-10-36-48-am

screen-shot-2016-10-18-at-10-38-54-am
Seeing the basic layout to a website before continuing to the <div> tag.

screen-shot-2016-10-18-at-10-39-52-am

screen-shot-2016-10-18-at-10-40-56-am
Back to code academy – div allows us to classify the content of our website, dividing parts of the content into sections.
screen-shot-2016-10-18-at-10-45-45-am
Using Div to create a navigation section on the left.
screen-shot-2016-10-18-at-10-46-44-am
Moving the rest of the content to the right side of navigation bar. AND WE ARE DONE!
screen-shot-2016-10-18-at-10-57-05-am
Quiz result after our short introduction to HTML.

While it is great that we are now familiar to HTML (HyperText Markup Language, yes), that’s not all to it! We need to employ the use of CSS too (or rather, we are employed to use these functions). By using CSS we can style the appearance of our website.

Exercise 2: A Lesson in CSS

screen-shot-2016-10-18-at-11-05-37-am
Linking the html to main.css using <link rel=”stylesheet” type=”text/css” href=”main.css”/>
screen-shot-2016-10-18-at-11-07-17-am
the CSS lingo
screen-shot-2016-10-18-at-11-10-19-am
Changing the font of h1, with the rule that puts Palatino Linotype as its main priority, but any Serifs would be fine should the computer not have Palatino Linotype.
screen-shot-2016-10-18-at-11-12-13-am
Changing the color using word
screen-shot-2016-10-18-at-11-12-47-am
Changing color using HEX values.
screen-shot-2016-10-18-at-11-13-41-am
Changing color using RGB value.

screen-shot-2016-10-18-at-11-17-54-am

screen-shot-2016-10-18-at-11-17-55-am
To give the properties of an element to other elements that follow it without doing it one by one.
screen-shot-2016-10-18-at-11-20-46-am
Changing the type of elements in the class division “hero” to Trebuchet MS.
screen-shot-2016-10-18-at-11-22-17-am
A relative value for font size so we can determine font sizes of different elements in the website not with fixed values, by just one reference point (for example, size of the body text is relative to the title)

screen-shot-2016-10-18-at-11-28-14-amscreen-shot-2016-10-18-at-11-30-52-amscreen-shot-2016-10-18-at-11-33-46-am

(Continued at home)

Make a Website- Styling with CSS

screen-shot-2016-10-19-at-7-18-43-am
Styling- adding border in between the paragraph
screen-shot-2016-10-19-at-7-18-54-am
Styling- adding border on the image
screen-shot-2016-10-19-at-7-19-48-am
Padding on the page description
screen-shot-2016-10-19-at-7-20-34-am
Adding margin to create more spaces between images
screen-shot-2016-10-19-at-7-22-11-am
Adding margin between the image gallery and page description
screen-shot-2016-10-19-at-7-22-19-am
Adding Categories

screen-shot-2016-10-19-at-7-22-30-amscreen-shot-2016-10-19-at-7-23-30-am

screen-shot-2016-10-19-at-7-23-48-am
Styling navigation button
screen-shot-2016-10-19-at-7-24-29-am
Aligning navigation button
screen-shot-2016-10-19-at-7-25-27-am
Creating contact button that has a “pushed down” real life button effect when it is clicked

screen-shot-2016-10-19-at-7-27-49-am

screen-shot-2016-10-19-at-7-28-13-am
Aligning the content, using flex-wrap

screen-shot-2016-10-19-at-7-28-24-amscreen-shot-2016-10-19-at-7-28-28-amscreen-shot-2016-10-19-at-7-29-29-amscreen-shot-2016-10-19-at-7-30-03-am

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s