Class notes from May 20, 2013

Notes on creating a mobile website:

WIDTH

<DIV> - would be extension box

Open  <DIV STYLE = "WIDTH : 300">
Close </DIV>

Will cause it wrap (if text) or push bounds out of screen (if image) when using exact pixel dimensions.

Better to use style template:

<DIV STYLE = "WIDTH 100%">

• Will size to fit dimensions of mobile device
• Works with text
• Browsers cannot re size graphics

Size images to biggest device or have different image sizes and use a JAVA applet to read back device type to select proper image
Such as:
     IF Screen Size >= 300 THEN 1.jpg (Use larger graphic)
     ELSE Screen Size < 300 2.jpg (Use smaller graphic)
On image itself:
    WIDTH = 100%
    HEIGHT = 100%

• Browser will re size image visually, but not change the size of the file

HTML 5 is the latest Standard

Dreamweaver

• Has new fluid grid layout
• A new product that can be used on mobile devices
• Uses columns
• Responsive because templates work because of columns and grids
• Makes use of source code and style sheets to do this

Phone Gap

• Uses HTML, CSS, JAVA
• Allows a developer to write app then send it to Phone Gap where it is converted to a single set of instructions
• One set for Android, one set for Apple, etc.
• At the end of the process will have a native app for all mobile devices

APP vs Web Site

APP - To do something

• Frameworks
• Uses JAVA
• Bridges the gap between desk top and mobile
• Makes web pages look like native apps
• Examples:
• Moo Tools
• J Query Mobile

Web Site - Provide Info

• Use responsive design to display on mobile or desk top