Project 4

those who wish to sing cc-by lemasney
those who wish to sing cc-by lemasney

Introduction

In project 4, you will be developing a web presence. You will develop an online identity using whatever tools you wish to create and publish the site. The site can be a part of a service, social media platform, etc. It must be a working, world accessible site, such as WordPress, but can be Twitter, Pinterest, Instagram, Facebook, Wix, Weebly, SquareSpace, etc.

Details

The effort for the project should be new, starting as of April 18th, and gathered around the main topic, such as a portfolio, etc. rather than reconstituted from some other project outside of class. The site should have at least 20 destinations (nodes, posts, pages, etc.) of original content from after April 18th. On our last day (May 9th), you will answer some variant of the following questions while demonstrating your site content for the class.

  1. What did you use to develop your site? How does the navigation work?
  2. How was it different/similar from other tools we used in the class? How do you make changes?
  3. What customization methods did you use? Was there a way to edit CSS or HTML?
  4. How does this reflect you (or not)? What imagery, design, palette, texture, and photographic choices did you make?
  5. Is there a use for this in your future?

Remaining timeline:

April 18th: Project 3 final review, Project 4 Introduced.

April 25th:Project 4 topic confirmed and first efforts reviewed.

May 2nd: Progress reviewed. Presentation demonstration.

May 9th: Final presentations

Weeks 7-8

She feels in italics

Updates:

  • Week 7 is 3/7 and 3/9.
  • Week 8 is Spring Break (3/14-3/16).

Reminders:

  1. We are not meeting on Monday March 7th (today).
  2. We are meeting on Wednesday March 9th.You should have made significant progress (e.g.50%) on Codecademy and your 6 page site by then.
  3. We are not meeting during Spring Break (3/14-3/16).
  4. Project 2 is due to be presented on 3/21.

Lecture:

Presentation: Developing your personal brand (lemasney).

Assignments:

  1. If you are lost, confused, or otherwise troubled, contact me by phone at 609 553 9498.
  2. Finish Codecademy course on HTML and CSS by 3/21.
  3. Finish Project 2, a 6 page web site on a topic of your choice, and be prepared to present it upon our return on 3/21.

Addenda:

An additional note on my lecture about the principles of design:

6 Principles of Design

Week 6 (2/24, 2/29, 3/2)

spoon feeding in the long run - EM Forster cc-by lemasney

Agenda for Week 6

Review

What is the attendance/grading policy for this class?

  • Let’s look at the Syllabus.
  • Originally: 4 absences is an automatic withdrawal. Several of you would be withdrawn.
  • There is no difference between an excused absence and an absence. Sickness, etc. is absence. Be here.
  • Presence and participation is 20% of your grade. Having the work in on time and being able to defend it on the presentation day is key.
  • As always: Each project/presentation is also 20% of your grade.

Tell me about your progress in Dreamweaver demos by explaining something (anything) you learned there.

Show me your progress in Codecademy.

Show me your USB keys.

Tell me what your site is going to be about.

Demo

Using the CSS Zen Garden files in Dreamweaver

http://www.csszengarden.com/

Resources

Continue to use Adobe’s Dreamweaver tutorials.

https://helpx.adobe.com/dreamweaver/tutorials.html

Code

Continue your effort towards finishing the Codecademy course on HTML and CSS

http://codecademy.com

The Only Zen You Find - Robert Persig cc-by lemasney

Week 5 (2/17-2/22)

Agenda for Week 5

Project 1 wrap up: Site reviews and student presentations

Review

Introduction to Project 2: Develop a 6 page site in HTML and CSS using Dreamweaver that demonstrates your understanding of color, typography, photography, style, or other creative topics. Navigation, layout, style, and creativity will all be considered in your grade. Use Photoshop heavily in this and future projects. (Project 2 is 20% of your grade)

Demo

I show you how in Dreamweaver:

  • Creating a site,
  • making pages,
  • links, etc.

Resources:

Dreamweaver tutorials on Adobe. https://helpx.adobe.com/dreamweaver/tutorials.html

CSS Zen Garden http://www.csszengarden.com/

Code:

Create an account and begin completing HTML and CSS in Codecademy: http://codecademy.com

WEEK 4 (2/10-2/15)

Lecture:

  • Review of HTML site so far and CSS so far.
  • How do you save, open and edit someone else’s site?
  • How do you use the element inspector in Chrome?
  • How do you link a CSS file? How do you add images? How do you position DIVs?

Demo:

  • Let’s develop the entire solution for everything so far.
  • Editing and testing your Website

Resources:

Preparing images for the web in Photoshop

Inserting an image into HTML

Color codes for major brands:

http://brandcolors.net/

Color palettes from Google

“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” found in Color – Style – Google design guidelines at https://goo.gl/U8pRbP

How to critique:

Code:

HTML elements CSS selectors CSS properties
  • <img>(alt and src attributes)
  • img
  • vertical-align

Review:

  • FTP basics
  • Working with images
  • Working with Wireframes

Due Next Week (2/17):

Discussion Question:

4: BACKGROUND & CONTENT IMAGERY

Pick a website that has a compelling design and identify the message or personality that is communicated by the website. Describe one of the background images used in the website (it can be the background of a div or the body). Discuss how the texture, scale and pattern of the background contribute to the message. Describe one of the content images used in the website. Do the content images and background images play different roles in the website you chose? Explain your answer. (Please include a link.)

Project 1:

Personal Website (Historical Figure) (20% of your grade)

For this project you will pick a historical figure who died before 1923. You will create a webpage in the style of wikipedia for that figure that conveys who that person was through the text and through the design. You will use the text from wikipedia and create your own images in Photoshop or from public domain images. The only requirements are that you can only use one representational image of the person, the rest of the images must be non-representational.

Project 1 Rubric

how to become an explorer of the world cc-by lemasney

WEEK 2 (1/27-2/1)

Looking back:

  • A look back at Week one.
  • A review of Google Drive
  • Sharing Drive folders/files to public versus sharing to me
  • Revisions in the syllabus and site are ongoing.

Lecture:

Read the following article in the next few minutes.

“This whitepaper explains the underlying infrastructure and technologies that make the Internet work. It does not go into great depth, but covers enough of each area to give a basic understanding of the concepts involved. For any unanswered questions, a list of resources is provided at the end of the paper.” found in How Does the Internet Work? at https://goo.gl/2P1aXj

Reading review:

  • What is an IP address?
  • What is the Domain Name Service (DNS)?
  • What is HTTP?

Questions to ponder, then be able to answer clearly, this week:

  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Demo:

File Directory and structure:

  • Domain Structure versus Server File Structure
  • The HTTP and FTP servers
  • The home directory on the server
  • The public directory for html
  • your files and folders

File structure rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

Important basics of web development:

Resources:

Introduction to HTML (w3 schools)

Inserting HTML Elements (w3 schools)

CSS Basics (w3 schools)

Adding CSS Rules (w3 schools)

Code:

HTML elements
  • <!DOCTYPE>
  • <html>, <head>, <body>, <title>
  • <p>
  • <h1>, <h2>,
  • <hr>
  • <!– –>
  • <br>
  • <a>

 

HTML elements CSS selectors CSS properties
  • <link>
  • body
  • h1, h2, h3
  • p
  • a
  • a:link
  • a:visited
  • a:hover
  • a:active
  • grouped selector
  • hr
  • background-color
  • color
  • hex & rgba(255,0,0,0.3)
  • font-family
  • font-style
  • font-weight
  • font-size
  • text-transform
  • text-align
  • text-indent
  • text-decoration
  • border
  • height

 

Review:

  • CSS tutorials
  • HTML tutorials
  • Coding tools

Questions to be able to answer:

  • What is HTTP?
  • What is FTP and SFTP?
  • What is HTML?
  • What is CSS?
  • What is source code?
  • How do I see the source code?
  • How can I play with the CSS?
  • What is a server?
  • What is a client?

Due Next Week (2/3):

Remember to share a single Google Drive folder with me with the name “DMA145 – lastname” where lastname is your actual last name, e.g. DMA145 – lemasney. In it, place four folders, project1,project2,project3, and project4.

In each of those, put your weekly assignments. weeks 1 through 4 in project 1, and so on. Put your answers in the project folder we are working on, named sensibly: Drive/DMA145lemasney/project1/question 1 on color.doc or something like it. When you put anything inside the DMA folder, anywhere in it, even subfolders, I’ll have access to see it.

Discussion Question:

2: HTML ELEMENTS

Look at the source code for the website you picked last week. List the HTML elements that are used in the homepage of the website you picked. How does the code of a website that is online differ from the code you created this week? How is it the same? Is there anything that surprises you about the way that the code is written? Support your answer. (Please include a link.)

How to view source code tutorial (Wikihow)

Weekly Assignment:

Basic HTML

Create a basic HTML page for your historical figure. You can copy and paste information from their wikipedia page.

Content Requirements: (minimum)

  • 1 headline (H1-H6)
  • 1 sidebar (DIV container)
  • 3 paragraphs
  • All names of people linked to their wikipedia pages

Technical Requirements (use elements from Code section of agenda)