• View Project Guidelines

Please submit the url of your final project no later than 3:30pm (May 7, 2013). I enjoyed having you this semester. If you have not completed the course evaluation please do so. Enjoy your Summer.

• Final Due May 7, 2014. The project should be submitted no later than 3:30pm – Final Project Guidelines
• Final Q & A
• Next Steps
  • IFSC 3300 (Sample Syllabus)
  • Mobile Web Development (Spring 2015)
• Course Evaluations

Assignment

Find a jQuery tutorial/technique  on the web. When evaluating the script make sure that the page is still usable without Javascript enabled. You should pick something that can be integrated into your current site to meet the above mastery requirement. Submit the URL to me via email of the working script. Due Wednesday.

Some examples to get you started…

• Lightbox Effects
  • Fancybox
  • Colorbox
  • Lightbox
• Smooth Scrolling
  • jQuery Smooth Scroll
• Carousels and Sliders
• Theme Switcher

• Walkthrough with Source Files

Assignment

Upload a working version of today’s in class example to your web space and send me the url. Make sure to do some customization so you get the opportunity to play with editing the calls to jQuery. Please send me the working URL before class on Monday.

• Review Homework
• What is a CDN?
• Why use a CDN?
  • Google CDN, CDNJS
• jQuery Tabs Case Study
• jQuery Cycle Demo
• Review Grades

Assignment

Begin looking for ways you can implement jQuery into your final project. Identify what is it you’d like to do (image gallery, carousel, lazy load etc.) and begin researching what it takes to get it implemented. Your assignment for the weekend will be to get something working you can submit to me next Wednesday.

Resources 1 | 2 | 3

• How jQuery Works
• Exploring the functionality of jQuery
• What is a CDN?
• Why use a CDN?
  • Google CDN, CDNJS
• jQuery Tabs Case Study
• jQuery Cycle Demo

Additional Reading and Study – Javascript 101

Read the following Article on Progressive Enhancement. Send me an email (tswallace@ualr.edu) explaining progressive enhancement in your own words. Please discuss why it is important to use progressive enhancement and include a link to another article you found and read relating to the topic. Due before class Monday.

• Introduction
• Uses of JavaScript
• Examples
  • How To
  • Placement
  • Statements
  • Comments

Assignment

Complete lessons #1 thru #4 at Codecademy.

• Review Segway Projects
• Final Project Guidelines
• Planning, Storyboarding and Collecting Resources for your Web Site

Assignment

Complete the planning document and sitemap and submit to me via email before class on Monday.

• Segway Project
• Starter HTML Document

Assignment

Work on the Segway project and bring questions to class on Monday. This project is due next Wednesday.

• Integrating Image Slices into Your Site Template
• Finalizing your page template
• Duplicating pages for your site
• Hosted Solution
• Using Server-Side Technology

• Using Shapes, Text, and Photos to Create Imagery for your site
• Optimizing and Exporting Images

Assignment

Create Banner image for your sample page in Fireworks. The image should be as wide as your container div and between 80px and 200px tall and less than 40kb in size. Emailed tswallace@ualr.edu before class on the Monday following Spring Break. Have fun with this. You can make an image for anything. It could be a company, an event, a hobby etc. I’d like to see the following elements present in your design. Typographical Element, some sort of photographic element or vector artwork, and a consistent color scheme (Try Kuler).

Next class I’ll show you how to integrate this image into your template page properly. Please bring the file to class.

• Fireworks Workspace
• Creating Shapes
• Working with Typography
• Cropping and Resizing

Assignment

Complete the following tutorials and submit the folder icon you create in the 3rd tutorial.

• How to use the pen tool in Adobe Fireworks
• Using the Path Panel
• Create an Icon in Fireworks

You should email this icon to me before class on Monday, March 31, 2014. Late submissions will not be accepted. I do not expect you to perfectly replicate the icon in the tutorial but I would like to see a solid effort from each of you. This is a challenging assignment so I encourage you to not wait until the night before it is due. Good Luck! If you’d like you can download a 30 day trial of Fireworks on your own computer so you can work off campus.

• CSS Positioning Lab
• Fireworks Workspace
• Creating Shapes
• Working with Typography
• Cropping and Resizing

Assignment

Read – Steps for producing a web site

• Positioning Overview
• CSS Positioning
• CSS Positioning Lab

Assignment

Complete today’s lab assignment and upload. Sent me the url’s for each exercise no later than Wednesday. Be prepared to discuss in class.

• Styling Page Navigation
• Positioning Overview
• CSS Positioning
• W3Schools – Positioning Lab – Use the Try it yourself links at the bottom of each code snippet to experiment

Assignment

Style your prototype HTML Document from top to bottom. Upload the file to your web space and send the URL to tswallace@ualr.edu before class on Tuesday.

If you haven’t already, please read the following article on CSS Positioning and be prepared to complete an in class lab assignment on Monday.

• Using Dreamweaver to Create and Apply Styles
• CSS Box Model – Description | Demonstration
• Positioning Overview
• CSS Positioning
• W3Schools – Positioning Lab – Use the Try it yourself links at the bottom of each code snippet to experiment

Assignment

Finish styling your sample html document. Make sure that you have styles to provide the page layout and visual design (typography and color). Really experiment with the different properties and their values. I don’t expect this to be beautiful, but I do want you to see what you come up with. Please be prepared to share this with me in class on Monday.

Watch – Accessibility for the Modern Web by Derek Featherstone

Assignment

Explain in your own words what web accessibility means to you & why it is important to build accessible web sites? Do some research on the topic. This is a written assignment (1-2 pages) that should be emailed to me (tswallace@ualr.edu) no later than next Tuesday. See you Thursday.

• Selecting the Proper Style: Tags, Classes, and ID’s
• Creating and Attaching a Style Sheet
• Using Dreamweaver to Create and Apply Styles
• CSS Box Model – Description | Demonstration

Assignment

Read: CSS Specificity & Class vs. ID – This is quiz material.

• What is Dreamweaver?
• Dreamweaver Workspace
• Defining a Site in Dreamweaver / Connecting to the Web server
• Using Dreamweaver for markup | Download Starter Document
• Selecting the Proper Style: Tags, Classes, and ID’s

Assignment

Reading Assignment: CSS Basics and Chapter 8

• Using an FTP Client – Filezilla – Tutorial
  • Host:ualr.edu
  • Username: students\username
  • Password: students domain password
  • Port:21 (It should default to this)

• What is Dreamweaver?
• Dreamweaver Workspace
• Defining a Site in Dreamweaver / Connecting to the Web server

Assignment

• Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
• You can email the html document to me or for additional credit upload to the server and send me the url. Send to tswallace@ualr.edu before 2.17.14.
• Reading Assignment: CSS Basics

• Quiz
• HTML Assignment Guidelines
• What is Validation?
• Creating Your UALR Web Space
• Naming Conventions, Meta Naming, Directory Structure
• Using an FTP Client – Filezilla – Tutorial
• Host:ualr.edu
• Username: students\username
• Password: students domain password
• Port:21 (It should default to this)

Assignment

• Create and Validate a prototype HTML document that includes examples of all HTML elements covered thus far. For a list of requirements view this page.
• You can email the html document to me or for additional credit upload to the server and send me the url. Send to tswallace@ualr.edu before 2.17.14.
• Reading Assignment: CSS Basics

• Working with Forms
• Sectioning your HTML Document
• Creating Your UALR Web Space

Assignment

Be prepared for a Quiz on Monday covering all readings and in class discussion.
Read Chapter 4 and Chapter 6

• Hyperlinks
• Inserting Images
• Block vs. Inline Elements
• Working with Tables
• Working with Forms
• Sectioning your HTML Document

• Today’s Codecast
• Marking Up Content – Download the Starter Document
• Additional (x)html tags for textual content
• Special Character Encoding: Details | Reference
• Block vs. Inline Elements
• Hyperlinks

Assignment

Read (Quiz Material) Read Chapter 3

• How the Internet Works
• Understanding how a web page works
• Setting up our work environment using Codpen | Today’s Codecast
• Doctypes & DTD’s – Document Type Definition
• Declaring a Language Type
• Exploring the <head>
  • Title Attribute
  • Meta Tags

Assignment

Read Semantic XHTML (Quiz Material) & Read Chapter 2.

• Structure, Content, Design, & Behavior
• 300 Million Dollar Button
• VPN Instructions – Login to VPN with NetId
• How the Internet Works
• Understanding how a web page works

Assignment

Evaluate your favorite web site based on our discussion of Structure, Content, Design, and Behavior. This is a written assignment that should be emailed to me (tswallace@ualr.edu) no later than 1-27-13. Make sure you discuss the following elements: Site URL, An assessment of the Structure, Content, Design, and Behavior of the site, Things you like about the site, Things you would change.

• Understanding Web Related Terminology
• Browser Overview
• Review Reading
• Structure, Content, Design, & Behavior
• 300 Million Dollar Button
• VPN Instructions – Login to VPN with NetId

Course Syllabus

• Download Syllabus (PDF)

Discussion

• Understanding Web Related Terminology
• Browser Overview

Assignment

Read Chapter 1 in Textbook and The history of the Internet and the web, and the evolution of web standards