2x designs...hhmmm....which do I choose & further develop?

Right...I have been busy putting some ideas &concepts down on the parchment! Now, I have two designs which I both really like, which are both really different & of which I have to finally choose one of the two to continue develop& further my design ideas with...aarrrgghhh & yyaaaayyy!! 


The TypoGRAPHY design...

The BackgroundPHOTO List design...

I still have a ton more work to carry on with ie editing content, images, artwork, but am happy to have achieved these designs so far...

...so...to reduce my work load I need to make a decision& choose ONE to continue developing...

...penny for your thoughts?

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!!!!

Interface Design

Anything was always going to better then the way I felt walking out the doors of last weeks teachings in CSS that's for real....so when today we began re-designing the same site as last week with  the base remaining the same in its HTML structure only introducing a new business/purpose of our own individuals choosing...I felt relieved and excited and set about creating the Jaycee Lauren Jewelry Home & About pages!!!

But firstly... the low down with an intro into the visual design process when it comes to building a web page was theorized.

...Research...establishing the purpose, target market & demographics of the web page & its functionality.  This includes researching the competitors within the sector your setting about creating a website within also.

...Brainstorm...collating ideas & gathering inspirations to assist you in the direction you intend to  follow.

...Concept sketching...quickly & efficiently sketching out thumbnails for the visual design on paper is hugely important.

...Developments...from your concepts in the previous step, analyse & make decisions on which designs you want to continue developing, opting to carry through 2 or 3 designs to move forward with and further in their design, adding finer details, colors, images & type experimentation's.  This is best achieved for some by taking it into a software program, such as Adobe illustrator to mock up the developments.

...Web process...with websites involving large volumes of content it is imperative to organize this material which may include text, images, video, multiple pages etc...so in order to achieve an effective design you must consider organisation such content into one of a variety of techniques being...

• card-sort - is a way to organize content based on hierarchy
• wire frames - also know as a page schematic or screen blueprint being a visual guide that represents the skeletal framework of the website allows you to foresee potential problems before you get down to the nitty-gritty of the designing
• paper-prototypes - this free form of quickly and collaboratively sketching out the architecture of the website is incredible for expressiveness and nothing is faster for capturing ideas
• clickable prototypes - with quick creation these can allow users to test actual functionality while still allowing conversations between the user and the design sometimes proving easier to understand than cumbersome design documentation

...Working with the client...generating variations of the homepage for the website is generally one of the first steps allowing the client input and feedback.  It is IMPORTANT the person who 'owns' the website feels it belongs to them, they have 'buy-in' to it, they understand it and want to essentially promote it.

...Template designs...overall websites can be small or very large.  To design in an efficient manner that doesn't waste time or money also enabling an effective, consistent & reasonably standardized format a good option is to use template-design on the 'key' pages ie: homepage, landing & gallery pages etc...one page that represents each 'level' of page that exists on the website.

<<Home Page>>

 [  DESIGN PRINCIPLES  ] 

..Dominance

..Directional lines

..Contrast

..Consistency

..Repetition

<<About Page>>

so... here, to the right are my JayceeLaurenJewellery home&about pages designed in Adobe Illustrator during today's class....which we will look into building offline next week in Adobe's Dreamweaver... ...coding and styling up the design, CHOICE!

CSS & HTML links

Oh my dear!! Today's class was excessively overload in my brain...as today we laid out our little knowledge on CSS and later dove straight into the build of a single page website.

HTML/CSS CODE!!

....though an excellent skill to acquire alongside the fact that I do enjoy a challenge....sitting through today's teaching which included marking up the EVOKE websites homepage design,  I started to panic that its all too much info...with all the little tags, brackets, colons, hash's, 1, 2, 3+ letter codes flipping and flapping bouncing manically through my exercised brain,  compounding atop one another....pressing together and all about to become a big BLAH mess in my head!

...NOTE2SELF.... 

Breathe deep & keep calm!!!

...because YES this all NEW to me, YES this is important to my future CAREER & NO, the code will not BEAT me!


CSS Intro
Cascading Style Sheets (CSS) are the most recommended way to control the presentation layers in a web document and are comprised from two very basic components, labeling & identifying (selector) the content/element you intend to style and writing rules to define that style (declaration; look, position & attributes).

Basic Syntax & CSS Structure

                                 selector                                          declaration                                declaration

                 h1            {color:aqua; font-size:18px;} 

                                                                    property          value                   property                 value

Markup Structure & Twitter Feeding

Delving deeper we began today's session looking at HTML structure using the Markup Language which basically all the tags wrapped around page content which enable the webpage to 'become'.  The two major parts comprising a webpage are...

<head> - documents declaration telling the browser they type of HTML in use ensuring the code is rendered correctly.

<body> - page content/information

Tags divide the webpages into chunks - assisting in breaking down the various content & elements of the website.  They are able to be nested inside one another though it is important to remember to CLOSE your tags in reverse order...

ie <body><p><strong>just like this</strong></p></body>

Following on from last weeks blog, below are more tags which we are familiarizing ourselves with in order to build up our own webpage!

<img></img> - display an image
<title></title> - name of the page
<meta> - display of page
<br /> - break tag
<div></div> - divides parts of webpage structure into chunks
<span></span> - identify & individualise sections of text
<ul></ul> - un-ordered list
<ol></ol> - ordered list
<li></li> - list tag

Another little tip/tag demonstrated today was the 'comment' tag....

<!-- this is the comments tag.  Everything inside this tag is HTML file reference ONLY and will NOT be rendered by the browser -->

...though not your typical code, this comment tag allows you to make notes on your HTML file allowing for clearer understanding of whats being processed because lets face it, the code, code, code crunching, is a little visually mundane!

Below is a couple of neat ASCII Artworx created by graphic/web designers with techniques that use computers for presentation and consists of pictures pieced together from 95 (printable) out of 128 characters defined by the ASCII Standard....making viewing HTML source files a little more pleasing to the minds eye...

File BB-ASCII-art-screenshot-zebra.png - Wikimedia Commonscommons wikimedia.org - 639 x 416

ASCII Mona Lisa by mikenu on deviantART 
mikenu.deviant.com - 748 x 1069

...& that is me for today....

...a great point to reference the HTML tags is at...

htmldog.com

...go check it out!

Web works w HTML & Social Media Intros

Well I knew some basics before today's class on how the Web works with intros into HTML & Social Medias....I knew about servers, modems & internet connections...HA...though what I wasn't aware quite naively of is the meganormous submarine communication cables that connect the globe fiber optically, transporting the ever overwhelming digital hierarchy technology we are these days surrounded by.  In New Zealand...we are connected to the rest of the world through what is commonly known as the 'Southern Cross Cable'.  Well, there I was thinking that our virtual world was beamed through space satellite, gridding the world, probing & fueling our crazy technical existence, & turns out I was clearly off path.  Following on we were given insight into how websites are just enormous collections of files and the Internet is a collection of many many smaller networks built in different ways that interconnect giving Internet its name.

How the Internet Works in 5mins 

Brief visual explaining the how the Internet is no fluffy cloud in the sky.

HTML Intro
So basically HTML (Hyper Text Markup Language) is a modern code system where terminology is typically omitted from the version of the text which is displayed for the end-users consumption.  The idea behind HTML is to take a piece of text and mark-it-up by wrapping it in tags.  HTML as a language is composed of these basic parts:

Each tag wraps around a portion of the text, and also describes the portion of text it’s wrapping around.

<the opening tag> the content </the closing tag>

The opening tag is formatted like this   <p>

And the closing tag is formatted like this </p>
note the forward slash which indicates this tag is a closing tag.

Here HTML tags can be used to markup this piece of text:

<p>Stirring grey thunder over the rolling fields.  The storm is near.</p>

Some commonly used tags...

• <h1> </h1> Header
• <h2> </h2> Header
• <h3> </h3> Header
• <p> </p> Paragraph
• <strong> </strong> Strong tag - gives BOLD effect
• <em> </em> Emphasis tag - gives italic effect
• <a> </a> Anchor tag - creating a link to websites 

 ie <p><a href="https://www.facebook.com/jaycee80">This is a link to my Facebook Page</a></p>

This world is oh so very confusing...well it would be a hole lot more so if we actually had to code in 9 digit numbers such as 210.54.8.253 (aka IP address) every time we wanted to visit a website....THANK GOODNESS computers are very clever and are able to transfer language they communicate with into something more palpable like www.witt.ac.nz (URL = http://www.witt.ac.nz) instead for us simple humans to be able to remember! 

Social Media Intro

Concluding the class we joined/re-activated our individual Twitter accounts to link back to our Blog sites as part of the project brief.  Click here to access my Twitter feed page...also found back on my home page

Top Blogs

roomie



designObserver

minty



nomadicMatt


smashingMagazine

fancy

typographica

kiwiMummyBlogs

destinationNZ

designrFIX

entyce

History of the Web

OK, so undertaking the first day in Web Media1 this semester, myself & fellow web 'want to knowers' were given insight into the history of the web.  Being a self confessed virtual retard,  my knowledge of the internet extended to knowing very little other than enjoying the convenience of electronic mail, social medias ie Facebook and my favorite, online shopping!

Within the first class we were introduced to a small snip-it of The Virtual Revolution documentary where Dr Aleks Krotoski presents a 3hr & 56min provocative and strongly authored argument charting two decades of profound change since the invention of the World Wide Web, weighing up the huge benefits & the unforeseen downsides which are reshaping almost every aspect of our lives.  She explores the founding father of the web we know today, Tim Berners-Lee & is joined by some of the digital revolutions key innovators as they speak of this technology & the power it holds.

It is a great educational documentary and recommend you check it out (see link below) as it opens your eyes to  the technology I, personally, have taken for granted more & more over the last few years as it becomes the most immediate technical tool in which I am able to, with complete freedom, acquire extensive knowledge to learn with, to problem solve alongside & to profit from!

Perhaps you could say the Web & Internet all evolved from the idea 'The Mundaneum', founded by Paul Otlet (who outlined a globally connected network of computers in 1934) & Henri La Fontaine in 1910 which aimed to "gather together all the world's knowledge & classify it according to a system the developed called the Universal Decimal Classification" though development of electronic computers in the 1950s is when the history of the internet really kicked off with the first concepts introduced to the public leading to the Internet were sent over the ARPANet (Advanced Research Projects Agency Network) by Computer science Professor Leonard Kleinrocks at UCLA.  

From there development of packet switched networks such as ARPANet, Mark I, CYCLADES, Merit Network, Tymnet & Telenet throughout the late 1960s to early 1970s. Development of multiple seperate networks which could be joined together into other networks dubbed 'internetworking' was primarily associated with the ARPANet. 

The Internet Protocol suite (TCP/IP) was standardized & the concept of a world-wide network of interconnected networks, called the Internet, was introduced in 1982.  Commercial Internet Service Providers (ISPs) began emerging in the late 1980s to early 1990s with the ARPANet being decommissioned in 1990.  Commercialization of the Internet became in 1995 when NSFNet was decommissioned, resulting in the removal of the last restrictions on the use of the Internet enabling commercial traffic to be carried.

The Internet has had a revolutionary impact on culture and commerce since the mid-1990s, incl the rise of near-instant communication by email, instant messaging and Voice over Internet Protocol (VoIP - phone calls), video calling & the World Wide Web with its discussion forums, blogs, social networking & those fantabulous online shopping sites!

Taking over the global communication landscape the Internet was almost instant in historical terms; it only communicated 1% of the information flowing through 2-way telecommunication networks in 1993, already 51% by 2000 and more than 97% of the telecommunicated information by 2007!

Today the Internet continues to grow, driven by greater amounts of online information, commerce, entertainment & social networking.


Alright now, so being the curious cat that I am, to me @ the mino Social Media is one of most interest within the virtual realm, hence why I thought I'd include this timeline of  the introduction of Popular Internet Services to my blog.... :-)

• 1990 – IMDb Internet movie database
• 1995 – Amazon.com online retailer
• 1995 – eBay online auction and shopping
• 1995 – Craigslist classified advertisements
• 1996 – Hotmail free web-based e-mail
• 1997 – Babel Fish automatic translation
• 1998 – Google Search
• 1998 – Yahoo! Clubs (now Yahoo! Groups)
• 1998 – PayPal Internet payment system
• 1999 – Napster peer-to-peer file sharing
• 2001 – BitTorrent peer-to-peer file sharing
• 2001 – Wikipedia, the free encyclopedia
• 2003 – LinkedIn business networking
• 2003 – Myspace social networking site
• 2003 – Skype Internet voice calls
• 2003 – iTunes Store
• 2003 – 4Chan Anonymous image-based bulletin board
• 2004 – Facebook social networking site
• 2004 – Podcast media file series
• 2004 – Flickr image hosting
• 2005 – YouTube video sharing
• 2005 – Google Earth virtual globe
• 2006 – Twitter microblogging
• 2007 – WikiLeaks anonymous news and information leaks
• 2007 – Google Street View
• 2008 – Amazon Elastic Compute Cloud (EC2)
• 2008 – Dropbox cloud-based file hosting
• 2009 – Bing search engine
• 2011 – Google+ social networking

...& that's me on the History of the Web... ...now, go and check out The Virtual Revolution!