|
|
|
Unit |
Topic, Objectives and Readings |
Assignment & Materials |
|
|
|
|
| | |
|
- Topic: Type setting with HTML
- Objective: Be able to create a webpage with
formatted content.
- Contents: HTML as a markup language. Basic
tags: P,IMG,TABLE,H1..H3, Etc.
- Readings: Chapter 1 and 2 of the textbook and
The W3 Schools tutorial
|
- Assignment: You must go to
W3 Schools’ HTML section
and play around. Try out
building sample web pages,
Go to the ”start learning
HTML now” link Take the
quiz at www3schools. Lastly,
create a webpage with actual
relevant content, that includes
tables, images, links, lists and
several sections. If you do not
have a topic in mind, here are
some suggestions: ”The US
constitution”;
”Justin Bieber”; ”Research
Methods”; ”Learning
to Add”; ”The history of
the WWW”; ”The Emperor
Pinguin”; ”Chilean Natural
Resources”.
|
|
|
|
|
- Topic: CSS –controlling format separately–
- Objective: Be able to lay out a webpage using
almost exclusively CSS
- Contents: The DIV tag, CSS syntax, basic CSS
commands: classes, elements, id’s
- Readings: Chapter 4; and the tutorial form the
W3 schools.
|
- Assignment: a) do all the
excercises on w3schools.org
as well as the quiz; b) Change
the previous assignment to
use only CSSs The CSS must
be stored in a separate file.
Bonus points for extra layout
enhancements not covered in
class.
|
|
|
|
|
- Topic: Events and Basic Javascript
- Objective: Demonstrate understanding of
events and be able to examine the HTML using
the document object. Also, cover HTML forms
and the prompt command.
- Contents: alert, onclick, onmouseOver,
document.getElementById .value and .html
- Readings: Chapter 6. Also, go over
Codecademy and do the first tutorial.
|
- Assignment: Create
a webpage that displays a
Tic-Tac-Toe board with a
table with blank images in
each cell of the board. Have
an onlcick event on those
images.
|
|
|
|
|
- Topic: Javascript.
- Objective: Students must be able to write small
engines behind web based applications using
javascript.
- Contents: For loops, variables, arrays, 2d arrays
and functions. Also, detecting the browser and
selecting a stylesheet. Perhaps classes.
- Readings:
|
- Assignment: Part 1: Now,
when people click on the
cells, the images have to
alternate between O and X.
Also, people should not be
able to click on an image that
has been clicked previously.
Part 2. Implement a function
isWin(pict) that is called
every time a user puts an X
or a O in the tic tac toe. This
function should show an alert
if pic won. Part 2. Instead
of an alert, show it in the
webpage. Bonus points for
making it slowly appear on
the screen.
Part 3. Have the tic-tac-toe
play against the user.
Part 4. Do the w3schools
tutorial and quiz
|
|
|
|
|
- Topic: CSS 3.
- Objective: Demonstrate proficiency with CSS3
components, what works and where.
- Contents: text-shadow; text-wrap;
border-radius, box-shadows, backgrounds,
transitions, animation,2D transformations,
multiple columns @media
- Readings: w3schools, chapter 5
|
- Assignment:
Have the user pick a color
for their symbol in the tic tac
toe game. Also, create some
challenging addition of two
random numbers. If the user
answers correctly, then she/he
can play the tic tac toe. Also,
do the w3schools tutorial and
the quiz. Have the tic-tac-toe
have a different appeareance
depending on the screen it is
seen on. Lastly, animate the X
and Os.
|
|
|
|
|
- Topic: HTML 5.
- Objective: Demonstrate proficiency with
HTML5 components, what works and where.
- Contents: HTML5 canvas, video and forms
such as location.
- Readings: Chapter 3. w3schools
|
- Assignment: Have the user
pick
a color for their symbol in the
tic tac toe game. Also, create
some challenging addition of
two random numbers. If the
user answers correctly, then
she/he can play the tic tac
toe. Otherwise its the other
person’s turn.
|
|
|
|
|
- Topic: Javascript tricks with jQuery
- Objective: Demonstrate proficiency with basic
jQuery components and syntax
- Contents: Accordion menus, popup windows,
animations
- Readings: jQuery tutorial
|
- Assignment: Have the tic tac
toe have an accordion menu
to select the difficulty of the
game and have the problem
appear in a jQuery popup
window.
|
|
|
|
|
- Topic: Writing for the mobile Web
- Objective: Students understand the importance
of design before development.
- Contents: Paper prototypes, Design and cretion
of mobile apps. PhoneGap.
- Readings: Several online articles.
|
- Assignment:
Design an engaging app for
students. We will work on
these for the remainder of
the course. Create a solid
paper prototype. Follow the
example.
|
|
|
|
|
- Topic: Web Servers
- Objective: Learn what web servers are, how to
install them and the abilities they provide
- Contents: Apache, IIS basics, install apache,
configure virtual hosts and allow/deny domains.
- Readings: Online documentation
|
- Assignment: Install apache,
put the tic tac toe website on
the root directory.
|
|
|
|
|
- Topic: PHP (or server side programming)
- Objective: Understand how server applications
process requests and respond to them
- Contents: PhP, post and get parameters
- Readings: Online documentation, Ch. 19
|
- Assignment: Create
a webpage that will validate a
user and return questions for
the tic tac toe.
|
|
|
|
|
- Topic: Databases
- Objective: Demonstrate understanding and
basic skills setting up a database for online apps
- Contents: Two table database with mysql,
select, interacting with PHP. CRUD.
- Readings: Chapter 18
|
- Assignment: Create a user
table and a questions table for
the TicTacToe game. Create a
PHP webpage that validates a
login.
|
|
|
|
|
- Topic: Ajax
- Objective: Demonstrate understanding of Ajax
and basic proficiency parsing JSON documents
- Contents: Ajax, JSON, Type-Ahead
- Readings: Chapter 16
|
- Assignment: JQery and
PhoneGap.
|
|
|
|
|
|
|
|
|
|
|
|