Introduction to HTML5

Creating Imagery for your Site

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 Tuesday. 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.

HTML5 Structural Elements

In Class Assignment

Visit 10 Websites / Services you frequent. For each you should provide me with the site url, declared doctype, and any meta and linked resources that are unfamiliar you. Only include meta and linked resource relationship information for elements we have not discussed. I’d like for you to discover as many new relationship types as possible. There is no need to list all relationship attributes for the site, only ones that are new to you. Once completed select one of the new relationship types and research it’s purpose. Write up a short description and rational for it’s use.

Please email this assignment to me no later than Monday. I’ll compile these into a document we can use as a reference moving forward. Be prepared to discuss your submission in class on Tuesday.

Read An Overview of HTML5 Semantics
Supplemental Content: Open Graph Protocol

Introduction to HTML5

Assignment

Read (Quiz Material) Introduction to HTML

Web Hosting and Working with Imagery

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 Thursday. 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.

Setting Up Web Hosting, FTP and Introduction to HTML5

  • Chrome Dev Tools – Demos
  • Working With Web Hosting – Cpanel Basics
  • Connecting to your Web Hosting via FTP
    • Using an FTP Client – Filezilla – Tutorial
      • Host:ualr.edu
      • Username: students\username
      • Password: students domain password
      • Port:21 (It should default to this)

Assignment

Set up an index page for your web space. This will be the landing page for this course where you will link all published assignments. Please send me the URL of your web space so I have a place to visit and check in on assignments you are working on throughout the semester.

Read An Overview of HTML5 Semantics

Introduction to HTML5

Assignment

Create a Codepen Account and experiment with it’s features.

Read (Quiz Material) Introduction to HTML

WordPress Explained

Assignment

Make sure you have done the following by Tuesday of next week. We’ll be moving on to new topics so you should have all blog related issues and assignments squared away.

  • Make sure I have your Blog URL
  • Customize your blog
    • Apply a new theme
    • Customize the sidebar or wigitized areas
      • Add a few widgets.
      • Display an rss feed from a site that you frequent.
    • Try using a shortcode in a post or a page.
  • Completed About Page
  • Created a Custom Menu

Understanding Chrome Dev Tools

Your assignment for the day is to complete the first two chapters of the Explore and Master Chrome tools course at Code School. Please complete all of the challenges associated with these two chapters. While you are not required to create an account, I recommend doing so you can track you progress and take advantage of some of the other content on the site. Be prepared to demo a tip or trick you learned from the exercise in class on Tuesday. We will be leveraging these skills throughout the semester so it is imperative that you learn how to use this tool. Feel free to complete the remainder of the chapters depending on your level of experience with the tool. Email a screen shot of your completion badges for these two chapters.

http://discover-devtools.codeschool.com/

In class on Tuesday, we will cover file publishing to both the UALR Web Server and to your individual hosting accounts. If you have been unable to upload your pre-assessment, this will be an opportunity for you to do so. I will not count that assignment as late until Tuesday.

Supplemental Material

 

Structure, Content, Design, & Behavior

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) and  Manoj (mxkumar1@ualr.edu) no later than 1-23-17. 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.

Introduction to WordPress

Homework

Homework (Due 1.23.17): Write your first blog post reflecting on your first week in the program and your personal expectations for the class. Make sure you categorize and/or tag the post. If you are feeling adventurous try adding a photo to the post as well. There is no length requirement for this assignment.

Introduction to Fireworks

Working with Photography

Image Optimization

Assignment

Post optimized samples of the images you created to your blog with an explanation of the tools and approach you used.

Introduction to Fireworks

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

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

You should email this icon to me before class next Thursday. 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!

Chromebook Orientation and Introduction to WordPress

Homework

Homework (Due 1.18.17): Visit WordPress.com and create a new blog. This will be where you reflect and write over the course of the next semester. Send me the address of your blog via email (tswallace@ualr.edu). We will review all of the settings on Tuesday.

Course Overview

Review Course Expectations

Course Setup

Toolset

Skills Review

Assignment

Set up Web Hosting prior to class on class on Thursday.

IT Ruby Orientation

Assignments

  • Complete the Myers Briggs Type Inventory and email the results to cljohnston@ualr.edu. Due January 11, 2017 by noon.
  • Bring your Chromebook to class on Wednesday.

JavaScript Libraries

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 Tuesday.

Usability Testing

Assignment

Please write a blog post regarding today’s usability tests. I’d like you talk in detail about your observations from both tests and your thoughts as to why usability testing is a valuable part of the design/development workflow.

Image Integration and Page Duplication

Segway Project

Assignment

Begin work on the Segway Projects. You should have a good start on your main page template prior to class on Monday.

Image Optimization

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 Tuesday. 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.

Image Manipulation and Optimization

Woking with Photography

Image Optimization

Assignment

Email me the completed optimized samples of the images you created in class. Due Thursday.

Image Manipulation and Optimization

Woking with Photography

Image Optimization

Assignment

Email me the completed optimized samples of the images you created in class. Due next Tuesday.

Web Publishing and Workspace

Assignment

Introduction to Fireworks

  • Review Positioning Exercises
  • 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.

You should email this icon to me before class next Thursday. 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.

HTML5 Structural Elements

Assignment