Archive for February, 2012

Why we do what we do!

Why we do what we do!

Why we do what we do! Mobile is the driver.

Notes:

  1. Modernizr – http://www.modernizr.com/
  2. DZone refcardz – http://refcardz.dzone.com/ (css Part 1, 2, 3)
  3. Lynda.com (several css series)
What you will be learning how to do: Build a Mobile Storefront
storefront

Store Front

Hey {What we are doing: making a three layer cake;}
Three layer cake

Three layer cake

Notes:
  • CSS1 1996, CSS2 1998 (browser wars), updated – 2004 CSS2.1 again in 2007
  • CSS3 (mobile is a driver need for another standard) – not a large singular standards document, being released in pieces.
  • So CSS3 is many standards allowing for greater flexibility – all future additions are updates (collection of modules that extends 2.1 specification)
  • Resources: http://www.w3.org/standards/techs/css#w3c_all
  • Where we are at: http://www.w3.org/Style/CSS/current-work.html
  • For IE CSS3 PieLibrary:  http://css3pie.com/
  • Modernzr doesn’t add support but detects support (www.modernizr.com)
  • Vendor prefixes – propitiatory without interfering (Firefox moz, IE ms and mso, Opera 0, Chrome and Safari webkit, Konqueror khtml) – early adoption. Prefix can be dropped once standard is implemented.
  • CSS Syntax – CSS is easy to learn (Selector +Declaration include rules property:value;)
  •  (don’t use camel casing use -), can group selectors by commas
  • Basic Selectors: Element Selectors (global in nature)
  • Class Selector: can be set on any html element (.selection)
  • ID Selector: must be unique to the page, if assign to page element not other element on that page can have that specific ID. (#mainparagraph). Can add element to front of selector.
  • Descendant Selectors – string selectors together (avoid more than three – ) div p span {color: red;}
  • Child and sibling selectors: div > h1 (child selector), h1+p (adjacent), h1~p (general)
  • Attribute selectors: [att],[att=val],[att~=val],[att|=val],[att^=val],[att$=val],[att*=val]
  • pseudo-class: enabled, disabled, checked (based on current state – controls css of forms)

Videos

http://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Fundamentals/80436-2.html

http://www.lynda.com/CSS3-tutorials/first-look/73288-2.html

Simple Examples:

http://www.ironspider.ca/adv/basic_css/example/embedded01.htm

http://www.w3.org/Style/Examples/011/firstcss

Industry Example: Demoed and handed out!

This Saturday at my house at 9AM we will be building a mobile storefront using CSS3. Source code, wireless,  and refreshments will be provided.

Time: 9AM-10:30AM, 2/25/12

Address: 1849 Windingvine Ct,  Florence, KY 41042

Contact: 859-802-5749, livelym1@knights.ucf.edu

 

 

Kent State  U asked me to teach another course for them. I’m so psyched, it’s on ISTQB Certification. Check out the outline below:

ISTQB Outline Fundamentals

1. Introduction

2. The Basics of Software Testing

  • Terms and Motivation
  • The Fundamental Test Process
  • The Psychology of Testing
  • General Principles of Testing

3. Testing in the Software Lifecycle

  •  The General V-Model
  • Component Test
  • Integration Test
  • System Test
  • Acceptance Test
  • Testing New Product Versions
  • Generic Types of Testing

4. Static Testing

  • Structured Group Examinations
  • Static Analysis

5. Dynamic Analysis – Test Design Techniques

  • Black Box Testing Techniques
  • White Box Testing Techniques
  • Intuitive and Experience Based Test Case Determination

6. Test Management

  • Test Organization
  • Test Planning
  • Cost and Economy Aspects
  • Definition of Test Strategy
  • Test Activity Management
  • Incident Management
  • Requirements to Configuration Management
  • Relevant Standards

7. Test Tools

  • Types of Test Tools
  • Selection and Introduction of Test Tools

 

 

Meeting Minutes 2/11/12

We discussed jquerymobile, showed demos, showed how to use your browser to do mobile simulation, gave out source code, built a simple example, showed Jonathan’s game framework, discussed and showed demos of the CubicVR 3D Engine.

Note: If you need a free editor for your HTML5 pages use Notepad++ http://notepad-plus-plus.org/ Ed was unprepared and did not have one! 🙂 He downloaded Nopepad++ and was good to go!

Meeting Links:

Pulling websites: http://www.httrack.com/

Note: Never pull sites just to copy them for distribution (that is a copyright violation), but to use them as a reference as you build your own sites. To see how other people did it!

HTTrack is a website copier (above) which you can use to do this with.

Browser Mobile Simulation Tools

All major browsers have have mobile simulators. You don’t have to download one. Mobile rendering engines for the browser are almost the same.

Here are the steps – access or add a User Agent to your browser, reducer your browser size to the size of the device under investigation, go to the url of interest (use browser development tools). If your User Agent does not have the correct device, edit, and input the User Agent String. http://en.wikipedia.org/wiki/User_agent

Here are a few browser and their simulation engines:

  • Chrome: has Android
  • IE: IE Mobile (tools menu)
  • Firefox: …usinic
  • Safari: Mac, Windows, Iphone (change in preferences)
Steps –
  • Change user agent to match mobile device
  • Resize window to same size a device screen
  • User brower’s built-in developer tools

Note: Firefox and Chrome have ad-on User Agent Extensions.

Firefox Example:

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

(install under ad-ons in tools access in tools change user agent, can use user agent strings)

http://en.wikipedia.org/wiki/User_agent

Example:CNN (www.cnn.com)

Five Mobile Sites:

Here are the five mobile sites we discussed and provide source code for.

Stanford University: http://m.stanford.edu

Open Table: http://m.opentable.com/

Ryland Homes: http://m.ryland.com   (note: you must repair the jquerymobile link)

American Century: https://www.americancentury.com/mobile/

JQueryMobile: http://jquerymobile.com/demos/1.0.1/

Simple Tutorial

I demonstrated how to build a mobile site using jquerymobile. See more for the starter code.

CubicVR3D and Maze Work

cubic3d

Jonathan demonstrated his game work.

And I discussed CubicVR 3D Engine on WebGL a JavaScript 3D engine.

Engine:

http://www.cubicvr.org/index.php?option=com_content&view=article&id=73&Itemid=88

Demos:

https://github.com/cjcliffe/CubicVR.js/wiki/Examples-and-Demos

(more…)

This Saturday we are meeting at my house on 2/11/11 at 9am. Get ready for an HTML5 Bonanza. I’ll be giving out 5 HTML5 mobile templates and showing you how to make mobile sites in less than 5 minutes using jquerymobile.

See you there!