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!