Wap App with HTML5 and CSS3 Day 01
iOS 4 Web Applications with HTML5 and CSS3 with Ray Villalobos teaches web developers how to leverage their existing CSS and HTML knowledge to create content that displays on iOS devices. The course covers creating animation to produce powerful interactive content, including a photo gallery and a video player. Cutting edge HTML5 and CSS3 techniques for formatting type, creating list driven menus, toggle buttons, and more are also included. The resulting web content will be tailored for viewing on the iPhone and the iPad, but will also work on websites viewed with browsers on other platforms as well. Exercise files are included with the course.
01. Setting Up a Development Environment
Cool Editor: Espresso
02. Understanding HTML5 and CSS3
New Tag: w3school
Basic HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic</title>
</head>
<body>
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="article">
<h1>Welcome</h1>
<p>Welcome to our site</p>
</div>
<div id="sidebar">
<p>Information that goes on a sidebar</p>
</div>
<div id="footer">Copyright 2010</div>
</body>
</html>
Basic HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Basic</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<article>
<h1>Welcome</h1>
<p>Welcome to our site</p>
</article>
<aside>
<p>Information that goes on a sidebar</p>
</aside>
<footer>Copyright 2010</footer>
</body>
</html>
We all hate IE
<!--[if IE]> <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> <![endif]-->
Border radius
width: 300px; background-color: green; border-radius:10px; /* for old Google Chrome Safari and Mozilla Firefox*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;
Test modern browser with Modernizr
// http://cdn.bootcss.com/modernizr/2010.07.06dev/modernizr.js
if (Modernizr.audio) {
//code for html5 audio tag here
} else {
//code for a Flash Audio Player
}
// dynamic inject jQuery
(function(doc){
var js = doc.createElement('script');
js.src = '//cdn.bootcss.com/jquery/1.12.4/jquery.js';
var fs = doc.getElementsByTagName('script')[0];
fs.parentNode.insertBefore(js, fs);
})(document);
jQuery('td.html5_new a').each(
function(){
console.log(jQuery(this).text().trim().replace(/<|>/g,''));
}
);