Using Table as layout in HTML 5

The HTML5 specification still recommends that you don't use tables for layout, but if you do, you should differentiate those tables from tables that are used for tabular data.

Features to Define Your Table as Layout or Non-Layout

Feature of Table	Is a Layout Table?
<table role="presentation">	It probably is a layout table
<table border="0">	It probably is a layout table
<table cellpadding="0">	It probably is a layout table
<table cellspacing="0">	It probably is a layout table
Use of the CAPTION, THEAD, or TH elements	It probably is not a layout table
Use of the headers and scope attributes on the TH element	It probably is not a layout table
<table border="">	It probably is not a layout table
<table border="1">	It probably is not a layout table
Visible borders set with CSS	It probably is not a layout table

Fiddler

Download the free web debug tool here:
https://fiddler2.com/fiddler2/version.asp

When working on the localhost, add the "." before the port, e.g.

http://localhost.:1064/

Responsive Web Design

Responsive design is a style of web design that responds to the user as they arrive at the web page. The design will display the content most effectively with different devices.

Web pages must be flexible and adapt, they must look different depending upon what is displaying them.

Don't crate separate websites for each device, it is only a quick and dirty approach.

Responsive design treats mobile and desktop the same. But the pages that are created may look vastly different, while containing the same content.

CSS media queries were introduced as part of CSS3 and they improved on the idea of media types by looking at the actual physical specifications being sent from the browser to the computer.


 For example, to send a specific style sheet only to iPhones, you would write:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="480-styles.css"> 

This can handle any device that has a width less than 480px.

Small Screen Need the Important Things First

Sidejacking

Sidejacking (session hijacking) is a technique that lets one user literally steal the current Web session of another.

Your password has not been stolen but another user, by "borrowing" your identity, can "be you" for that session (before you logout).

That means, for example, that you could be surfing your Facebook page when, suddenly, someone else is changing your status, posting messages on your friends' pages, and simply impersonating you right under your nose! The same goes for Twitter, other social media sites, and even web-based email.

With SSL (Secure Sockets Layer), all info will be encrypted and you are safe from sidejacking.  GMail was the first major email provider to enable SSL on all users' sessions.

CDN (Content Delivery Network)

It is a system of computers with scripts and other content on them that are widely used by many web pages.  The content will often be cached (like the link to jQuery) at a network node, therefore, it will speed up the web pages.

Scribd

Trying Scribd to put the manuals online and embedded in Blogger

• Create an account
• Upload the document
• Add the web url or the code (in HTML, not Compose) inside Blogger

HTML5 DATA Element

This element represents data with a machine-readable value attribute attached so that computers can understand that it is data as well.

<data class="dtstart" value="2011-12-02">December 2</data> –
<data class="dtend" value="2011-12-10">10</data>

The Difference Between the HTML5 DATA Element and the CODE Element

Mobile Site Design

• Put the primary content first (not the navigation)
• Put the article on the same page (scrolling is easier than clicking)
• Get rid of everything that isn't absolutely required for that page

Use CSS3 to identify the OS and the type of device of the user

Use WordPress Mobile Pack to convert the existing pages to a mobile-friendly design without removing the content

Semantic Web

semantic

• (形) 語義的

Semantic Web

• promotes common formats for data on the World Wide Web
• aims at converting the current web of unstructured documents into a "web of data"
• provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries
• is a web of data that can be processed directly and indirectly by machines
• is an attempt to look at the meaning of the data that is provided in the Web pages

Web Document Structure

A Web page's document structure is the backbone of the page.

• Use a DOCTYPE to define your document
• Include a root element (usually <html>)
• Include <head> and <title> elements
• Include a <body> or <frameset> element

What is the Semantic Web?