jQuery Mobile
jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms. Device support
Web Technologies WNM-608. Class meets in 180NM and Online this Spring 2012 in San Francisco. Classroom:555 Mailbox: 5th Floor Mailroom 180NM
Monday, February 27, 2012
gettysburg address
Grab the content below for the Gettysburg Address > Save As and resave under a new name that is "m4_gettysburg_yourlastname.html".
Lincoln's Gettysburg Address is one of the most beautiful prose poems in the English language. Use what you have learned about CSS and web typography in this module to create a treatment of this moving text.
As before, tag all the elements on the page. Write a simple style tag in the header to control the fonts on your page. Validate your code. Make the necessary corrections. Upload your files to your web server space and send the URL to me.
Purpose
The purpose of this assignment is to gain practical experience working with structured content and using HTML to express the structure.
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.
Untitled
Demonstration Library
Demonstration Library here's an example of a formers student's class assignments... same course, minus html5/css3
Tuesday, February 21, 2012
Homework Assignments:
1. YOU MUST Bring in you recipe page for the class to use as part of their midterm site project, we're all sharing the content. Last class, you were to have a recipe page styled and a recipe site (3 pages) mocked up in illustrator, photoshop, or any way you're comfortable, ready-to-go... See Alicia's page for the best example of what WAS expected by last week. 2. A completely styled css page ready to go... 3. A wireframe (this will evolve) for your portfolio site, this will be due at the end of class and will be presented at your Mid-Point review as part of your Thesis Review. You can NOT graduate with an MFA without it!!! 4. Your Midterm is 2 projects... one is a demonstration library site of the projects we've done in class and you've spruced up. The second is the recipe site. The final is again 2 projects, a portfolio site of your work, mentioned in #3 above, and what i'm calling a demonstration library site, so not to confuse the portfolio assignment, but it is a portfolio of every class assignment we've done, from the color site to the box examples with the dots... here's an example from a previous student: bryan harris' demonstration library This was completed in week 13. Notice how he's organized it on his server. Our assignments are slightly different, since we're covering slightly different topics now.ALSO....
start gathering URLs of portfolio sites you like, sites you find inspirational... here's one i like! chase jarvisResources
Periodic Table of the Elements - HTML5 elements! HTML5 Makes a Great Color Picker The Great WebKit Comparison Table (since we started talking about webkit last night) Free Illustrator Assets for UI Design KDiff3 KDiff3 is a program that compares or merges two or three text input files or directories, shows the differences line by line and character by character, provides an automatic merge-facility and an integrated editor for comfortable solving of merge-conflicts, supports Unicode, UTF-8 and other codecs, autodetection via byte-order-mark "BOM" supports KIO on KDE (allows accessing ftp, sftp, fish, smb etc.), Printing of differences, Manual alignment of lines, Automatic merging of version control history ($Log$), and has an intuitive graphical user interface.friendly reminder...
Grading Criteria Students are graded on their skill level relative to industry standards. The student's skill level comprises all of the following: The quality of conceptualization as it relates to assignments. The quality of craft and design skills. The quality of a student's presentation. The student's mature ability to interact with peers and faculty members. The student's mature ability to receive and act upon critiques. The student's participation in and contribution to the class. The student's ability to meet weekly and final deadlines. The student's attendance record.Monday, February 20, 2012
CSS Properties | HTML Dog
CSS Properties
information about all of the valid properties belonging to the CSS 2.1 standard.
information about all of the valid properties belonging to the CSS 2.1 standard.
Wednesday, February 15, 2012
suggested reading: HTML5 for Web Designers by Jeremy Keith
** Available direct from the publisher at http://www.abookapart.com/products/html5-for-web-designers
suggested reading: Introducing HTML5 by Bruce Lawson and Remy Sharp
suggested reading: CSS: The Definitive Guide by Eric Meyer. 3rd edition
optional: CSS3 for Web Designers by Dan Cederhalm
** Available direct from the publisher at http://www.abookapart.com/products/css3-for-web-designers
suggested reading: jQuery in Action by Bear Bibeault and Yehuda Katz
suggested reading: JavaScript: The Good Parts by Douglas Crockford
suggested reading: DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith and Jeffrey Sambells
Tuesday, February 14, 2012
Google' Valentine’s Day Doodle
How Google Created Its Epic(-ish) Valentine’s Day Doodle | TechCrunch
This is tech crunch, and it doesn't tell the tech side of the story!?! for shame! but, alas, it is a local. North Bay artist.
So, no tech story in tech crunch, except it's a doodle created by a local artist.
it IS HTML5, not flash.... and... it is also a QT movie for the youTube and "notReady for HTML5" crowd.
clicking on the sourcecode you'll see what's behind the curtain.
This is tech crunch, and it doesn't tell the tech side of the story!?! for shame! but, alas, it is a local. North Bay artist.
So, no tech story in tech crunch, except it's a doodle created by a local artist.
it IS HTML5, not flash.... and... it is also a QT movie for the youTube and "notReady for HTML5" crowd.
clicking on the sourcecode you'll see what's behind the curtain.
Monday, February 13, 2012
common screen sizes
Here is a quick rundown of some of the most common screen sizes:
Smartphones: 240x320 to 640x960, most commonly 480x800px
Tablets: 480x800 to 600x800, 600x1024, 768x1024, or 720x1280 -- the iPad is 1024x768px
Laptops: 800x600 to 1600x1200, even 1920x1200 -- the most common being 1024x768px
Desktops: 1024x768 all the way up to 1920x1200. The most common size is 1280x1024px.
Given so many different screen resolutions and differing aspect ratios, what on Earth is a designer to do?
Smartphones: 240x320 to 640x960, most commonly 480x800px
Tablets: 480x800 to 600x800, 600x1024, 768x1024, or 720x1280 -- the iPad is 1024x768px
Laptops: 800x600 to 1600x1200, even 1920x1200 -- the most common being 1024x768px
Desktops: 1024x768 all the way up to 1920x1200. The most common size is 1280x1024px.
Given so many different screen resolutions and differing aspect ratios, what on Earth is a designer to do?
Content List for The Recipes
Global Navigation: Home, The Recipes, Measurements
Site Name: Recipes from My Friends
Tag line: Cooking together Feeds the Soul
Page Name: The Recipes
Section: Baked Goods
Recipe: Cornbread: Serve warm with chile.
Recipe: Buttermilk Pancakes: Light, fluffy, delicious.
Recipe: Blueberry Scones: Perfect start to your day.
Recipe: Bran Muffins: Hearty and oozing with dates.
Recipe: Granola: Hardly lo-cal, but totally addictive.
Section: Savories
Recipe: Roasted Chickpeas: Crunchy and spicy.
Recipe: Sopa Verde with Pepitas: Rich, velvety and herbal.
Recipe: Warm Pumpkin Salad: Rich with vitamins and minerals.
Recipe: Grilled Grilled Cheese on White Bread: 10 Million kids can't be all wrong!
Recipe: Home Cured Gravlax: My mother's recipe.
Section: Dessert
Recipe: Apple Pie: Perfect for Fall when apples are in season.
Recipe: Baklava: Kostas' favorite!
Recipe: Toll House Cookies: The classic.
Recipe: Brownies with Peanut Butter Centers: Delicious and surprisingly good for you.
Recipe: Macaroons: Light and not too sweet.
Content List for Buttermilk Pancakes
Global Navigation: Home, The Recipes, Measurements
Site Name: Recipes from My Friends
Tag line: Cooking together Feeds the Soul
Page Name: Buttermilk Pancakes
Source: From M. Breen: loosely based on a recipe from Mark Bitman and my Grandmother
Introduction: My grandmother made the best buttermilk pancakes. They were soft, fluffy and had crispy, buttery edges. They were so good that they needed nothing other but a slick of butter over the top.
Note: Serves 2
Ingrdients:
1 cup Flour
1 tsp. Baking Powder
Pinch of Salt
1 cup Buttermilk
1 egg
1 Tbsp Butter melted and cooled
1 Tbsp Maple Syrup or Honey
Butter for frying
Maple Syrup gently warmed
Directions:
In a large bowl mix the flour, baking powder and salt. In a separate bowl mix the buttermilk, egg, melted butter and maple syrup or honey. Add the wet ingredients to the dry and mix with a couple of swift strokes. Don't over mix.
Get your griddle hot. You'll know it's ready if a drop of water skitters across the surface. Drop a small lump of butter onto the griddle. Use it to grease the griddle as it melts. Drop the batter on the griddle by fat table spoons. Make sure there's enough room between the pancakes to get a spatula in to flip them.
The edges will crisp up quickly. Don't let the pan get too hot. Bubbles will form on the surface of the batter and pop. As soon as the bubbles stop popping, the cakes are ready flip. Flip and brown the bottom side.
Serve immediately with more butter and warm maple syrup.
Cooking Notes:
These pancakes can be varied endlessly. Try adding slices of banana or blueberries to the batter. You can replace a third of the flour with corn meal for a wonderful, homey variation. A handful of chocolate chips added to the batter will tempt even the most finicky eater!
Tuesday, February 7, 2012
Class Assignment
baking obsession
i'll post the class notes/summary soon.
remember your assignment from last night's class: gather a recipe you'd like to work with for mid term and images to go along with the recipe, this will be shared with the class.
create a full color site. make it look nice. use the samples from class. there is complete code in the drop off share folder for assistance that we did together in class.
i'll post the class notes/summary soon.
remember your assignment from last night's class: gather a recipe you'd like to work with for mid term and images to go along with the recipe, this will be shared with the class.
create a full color site. make it look nice. use the samples from class. there is complete code in the drop off share folder for assistance that we did together in class.
Monday, February 6, 2012
Student Outcomes:
Gather and install all the needed tools for this course.
Acquire a domain name and an ISP.
Understand what a domain name and an ISP are.
Explore the basic tags of an HTML page.
Make a template page.
Make a two page site with images.
Explore the basic tags of an HTML page.
Write our first styles.
Learn to validate code.
Previous Assignments:
Assignment 1.1: Register a Domain Name and Acquire Server Space
Class Assignment 1.2: Demonstration Files: Two Pages
Class Assignment 1.3 Make a two page site with images.
Class Assignment Explore the basic tags of an HTML page.
Class Assignment 1.4: Screen Shots
Understand the relationship of structure, format and behaviors.
Become familiar with division level and inline tags.
Learn the basic tags of HTML.
Distinguish between absolute vs. relative URLs.
Explore color on the Web
Class Assignment 1.5: Demonstration Files: Color Site
Wednesday, February 1, 2012
Subscribe to:
Posts (Atom)