Web Publishing 3  Meeting 2 1

Learning Outcomes  Configure float  Configure fixed positioning  Configure relative positioning  Configure absolute positioning  Create two-column page layouts  Configure vertical navigation in an unordered list  Configure horizontal navigation in an unordered list.  Add interactivity to hyperlinks with CSS pseudo-classes  Configure CSS sprites 2

Normal Flow  Browser display of elements in the order they are coded in the Web page document Figure 7.1 Figure 7.2

float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the CSS float property. 4 h1 { background-color: #A8C682; padding: 5px; color: #000000; } p { font-family: Arial, sans-serif; } #yls { float: right; margin: 0 0 5px 5px; border: solid; }

clear Property  Useful to “clear” or terminate a float  Values are left, right, and both The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.

overflow Property  Configures the display of elements on a web page.  Useful to “clear” or terminate a float before the end of a container element  Values are auto, hidden, and scroll The background does not extend as far as you’d expect. overflow: auto; was applied to the container div. Now the background extends and the h2 text displays AFTER the floated image. overflow: auto; was applied to the container div. Now the background extends and the h2 text displays AFTER the floated image.

CSS Page Layout Two Columns (left nav)

CSS Page Layout Two Columns (top logo, left nav)

Vertrical Navigation with an Unordered List <nav Home Menu Directions Contact  CSS removes the list marker and underline: nav ul { list-style-type: none; } nav a { text-decoration: none; } 9

display Property  Configures how and if an element is displayed display: none; ○ The element will not be displayed. display: block; ○ The element is rendered as a block element – even if it is actually an inline element, such as a hyperlink. display: inline; ○ The element will be rendered as an inline element – even if it is actually a block element – such as a. 10

Horizontal Navigation with an Unordered List HTML: <nav Home Menu Directions Contact  CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display. nav ul { list-style-type: none;} nav a { text-decoration: none; padding-right: 10px; } nav li { display: inline; } 11

CSS Pseudo-classes Pseudo-classes and the anchor element ◦ :link – default state for a hyperlink ◦ :visited –a hyperlink that has been visited ◦ :focus – triggered when the hyperlink has focus ◦ :hover – triggered when the mouse moves over the hyperlink ◦ :active – triggered when the hyperlink is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;}

CSS Pseudo-classes a:link { color: #ff0000; } a:hover { text-decoration: none; color: #000066; } 13

Position Property 14

Fixed Positioning  nav { position: fixed; } 15

Relative Positioning Changes the location of an element in relation to where it would otherwise appear in normal flow 16 p { position: relative; left: 30px; font-family: Arial, sans-serif; } p { position: relative; left: 30px; font-family: Arial, sans-serif; }

Absolute Positioning Precisely specifies the location of an element outside of normal flow in in relation to its first parent non-static element 17 p { position: absolute; left: 200px; top: 100px; font-family: Arial, sans-serif; width: 300px; } p { position: absolute; left: 200px; top: 100px; font-family: Arial, sans-serif; width: 300px; }

CSS Sprites  Sprite an image file that contains multiple small graphics advantage: saves download time 18

CSS Debugging Tips  Manually check syntax errors  Use W3C CSS Validator to check syntax errors  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! 19

Summary  This chapter expanded your CSS skillset.  You configured web pages with floating elements with CSS.  You were introduced to fixed, relative, and absolute positioning.  You configured web pages with two-column page layouts  You used unordered lists to provide structure for navigation hyperlinks.  You added interactivity to hyperlinks with CSS pseudo-classes.  You configured a CSS sprite image. 20

HTML5 Structural Elements  Header Element  Hgroup Element  Nav Element  Footer Element Example: Lighthouse Island Bistro the best coffee on the coast 21

HTML5 Figure and Figcaption Elements Island Lighthouse, Built in

Floating Images  HTML: Golden Gate Bridge  CSS figure { float: left; width: 230px; padding-bottom: 10px; background-color: #EAEAEA; } figcaption { text-align: center; font-style: italic; font-family: Georgia, serif; } 23

More HTML5 Elements  Hgroup Element groups heading level tags  Section Element indicates a portion or “section” of a document, like a chapter or topic  Article Element indicates an independent entry, like a blog posting, that can stand on its own  Aside Element indicates a sidebar or other tangential content  Time Element represents a date or time 24

HTML5 Compatibility with Older Browsers  CSS header, hgroup, nav, footer, section, article, figure, figcaption, aside { display: block; }  HTML5 Shim (aka HTML5 Shiv) 25

CSS Styling for Print  Create an external style sheet with the configurations for browser display.  Create a second external style sheet with the configurations for printing.  Connect both of the external style sheets to the web page using two elements. 26

Print Styling Best Practices  Hide non-essential content Example: nav { display: none; }  Configure font size and color for printing Use pt font sizes, use dark text color  Control page breaks Example:. newpage { page-break-before: always; } 27

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 32

Telephone & Text Message Hyperlinks  Telephone Scheme Call Many mobile browsers will initiate a phone call when the hyperlink is clicked.  SMS Scheme Text Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 33

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 34

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:  CSS only screen and (max-width: 480px) { header { background-image: url(mobile.gif); } 35

Flexible Images  Edit HTML: remove height and width attributes  CSS: img { max-width: 100%; height : auto; } 36

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 37

CSS Debugging Tips  Manually check syntax errors  Use W3C CSS Validator to check syntax errors  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! 38

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 Fun with jQuery Hello, jQuery! Say Ouch $("#btnOuch").click(function(){ alert("Ouch! That hurt."); });  Include jQuery in the source file  Define jQuery functions  Save this file as index.htm in a 216/jQuery subdirectory on ned  Try it!

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 $("#btnOuch").click(function(){ alert("Ouch! That hurt."); }); Display an alert when the button with ID btnOuch is clicked

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) ntax.asp

jQuery Selectors SyntaxDescription $(this)Current HTML element $("p")All elements $("p.intro")All elements with class="intro" $(".intro")All elements with class="intro" $("#intro")The first element with id="intro" $("ul li:first")The first element of each $("[href$='.jpg']")All elements with an href attribute that ends with ".jpg" $("div#intro.head") All elements with class="head" inside a element with id="intro" For a full reference please see jQuery Selectors ReferencejQuery Selectors Reference

Comparison  Compare the following: What are the advantages of the jQuery method? $("a").click(function(){ alert("You clicked a link!"); }); Link

Example 2 $("h2").click(function(){ $(this).hide("slow"); }); What will this do? What happens if you have more than one h2? Try it!

Example 3 $("#btnHideBlue").click(function(){ $("p.blue").hide("slow"); }); Hide all blue paragraphs when btnHideBlue is clicked Hide Blue

jQuery Events Event MethodDescription $(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 ReferencejQuery Events Reference

Example 4 $("#lemon").mouseover(function(){ $(this).append(" Cookie! "); }); Append text to paragraph lemon on mouseover Lemon drops biscuit chocolate…

Manipulating CSS CSS PropertiesDescription $(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 ReferencejQuery CSS Methods Reference For more on the css function, see

Example 5 $("#btnColor").click(function(){ $("#lemon").addClass("blue"); }); Change color of paragraph lemon when btnColor is clicked.red{ color:red; }.blue{ color:blue; }

Example 6 Display the color of the paragraph lemon when btnColorCheck is clicked. What color is the paragraph? $("#btnColorCheck").click(function(){ alert($("#lemon").css("color")); });

Example 7 $("p").dblclick(function(){ $(this).css("background-color", "yellow"); }); Highlight (background-color = yellow) any paragraph that is double-clicked

jQuery Effects FunctionDescription $(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 $("#btnToggle").click(function(){ $("#lemon").slideToggle("slow"); }); Create a toggle button that shows/hides paragraph lemon.

Example 9 $("#btnFade").click(function(){ $("#lemon").fadeTo("slow", 0.5); }); Fade paragraph lemon to 50% opacity when btnFade is clicked.

Manipulating HTML FunctionDescription $(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 ReferencejQuery HTML Methods Reference

Example 10 $("#btnReplace").click(function(){ $("#lemon").html("Lollipop soufflé ice cream tootsie roll donut..."); }); 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); }); ajax.php ParameterDescription URLRequired. Specifies the url to send the request to. dataOptional. 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

Ajax <?php $id = $_POST['id']; 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); echo " Item ID: {$row['item_id']} "; echo " Title: {$row['title']} "; echo " Artist: {$row['artist']} "; echo " Price: {$row['unit_price']} "; Get this from the Ajax call show_product.php

Ajax $('#show').click(function(){ var prodId = $('#id').val(); $.post( "show_product.php", {id:prodId}, function(result) { $('#detail').html(result); } ); }); When the button is clicked Get the text box value Name of the PHP script The key/value to be passed Update the "detail" div With the output of the PHP script Ajax POST ajax.php

Resources   