CO280 WEEK 7

chantingrompΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

139 εμφανίσεις

CO280 WEEK 7

DreamWeaver CS5.5 For Mobile Development

DW CS5.5 New Features

DW Live Code / Live View

DW CSS3 Support

DW CSS Panel

Advanced CSS: Compound Selectors

jQuery Mobile CSS Editing


CO280 WEEK 7
DW CS5.5 New Features

Media Queries
CSS3 in CSS Panel
jQuery Mobile Support
Live View
Live Code View
Code Hinting
Multi-Screen Preview
Preview in WebKit Browsers
Support for HTML5 (sort of)

All of which contribute to mobile development

All of which we will cover

DW CS5.5 NEW FEATURES
DW CS5.5 provides basic support for HTML5

Understands and uses the new HTML5 tags

Provides code-hinting support as you insert tags in Code View

Dreamweaver CS5.5 adds code-hinting for CSS3

New CSS3 properties added to and available in CSS Styles panel

Useful for mobile development

PhoneGap is the key new feature in this respect



DW CS5.5 NEW FEATURES: HTML 5 AND CSS 3 SUPPORT
PhoneGap Native Functionality inside DW:

Accelerometer
Camera
Compass
Geolocation
File
Notification (alert / sound / vibration)
Storage

Integration with DW is seamless / discrete

Not notice that you are using PhoneGap inside DW
DW:PHONEGAP SUPPORT

Choice based on:

Content

Context

Use
PhoneGap

Can target and work on 7 different platforms:

Android
iOS
Blackberry
Windows
HP WebOS
Symbian
Bada

DreamWeaver CS5.5 specifically target iOS / Android


DW:PHONEGAP SUPPORT
DreamWeaver CS5.5 specifically target iOS / Android

Will need to use PhoneGap outside of DW for other 5

Fortunately, iOS and Android have largest market share




DW:PHONEGAP SUPPORT
https://netaverages.adobe.com/en-us/index.html#
The multiscreen preview feature

Preview a page at different resolutions

Dreamweaver CS5.5 CSS3 media query support preview

Different CSS styles to match the display of different devices

Access to jQuery Mobile CSS

All aids to mobile development

Before PhoneGap is deployed

DW CS5.5 NEW FEATURES: MOBILE DEVELOPMENT
DW CS5.5 W3C Validator

Dreamweaver CS4 and earlier had a built-in HTML validator

Adobe removed it in Dreamweaver CS5

Can now check HTML with Adobe’s online W3C validator

Without leaving Dreamweaver
DW W3C VALIDATOR
The CSS Styles panel two views:
All and Current

The Properties pane available in both views

All button choose any style from list in body
from the list of CSS styles

Quickly see which properties a style uses,

And edit them

Can attach or create new rules
DS CSS PANEL
CSS PANEL

The CSS Styles panel in Current view

Lists property names on the left

And their values on the right

Tag Selector at bottom of document

Highlights associated code


Compound Selectors
Tag, class, and ID selectors are most
widely used

DW calls the ultra-specific selectors
Compound Selectors

Allow you to format the smallest
page element

Includes pseudo classes and
descendent selectors

Need to type into new rule dialog


CSS PANEL: COMPOUND SELECTORS

Use to target specific elements

Inside jQuery Mobile CSS
DW Live View lets you preview pages

Using browser built into the DW
interface

Live View good for testing JavaScript

JQM menus

Can simulate mobile functionality

Alongside new resolution settings


DW LIVE VIEW
When in Live Code view

HTML appears with a yellow background

Live Code lets you see non mark-up
functionality

Pages manipulated with JavaScript

Constructed with server-side code

Preview functional elements in the code

And the selectors they target


DW LIVE CODE VIEW

Use F6 to freeze JavaScript

That is being executed

Identify relevant selectors
Reasonably good DW support for CSS3 - not as good as CSS 2.1

Use and apply Media Queries

Can use new CSS3 declarations

Can use new properties such as box-shadow

Need to use browser vendor prefixes

box-shadow: 2px 3px 4px #000;

-webkit-box-shadow: 2px 3px 4px #000;

-moz-box-shadow: 2px 3px 4px #000;
DW: CSS3 SUPPORT

Need to use PhoneGap sample

In order to access the API

Gives access to native
functionality

DocType set to HTML 5

Calls PhoneGap .js file
DW:JQUERY SAMPLES
PhoneGap Sample

References phonegap.js

Uses data roles

jQuery CSS can be edited
DW: JQUERY SAMPLES

Can override jQuery

With own custom CSS rules
Can Create new CSS rules

Using compound selectors

Such as .ui-footer h4.ui-title

Create rule definitions not
part of jQuery Mobile CSS

Need to be part of our own
custom CSS

Supersede jQuery rules




DW COMPOUND SELECTORS
Go Into JQM CSS file

Come out of Live View

Click on JQM CSS file tab

Need to apply source formatting

To split up minified JQM code


EDITING JQM CSS
Need to look for relevant class

Use DW Find and Replace
function CTRL + F

Type in relevant class
and click Find Next

DW locates and highlights the
relevant class in the CSS file

Copy the declarations into your
custom CSS file





DW FIND AND REPLACE
Change classes as part of custom CSS

Only need to change background-
image declarations

Can delete rest

And change hex values

To change colours

Copy to WebKit rule

And MS Filter rule
CHANGING JQM CSS
Configure Application Framework for PhoneGap API

Need to author for iOS on a mac

DW on all machines in University

PCs for Android

Package Web App for testing with PhoneGap

In conjunction with Android SDK (emulator)

Eclipse contains Android SDK emulator


CONFIGURE APPLICATION FRAMEWORK
Preview in WebKit browsers

Chrome

Safari

Adobe Browserlab

DW BROWSER PREVIEWS
jQuery ThemeRoller for Mobile

ThemeRoller is a web-based tool

Allows you to create custom themes CSS themes for mobile

Via ThemeRoller GUI – no need to write CSS rules

Much more versatility for mobile designs

Create up to 26 unique colour “swatches” within a single theme
JQUERY MOBILE THEMEROLLER
Swatches define the look and feel for bars
Content blocks
Buttons with interaction states

You assign swatch letters to individual
elements on a page

Swatches are assigned a single letter from a-z

Similar to data-themes a – e

Mix and match swatches
JQUERY MOBILE THEMEROLLER
Can currently edit JQM CSS

Based on data-themes

Choose data-theme a-f

And edit based on theme

Can download latest JQM CSS

As unminified/commented file

And edit CSS based on themes



















DOWNLOAD JQM CSS
http://jquerymobile.com/download/
Next Week

jQuery Mobile ThemeRoller

DW CSS3 Media Queries

Final jQuery Problem – Solving Opportunity

Finished Mobile Site – Ready for Native Functionality

Weeks 9 – 12

HTML5 / PhoneGap API / SEO and Testing



CO280 WEEK 8
Create PhoneGap / jQuery Mobile site

Use live view

Use code view

Change CSS

Using Compound Selectors

CSS3 Declarations

Edit / Overwrite jQuery CSS
CO280 WEEK 7 TUTORIAL