Event Project New Schedule

T Oct 29——Work in class
Th Oct 31—User testing and critique (3 or 4 sections)
T Nov 5—Work in class
Th Nov 7—Event Website final presentation

You are expected to have their fully functioning website uploaded to their server and accessible via web browser. Reply to my group email with your URL. The website needs to be put on digital mock ups and submit on TCUOnline. Please include title, description, web fonts, colors and other graphic elements.

Please continue working on your Journal site.

Intro to Responsive Design and Jquery

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Viewport

Viewport—When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.

Insert the following in head section:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Media Queries

Media Queries can be used to ensure that your site will work correctly regardless of the user’s screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, iPad, cell phone etc.

See Media Queries sample here.

Sample Breakpoint

@media screen and (max-width:980px)

@media screen and (max-width:768px)

@media screen and (max-width:480px)

DEMO

Learn more about Responsive Web Design (reading assignment)


  1. Lecture on Java & Jquery
  2. http://responsiveslides.com/
  3. http://stackoverflow.com/

Reading Assignment

  • Reading Assignment: Chapter 16, 17, 18, 19; CSS Quiz next class
  • W3S CSS outline —CSS float

CSS continued

  • DEMO continued
  • Meet individually—be prepared to discuss your creative brief and inspirational sites if time allows.

A name Attribute


Assignments

  • Reading Assignment: Chapter10, 11, 12, 13, 15
    W3S CSS HOME —CSS box model
  • Start on your thumbnails and layout in Sketch, have them ready for next consultation
  • Behance web design

Additional Reading

Introducing HTML

  1. Html Lecture
  2. Demo: Root folder and file management/Dreamweaver interface/index.html/insert image, heading, paragraph and list
  3. Project Assignment: Event Website

DEMO footage

…………………………………………

Reading Assignment, HTML Quiz
  1. Reading assignments, Textbook chapter 1-3
  2. Assignment: HTML HOME—HTML PARAGRAPH  http://www.w3schools.com/html/default.asp

Additional Readings:

history of the web: http://www.w3.org/People/Raggett/book4/ch02.html

More about HTML5: Dive into HTML5: http://diveintohtml5.info/

Here’s the direct history link: http://diveintohtml5.org/past.html#timeline

App Website Presentation

Thursday 10/03—Digital Due on TCUOnline, App Website Presentation
  • Two-page pdf, titled “Your Name_app name.pdf”
  • Page one (landscape)— app icon & name, tagline, four app screens and short description for each screen
  • Page two(vertical)—app website, high res
Tuesday 10/08—Poster submission
  • Print and flush mount your app website, poster width 12-15 inch, high res
Thursday 10/09—Journal Website due for mid-term
  • minimum 25 entries total