Project 2 - Create & Code

With the first project completed...now...onto Project 2 'Create&Code'...

For this project we are asked to design, create & launch an online handbook for the WITT Art, Design& Media Department.

This is a MegaMassive &hugely daunting project in my eyes....but I have begun&my mind is exploding with many concepts&designs already....so im excited!

We are asked to track by blog our projects processes&journey as we go along...below are the guidelines for Project2 &again I welcome feedback from you 'readers' as I proceed to tackle this monster!



Guidelines:

• 1x hand coded website constructed w XHTML 1.0 transitional/HTML5 & CSS2.1/CSS3.  Clean, well-commented code is essential.
• Use the tools&techniques taught in class.
• Research your target market&contemporary graphic design.  Use your findings to guide the design of your site.
• Your design must be original&thoughtful, created during the timescale of this project.  Use Illustrator/Photoshop to create your final visual designs.
• ALL images must be optimized for web.
• Carefully consider your web typography - you are expected to work with the text and craft its appearance in relation to the content, not ignore it completely!
• Think about how your audience will navigate&use your site.  Make sure it is intuitive&thoughtfully planned.  Prototype your site before you build.
• You must produce&use the following planning documentation: site map, wire frames, paper prototype. 
• Additional modules of functionality (code only) may be used in your project but this must be done in consultation with your tutor.
• Use the WITT Art, Design&Media Logo.
• Spell-check your work before publishing it.
• Bug-check your site thoroughly before&after launch.
• 2x written reviews of your final site must be obtained from people who are not current students of this class.
• Think about how you will promote&market your site.  Record your thinking&make a plan.
• Your project must be uploaded live online&it is recommended you do this @ least 2days prior to the due date.
• ALL work must be original&created during this class.  The only possible exceptions to this rule is code snippets which your should get clearance to use from your tutor&the content which will provided by your tutor.

Your finished project&blog will be presented to the class in a 5min critique.  There is a possibility that the class will be invited to present their designs to an art staff meeting for selection of the final design.

Due Date 27/11/2013 (Wednesday)

....now....

you see my very initial PANIC @  this monstrosity.

OK

Now to get started....im off to brainstorm!  Watch this space....

Reflection on what I have learned...

OK so apart from the madness&mind jumble over the last 8 weeks I have learned an incredible deal with regards to web history, HTML and social medias, CSS, Interface design& imaging for web.  so...from here I intend to re-read through my blogs, theory notes and continue mucking about with the two web pages  developed in the last few weeks of this WEB MEDIA course in the hope that it all sinks deep, DEEP into my crazy brain ahead of the next faze of this course...the MAJOR project worth a hefty 60% of the final grading....

Thanks to my fellow group of webwantoknowers & down-to-earth, patient and completely understanding tutor Phillipa for being ever so helpful, assisting us to learn these new complex technical skills with clean, clear comprehension thus making a greater&more fulfilling journey rather than a one-off scary never going back there again experience!

Simple menu's & video's

Today was all about building&styling the menu & applying to all the pages as well as embedding a video to the website.  In order to style the menus we were introduced to Listamatic's (list &nested menu's) currently the industry standard way of creating HTML-based menu's.

Click here to view @ css.maxdesign.com.au the simple menu bar we used.

Once added we needed to ensure out HTML <ul> (un-ordered list) uses the same classes/IDs (tags) & apply to the correct location in our HTML.  Using some combination selectors we are able to select specific parts to stylize without having to apply ID tags to everything.

Some of the selectors learnt are....

• Natural HTML elements ( body, div, p etc )

• Universal selector ( * )

• ID selectors ( #cat )

• Class selectors ( .dog )

Combining/nesting selectors is called CSS Specificity & is one of the most confusing aspects of styling.

Here are just a few of the combination selectors used to modify and complete our web page designs...

#menu ul li {
     display: inline;
}
>>This code allows the horizontal arrangement of buttons

#menu ul li a {
     text-decoration: none;
}
>>This code alters the way the text is decorated & in this case removes the bullet points

#menu ul li a {
     text-decoration: none;
     padding: 0.2em 1em;
}
>>This code allows you to target the spacing & sizing of the buttons

#menu ul li a:hover {
     background-colour:#369;
     color:#fff
}
>>This code decides what happens to the color of the buttons (background/text) when the mouse rolls over it

With regards to styling the footer & sub menus, make sure the ID tags are different & write new CSS to style.



VIDEO EMBEDDING
Being relatively easy...to embed videos you need the following...

• the HTML file that you want to embed the video into

• know the size of the video player i.e 600px wide (in pixels)

• access to the video online

To embed a video from YouTube access the  <iframe> code by clicking Share > Embed then setting appropriate options i.e size then simply copy paste the code (see below) direct into the HTML file where you intend to place the video ...remember... you need an active internet connection to achieve this.

Voila!


Well  this was the last topic we needed  to cover through our blog...I feel exhausted!

...naah... 

I am now far more knowledgeable about how the internet & web works especially far more appreciative to all web designers/creators out there & the frustrations they must face when making one tiny typo error in the coding brings a significant headache in the building of an effective& efficient functioning web page!

Image Optimization

Fun! Today I quite liked the process in preparing our website designs from last week for coding & using CSS to style the site (offline).

Firstly we double checked our individual DIV maps which needed to verify our new design was in accordance to the original structure of the website Phillipa provided us.  From there we went on to prepare a new file/folder structure (this should be done for each website you design/build). Once the project folder has been created you then add folders for BUILD, images & CSS into it...remembering...only files that are actually elements of the website should go into your BUILD folder as this is the folder that is uploaded & should not contain PSD, AI or Doc files.

Here is the EVOKE website design template Phillipa originally provided us to enable us to build using the same HTML base structure.

Next...
copying the index.html file from last week - where we took the EVOKE design & coded it up - we paste into the NEW build folder we just created & open using Adobe Dreamweaver.

...the point?

• To check all menus - incl the footer & replaced where necessary to match our new web site design

• Update all text content as it differs from original template design - copy Illustrator design file & copy paste out the text

Now its time to re-write the CSS & link both the HTML&CSS files together &style our new design by centering the page, adjusting widths &heights according to the measurements you can extract from the Illustrator file, replacing the old images with new ones &finally restyling the text where required.

Once the HOME page was all coded &styled we then proceeded to carry out the same process for the about page by firstly copying the same index.html file& renaming about.html ...remembering... the file name can be anything as long as the following rules are adhered to -

• it must start with a lowercase letter

• no numerals if possible

• only punctuation that be used is a hyphen ( - )

• no spaces

Linking back to the same CSS file as before we are now able to go ahead and style up the about page to match the new website design.

Here is what the CSS&HTML structures look like.

...CRAZYeh!!!!