Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download 1meeting3
Document related concepts
Transcript
Mobile Web Design Best Practices
Three Approaches to Mobile Web:
◦Develop
a new mobile site with a .mobi
TLD
◦Create a separate website hosted within
your current domain targeted for mobile
users
◦Use CSS to configure your current
website for display on both mobile and
desktop devices
Mobile Web Limitations
Small Screen Size
Low bandwidth
Limited fonts
Limited color
Awkward controls
Limited processor and memory
Cost per kilobyte
Design Techniques for Mobile Web
One column design
Avoid floats, tables, frames
Descriptive page title
Descriptive heading tags
Optimize images
Descriptive alt text for images
Eliminate unneeded images
Navigation in lists
Provide “Skip to Content” hyperlink
Provide “Back to Top” hyperlink
Notice the overlap between these techniques
and designing to provide for accessibility?
Design Techniques for Mobile Web
Single column design
Avoid floats, tables, frames
Descriptive page title
Descriptive headings
Optimize images
Descriptive alt text for images
Eliminate unneeded images
Navigation in lists
Em or percentage font size units
Common font typefaces
Good contrast between
text and background colors
Provide “Skip to Content” hyperlink
Provide “Back to Top” hyperlink
Notice the overlap
between these
techniques
and designing to
provide for
accessibility?
Viewport Meta Tag
Default action for most mobile devices
is to zoom out and scale the web page
Viewport
Meta Tag
Created as an Apple extension
to configure display on mobile devices
Configures width and
initial scale of browser viewport
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
5
Telephone & Text Message
Hyperlinks
Telephone Scheme
<a href="tel:888-555-5555">Call 888-555-5555</a>
Many mobile browsers will initiate a phone call when the
hyperlink is clicked.
SMS Scheme
<a href="sms:888-555-5555">Text 888-555-5555</a>
Many mobile browsers will initiate a text message to the
phone number when the hyperlink is clicked.
6
Responsive Web Design
Term coined by Ethan Marcotte
Progressively enhancing a web page for
different viewing contexts
Techniques:
Fluid Layout
CSS3 Media Queries
Flexible Images
7
CSS3 Media Queries
Media
Query
Determines the capability of the mobile
device, such as screen resolution
Directs the browser to styles configured
specifically for those capabilities
Link Element Example:
<link href="lighthousemobile.css"
media="only screen and (max-device-width: 480px)">
CSS Example:
@media only screen and (max-width: 480px) {
header { background-image: url(mobile.gif);
}
}
8
Flexible Images
Edit HTML:
remove height and width attributes
CSS:
img { max-width: 100%;
height: auto; }
9
Testing Mobile Display Options
Test with a mobile device
Emulators
Opera Mobile Emulator
Mobilizer
Opera Mini Simulator
iPhone Emulator
Test with a Desktop Browser
Install an iOS or Android SDK
10
CSS Debugging Tips
Manually check syntax errors
Use W3C CSS Validator to check syntax errors
http://jigsaw.w3.org/css-validator/
Configure temporary background colors
Configure temporary borders
Use CSS comments to find the unexpected
/* the browser ignores this code */
Don’t expect your pages to look exactly the same in all
browsers!
Be patient!
11
What is jQuery?
A library of JavaScript functions
Features
Select and manipulate HTML
Manipulate CSS
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX
Utilities
Getting Started
<!DOCTYPE html>
<html>
<head>
<title>Fun with jQuery</title>
</head>
Include jQuery in the
source file
Define jQuery functions
Save this file as
index.htm in a
216/jQuery subdirectory
on ned
Try it!
<body>
<h2>Hello, jQuery!</h2>
<button id='btnOuch'>Say Ouch</button>
<script
src="http://code.jquery.com/jquery.js"></script>
<script>
$("#btnOuch").click(function(){
alert("Ouch! That hurt.");
Example 1: A Closer Look
$("#btnOuch") selects the element with ID
btnOuch
click() binds a click event to selected element
The function executes when the click event is
fired
Display an alert
when the button with
ID btnOuch is clicked
<script>
$("#btnOuch").click(function(){
alert("Ouch! That hurt.");
});
</script>
How jQuery Works
The jQuery syntax is used to select
HTML elements and perform some
action on those element(s).
Basic syntax: $(selector).action()
A dollar sign to define jQuery
A (selector) to find HTML elements
An action() to be performed on the
element(s)
http://www.w3schools.com/jquery/jquery_sy
ntax.asp
jQuery Selectors
Syntax
Description
$(this)
Current HTML element
$("p")
All <p> elements
$("p.intro")
All <p> elements with class="intro"
$(".intro")
All elements with class="intro"
$("#intro")
The first element with id="intro"
$("ul li:first")
The first <li> element of each <ul>
$("[href$='.jpg']")
All elements with an href attribute that ends with ".jpg"
$("div#intro .head")
All elements with class="head" inside a <div> element
with id="intro"
For a full reference please see jQuery Selectors
Reference
Comparison
Compare the following:
$("a").click(function(){
alert("You clicked a link!");
});
What are the
advantages
of the jQuery
method?
<a href="#" onclick="alert(‘You clicked a link!')">Link</a>
Example 2
<script>
$("h2").click(function(){
$(this).hide("slow");
});
</script>
What will this do?
What happens if
you have more
than one h2?
Try it!
Example 3
Hide all blue paragraphs when
btnHideBlue is clicked
<script>
$("#btnHideBlue").click(function(){
$("p.blue").hide("slow");
});
</script>
<button id='btnHideBlue'>Hide Blue</button>
jQuery Events
Event Method
Description
$(selector).click(function)
Invokes a function when the selected
elements are clicked
$(selector).dblclick(function)
Invokes a function when the selected
elements are double-clicked
$(selector).focus(function)
Invokes a function when the selected
elements receive the focus
$(selector).mouseover(function)
Invokes a function when the mouse is over
the selected elements
$(selector).keypress(function)
Invokes a function when a key is pressed
inside the selected elements
For a full jQuery event reference, please see jQuery Events
Reference
Example 4
Append text to paragraph
lemon on mouseover
<script>
$("#lemon").mouseover(function(){
$(this).append(" Cookie! ");
});
</script>
<p id='lemon'>Lemon drops biscuit chocolate…</p>
Manipulating CSS
CSS Properties
Description
$(selector).css(propertyName)
Get the style property value of the first
selected element
$(selector).css(propertyName,value)
Set the value of one style property for
selected elements
$(selector).css({properties})
Set multiple style properties for
selected elements
$(selector).addClass(class)
Apply style class to the selected
elements
For a full jQuery CSS reference, please see jQuery CSS Methods Reference
For more on the css function, see http://api.jquery.com/css/
Example 5
Change color of paragraph lemon
when btnColor is clicked
<script>
$("#btnColor").click(function(){
$("#lemon").addClass("blue");
});
</script>
<style
type="text/css">
.red{
color:red;
}
.blue{
color:blue;
Example 6
<script>
$("#btnColorCheck").click(function(){
alert($("#lemon").css("color"));
What
color is the paragraph?
});
</script>
Display the color of the
paragraph lemon when
btnColorCheck is clicked.
Example 7
Highlight (background-color = yellow)
any paragraph that is double-clicked
<script>
$("p").dblclick(function(){
$(this).css("background-color", "yellow");
});
</script>
jQuery Effects
Function
Description
$(selector).hide()
Hide selected elements
$(selector).show()
Show selected elements
$(selector).toggle()
Toggle (between hide and show) selected elements
$(selector).slideDown()
Slide-down (show) selected elements
$(selector).slideUp()
Slide-up (hide) selected elements
$(selector).slideToggle() Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()
Fade in selected elements
$(selector).fadeOut()
Fade out selected elements
$(selector).fadeTo()
Fade out selected elements to a given opacity
$(selector).fadeToggle()
Toggle between fade in and fade out
Example 8
Create a toggle button
that shows/hides
paragraph lemon.
<script>
$("#btnToggle").click(function(){
$("#lemon").slideToggle("slow");
});
</script>
Example 9
<script>
$("#btnFade").click(function(){
$("#lemon").fadeTo("slow", 0.5);
});
</script>
Fade paragraph
lemon to 50% opacity
when btnFade is
clicked.
Manipulating HTML
Function
Description
$(selector).html(content)
Changes the (inner) HTML of selected
elements
$(selector).append(content)
Appends content to the (inner) HTML of
selected elements
$(selector).after(content)
Adds HTML after selected elements
For a full jQuery HTML reference, please see jQuery HTML Methods Reference
Example 10
<script>
$("#btnReplace").click(function(){
$("#lemon").html("Lollipop soufflé ice
cream tootsie roll donut...");
});
</script>
Replace text in
paragraph lemon when
btnReplace is clicked.
Ajax
The jQuery $.post() method loads data from the server using an
HTTP POST request.
Syntax
$.post(URL, {data}, function(data){…});
$.post("myScript.php", {name:txt}, function(result) {
$("span").html(result);
});
Parameter
Description
URL
Required. Specifies the url to send the
request to.
data
Optional. Specifies data to send to the
server along with the request.
function(data) •Optional. Specifies a function to run if
the request succeeds.
data - contains the resulting data from
the request
http://www.w3schools.com/jquery/ajax_post.asp
ajax.php
Ajax
show_product.php
<?php
$id = $_POST['id'];
Get this from the Ajax call
mysql_connect("localhost", "omuser", "omuser") or
die("Error connecting");
mysql_select_db("om") or die("Error selecting DB");
$query = "SELECT * FROM items WHERE item_id = $id";
$result = mysql_query($query);
if (mysql_num_rows($result) == 0) {
echo "Product ID $id not found.";
return;
}
$row = mysql_fetch_array($result);
Ajax
ajax.php
$('#show').click(function(){
var prodId =
$('#id').val();
$.post(
When the button is clicked
Get the text box value
Ajax POST
Name of the PHP script
The key/value to be passed
"show_product.php",
{id:prodId},
function(result) {
Update the "detail" div
With the output of the PHP script
Resources
http://jquery.com/
http://www.w3schools.com/jquery
http://jqueryui.com/
