Jonathan Zittrain: The Web as random acts of kindness

Feeling like the world is becoming less friendly? Social theorist Jonathan Zittrain begs to difffer. The Internet, he suggests, is made up of millions of disinterested acts of kindness, curiosity and trust.

Tim Berners-Lee: The next Web of open, linked data

20 years ago, Tim Berners-Lee invented the World Wide Web. For his next project, he's building a web for open, linked data that could do for numbers what the Web did for words, pictures, video: unlock our data and reframe the way we use it together.

The Web Metaphor

I AM...

• Inter-connectivity

• Inter-dependency

• Inter-relationship

Think about this!

How will it influence your design experience?

Strengths Questionnaire

Let's begin...

re: the process
1. Click the REGISTER button located at the bottom left corner of the web page www.authentichappiness.sas.upenn.edu/
2. Fill out the registration form.
3. Record your Username and Password.
4. Select VIA Signature Strengths Questionnaire, under the heading Engagement Questionnaires: Measures 24 Character Strengths. It will take about 20 minutes to fill out the questionnaire.
5. Save a copy of the top five strengths, for use in your web site.

Kevin Kelly: Predicting the next 5,000 days of the web

The World Wide Web, as we know it, is only 5,000 days old. Now, Kelly asks, how can we predict what's coming in the next 5,000 days?

2010.01

Welcome to Web Design 1: Web Design Fundamentals.

re: the blog
This blog will include weekly links to resources that may be useful to you in your explorations of web design.

re: the course
This is an introductory level, fourteen week course. It is designed to provide the participant with the basic tools and principles for designing a web site.

re: the process
Each week we will explore different aspects of page and site design. You are encouraged to view the HOW TO video links and participate in weekly exercises. Practice, practice, practice.

© 2010 thedigitalprofessor

Week #14: Peer Evaluations & Phase 5

I. FTP all files to your web site.

II. Test all hyperlinks.

III. Phase 5 Requirements:
1. Create three domain names and search the internet and fine one that is available.
Search your names using one of the following URLS:
http://www.internic.net/whois.html
http://www.whois.net/

IV. Peer Evaluations:
Review at least 10 sites and make a redesign recommendation.

V. Google Registration:
When you register a domain name and build a Web site you can add the URL to a search engine like Google.
http://www.google.com/addurl/

MAKE CHANGES FOR NEXT WEEK
Pick a few of your received peer evaluations and redesign your site accordingly.

WHAT'S DUE NEXT WEEK:
I. Final Web site uploaded to the web account
II. DVD-R or CD-R with the web site and a folder containing all production files ( .psd, .fla, .mov, .ai, .wav, .mp3, .pdf, etc...)
III. Presentation of Web site
IV. Design Rationale explaining the design decisions (typography, colours, shapes, animations, metaphor, spacing, economy, repetition, balance, focal point,unity)
V. All 5 Phases (pdf) documents on DVD/CD.

Week #13: Web Page Form Design

Examples of form designs:
http://www.tumblr.com/register
Tumblr uses big form fields and a nice clean appearance.
http://www.newspond.com/register/
News Pond gets users to focus on their sign-up form with the use of a background glow.
http://graphik.fi/contact/
Graphik uses a big friendly header on their contact form.
_______________________________________________________

Web forms don’t have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions.
• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

• http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/

• http://www.alistapart.com/articles/prettyaccessibleforms

• http://designshack.co.uk/tutorials/10-css-form-examples

• http://www.1stwebdesigner.com/inspiration/77-inspiring-blog-comment-form-designs-good-examples/

Week #12: Pop Up Windows

This week we will design a web page that hyperlinks to a series of html files holding: a picture, a QT video, and an mp3 audio file. A new browser window will open when each hyperlink is clicked.




STEP #1: Create the resources and resource html files
Be sure to wrap each page:
relative
100%
100%
text-align: center
margins: 0, auto, 0, auto
-------------------

• PICTURE.html

• VIDEO.html
Insert > Plugin
Set the width and height properties for the video to 480 x 336 ( 320 + 16)
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the video from playing automatically on opening the browser window.

• AUDIO.html
TIP: Use GarageBand to create an audio file for use in this exercise.

Insert > Plugin
Set the width and height properties for the audio to 300 x 16
Modify > Page Properties, set margins to 0,0,0,0
In the HTML you can set autostart="false" to stop the audio from playing automatically on opening the browser window.

------------------------------------
In DREAMWEAVER
1. When hyperlinking each item, be sure to add a # in the link field of the Properties for each hyperlink
2. Assign a behavior: Open Browser Window
URL to display: picture.html
Width: 200
height: 200
Name: picture
OK


CODE changes
Change to default script to now read the following:
function MM_openBrWindow(theURL,winName,features) { //v2.0
what = window.open(theURL,winName,features);
}
function MM_closeBrWindow() { //v2.0
what.window.close();
}

Also add the script to the close link:
a href="#" onClick="MM_closeBrWindow()">Close Window

Week #11: Frameset

Basic terminology:
A frameset is a container for frames.
A frame is a container for an html page.

Why Framesets?
This allows content to flow through a web site, while certain areas or frames remain on the screen all the time, other areas are dynamic.
Typically a three-frame-frameset would hold the following content 1) the top frame HEADER or Flash Banner, 2) the side frame nav bar, and 3) the mainFrame content area. When an item is clicked on the nav bar, the content would be played in the content area of the page.

Our basic example has two frames in the Frameset.
• The Frameset file will be saved as myFrameset.html.
• The topFrame (topFrame.html) will hold the Menu and the hyperlinks
• Page1.html, Page2.html, and Page3.html will play in the mainFrame (bottomFrame.html).

Here's an example of what we will do this week:


Part 1 HOW TO:


Part 2 HOW TO:

Week #10: Drop Down Menu

This week we will use the SPRY DROP DOWN MENU option and create a horizontal drop down menu.

Week #9: Exercise

Create three animations
1) Photoshop : using frames
2) Photoshop : using the timeline
3) Flash: using Actionscript 2.0, with a hyperlink to the menu.html

Week #9: Create a SWF Animation Using Flash

In this example, Flash is used to create an animation with a hyperlink to menu.html

Script for hyperlinking a button to a URL

FLASH, Actionscript 2.0

on (release) {
getURL("menu.html", "blank");
}

CS4-Photoshop: Animated Gif Example

This animated gif file is created in CS4-Photoshop using the Animation Timeline.

Layer opacity and style is animated over 10 seconds.

The file was then exported from Photoshop as a Quicktime video.



Animation:
Window > Animation

1) Click the stopwatch beside the property to insert an initial keyframe.

2) Move the CTI ( Current Time Indicator) to a new time in the timeline and adjust the property settings.
A new keyframe is automatically created at that place in time.

NOTE: You will need at least two keyframes to create an animation.

When you are finished designing your animation, Save for Web
1) Choose GIF
NOTE: Press the play button to play your animation.
2) Save as HTML & images
Photoshop now renders out the animation and the HTML and gif files.

The Promise of Music is to love and to serve.

The power of the web to animate the universal love in all of us.

Just another weekend in the City

MID-TERM EXAM

Be advised that you are permitted to have written notes in the mid-term exam.

Week #6: REVIEW EXAM EXERCISE

This exercise will help you prepare for the MID-TERM EXAM next week, where you will have to build a web site.

This week, the challenge is to create a web site in 50 minutes.

Here is what you will build and post to your site this week:

1) The Root folder will have a folder inside named "ReviewExam".

2) The "ReviewExam" folder will hold the following:
• index.html
• ReviewMenu.html
• trivia1.html
• trivia2.html
• contact.html
images folder ( holding all the slices and pictures)

3) index.html will be the site "splash" page. It will have a link to the ReviewMenu.html and a © message.

4) ReviewMenu.html will be a menu created in Photoshop with UP and OVER (slices) states for the following four menu items: trivia 1, trivia 2, contact, main menu. The "main menu" hyperlink will link to the menu.html page for the course. Name all menu slices, and the header slice. Save the .psd file in the images folder.

5) trivia1.html will contain a picture of an artist/songwriter and a line of text trivia about them. Use an apDiv to hold the picture and text. Have a Hyperlink back to the ReviewMenu.html. Use a class to format the text.

6) trivia2.html will contain a picture of an artist/songwriter and a line of text trivia about them. Use an apDiv to hold the picture and text. Have a Hyperlink back to the ReviewMenu.html.

7) contact.html will contain your name and email link to your address. Also place a picture of yourself at 1000 pixels from the top, with an anchor. Have a hyperlink to the anchor. The picture will also be a hyperlink back to the top of the page. Have a Hyperlink back to the ReviewMenu.html.

IMPORTANT PAGES NOTE:
• ALL pages must contain a wrapper set to 760 width.
• Upload all the files to the Site and hyperlink Week#6 on the menu to the index.html inside the "ReviewExam" folder
• Each page will have a background colour or gradient fill or image (repeat)
• Each page will have a HEADER and a CSS class to format the page header
• Each page will have the © character

UPLOAD:

TIPS:
In Dreamweaver, Use "Save As" when appropriate

REMEMBER YOU HAVE 50 MINUTES TO COMPLETE THE REVIEW EXAM.
HAVE FUN and GOOD LUCK!!!!

HOW TO: Table, Ext. CSS, class...

no audio on this one...

Here's what's included:
• change background color
• add two rows to the table
• add text to a row
• create an external CSS file
• create and define a CSS "class"
• apply a CSS "class" to selected text
• create a content image in Photoshop and save for web
• change a SRC image in Dreamweaver
• Hyperlink menu items to html pages
• use "Save as" to create multiple files