html5 css3 Jquery

7/30/15
HTML5 + CSS3 + jQuery

Basic Tips and Technique
7/30/15
HTML5
7/30/15
New Doctype
Old
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
New
<!DOCTYPE html>
In fact, did you know that it truthfully isn't even really necessary
for HTML5? However, it's used for older browsers that require a
specified doctype. Browsers that do not understand this doctype
will simply render the contained markup in standards mode.
7/30/15
Meta Tag
Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page, but
will be machine parsable.
Meta elements are typically used to specify page
description, keywords, author of the document, last
modified, and other metadata.
The metadata can be used by browsers (how to display
content or reload page), search engines (keywords), or
other web services.
7/30/15
Meta Tag
7/30/15
Responsive Meta Tag
This means that the browser will (probably) render the width
of the page at the width of its own screen. So if that screen is
320px wide, the browser window will be 320px wide, rather
than way zoomed out and showing 960px (or whatever that
device does by default
7/30/15
Responsive Meta Tag

There are more attributes this tag supports:
7/30/15
No More Types for Scripts and

Links
Old
<link rel="stylesheet" href="path/to/stylesheet.css"
type="text/css" />
<script type="text/javascript"
src="path/to/script.js"></script>
New
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
7/30/15
To Quote or Not to Quote.

<p class=myClass id=someId>
<p class=myClass id=someId>
You don't have to close your elements. With that said, there's
nothing wrong with doing so, if it makes you feel more
comfortable.
7/30/15
10
Make your Content Editable

New
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
The new browsers have a nifty new attribute that can be
applied to elements, called contenteditable. As the name
implies, this allows the user to edit any of the text contained
within the element, including its children. There are a variety
of uses for something like this, including an app as simple as a
to-do list, which also takes advantage of local storage.
7/30/15
11
HTML5 Inputs
HTML5 introduces no less than a bakers dozen (yes, thats
13!) new input types for forms. Were going to take a brief
look at each of them and explain why you should be using
them right now. These new input types have dual benefits:
using them means less development time and an improved
user experience. The new input types well be looking at are:
7/30/15
12
Search Input
Search seems like an appropriate place to start our foray into
HTML5 input types. When we talk about search, were not just
talking about Google, Bing, or Yahoo. Were talking about the
search field on that e-commerce site you just made a
purchase from, on Wikipedia, and even on your personal blog.
Its probably the most common action performed on the Web
every day, yet its not marked up very semantically, is it? We
all tend to write something like this:
7/30/15
13
Search Input keyboard
7/30/15
14
Email Input
If we apply a type of "email" to form inputs, we can instruct
the browser to only allow strings that conform to a valid email
address structure. That's right; built-in form validation will
soon be here! We can't 100% rely on this just yet, for obvious
reasons. In older browsers that do not understand this "email"
type, they'll simply fall back to a regular textbox.
7/30/15
15
Email Input keyboard
7/30/15
16
Tel Input
Phone numbers differ around the world, making it difficult to
guarantee any type of specific notation except for allowing
only numbers and perhaps a + symbol to be entered. Its
possible that you can validate specific phone numbers (if you
can guarantee the format) using client-side validation.
type="tel" is marked up as follows:
7/30/15
17
Tel Input keyboard
7/30/15
18
Required Attribute
Forms allow for a new required attribute, which specifies,
naturally, whether a particular input is required. Dependent
upon your coding preference, you can declare this attribute in
one of two ways:
7/30/15
19
Required Attribute
Either method will do. With this code, and within browsers that
support this attribute, a form cannot be submitted if that
"someInput" input is blank. Here's a quick example; we'll also
add the placeholder attribute as well, as there's no reason not
to.
If the input is left blank, and the form is submitted, the textbox
will be highlighted.
7/30/15
20
Autofocus Attribute
Again, HTML5 removes the need for JavaScript solutions. If a
particular input should be "selected," or focused, by default,
we can now utilize the autofocus attribute.
Interestingly enough, while I personally tend to prefer a more

XHTML approach (using quotation marks, etc.), writing
"autofocus=autofocus" feels odd. As such, we'll stick with the
single keyword approach.
7/30/15
21
Audio Support
No longer do we have to rely upon third party plugins in order
to render audio. HTML5 now offers the <audio> element. Well,
at least, ultimately, we won't have to worry about these
plugins. For the time being, only the most recent of browsers
offer support for HTML5 audio. At this time, it's still a good
practice to offer some form of backward compatibility.
7/30/15
22
Video Support
Much like the <audio> element, we also, of course, have
HTML5 video as well in the new browsers! Unfortunately,
again, because the HTML5 spec doesn't specify a specific
codec for video, it's left to the browsers to decide. While
Safari, and Internet Explorer 9 can be expected to support
video in the H.264 format (which Flash players can play),
Firefox and Opera are sticking with the open source Theora
and Vorbis formats. As such, when displaying HTML5 video,
you must offer both formats.
7/30/15
23
Video Support
7/30/15
24
Regular Expressions
How often have you found yourself writing some quickie regular
expression to verify a particular textbox. Thanks to the new
pattern attribute, we can insert a regular expression directly into
our markup.
If you're moderately familiar with regular expressions, you'll be

aware that this pattern: [A-Za-z]{4,10} accepts only upper and
lowercase letters. This string must also have a minimum of four
characters, and a maximum of ten.
7/30/15
25
When to Use a <div>

Some of us initially questioned when we should use plain-ole
divs. Now that we have access to headers, articles,
sections, and footers, is there ever a time to use a...div?
Absolutely.
For example, if you find that you need to wrap a block of code
within a wrapper element specifically for the purpose of
positioning the content, a <div> makes perfect sense.
7/30/15
26
The Data Attribute

We now officially have support for custom attributes within all
HTML elements.
7/30/15
27
The Figure Element

Old
<img src="path/to/image"
alt="About image" />
<p>Image of Mars. </p>
New
<figure>
<img src="path/to/image"
alt="About image" />
<figcaption>
<p>This is an image of
something interesting. </p>
</figcaption>
</figure>
7/30/15
There unfortunately isn't

any easy or semantic way
to associate the caption,
wrapped in a paragraph tag,
with the image element
itself. HTML5 rectifies this,
with the introduction of the
<figure> element. When
combined
with
the
<figcaption> element, we
can
now
semantically
associate
captions
with
their image counterparts.
28
Internet Explorer and HTML5

Unfortunately, previous version of Internet Explorer requires a
bit of wrangling in order to understand the new HTML5
elements.
In order to ensure that the new HTML5 elements render

correctly as block level elements, it's necessary at this time to
style them as such.
7/30/15
29
Internet Explorer and HTML5

Unfortunately, Internet Explorer will still
ignore these stylings, because it has no
clue what, as an example, the header
element even is. Luckily,
there is an easy fix:
Strangely enough, this code seems to trigger Internet
Explorer. To simply this process for each new application,
Remy Sharpcreated a script, commonly referred to as the
HTML5 shiv. This script also fixes some printing issues as well.
7/30/15
30
CSS3
7/30/15
31
Element Selector
7/30/15
32
Border Radius and image
7/30/15
33
Fonts
7/30/15
34
Overflow
7/30/15
35
Multi Column Layout
7/30/15
36
2D and 3D Transforms
7/30/15
37
Transition and Animation
7/30/15
38
Page Media
7/30/15
39
What Works Now?
7/30/15
40
Resources
7/30/15
41
jQuery
7/30/15
42
What makes jQuery

interesting?
Built around CSS selectors
Well behaved
Doesnt hijack your global namespace
Plays well with other libraries
API designed with conciseness and
convenience as the driving factors
7/30/15
43
The jQuery() function
jQuery('div#intro h2')
jQuery('div.section > p')
jQuery('input:radio')
$('div#intro h2')
7/30/15
44
jQuery collections
$('div.section') returns a jQuery collection

You can call methods on it:
$('div.section').size() = no. of matched elements
$('div.section').each(function(div) {
// Manipulate the div
}
7/30/15
45
Manipulating collections
Most jQuery methods operate on all of the matched

elements in the collection
$('div.section').addClass('highlighted')
$('img.photo').attr('src', '/default.png');
$('a.foo').html('<em>Click me now!</em>');
$('p:odd').css('background-color', '#ccc');
7/30/15
46
Grabbing values
Some methods return results from the first matched element
var height = $('div#intro').height();
var src = $('img.photo').attr('src');
v=ar lastP = $('p:last').html()
7/30/15
47
Traversing the DOM
jQuery provides enhanced methods for traversing the DOM

$('div.section').next()
$('div.section').prev()
$('div.section').prev('a')
$('div.section').parent()
$('div.section').parents()
7/30/15
48
Handling events
jQuery provides methods for assigning event handlers to

elements in a cross-browser way
$('a').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
ev.preventDefault();
});
7/30/15
49
Going unobtrusive
$(document).ready(function() {
alert('The DOM is ready!');
});
$(function() { alert('This is a shortcut') });
7/30/15
50
Chaining
Most jQuery methods return another jQuery object - often

one representing the same collection. This means you can
chain methods together:
$('div.section').hide().addClass('gone');
7/30/15
51
Crazy chaining
$('form#login')
// hide all the labels inside the form with the 'optional' class
.find('label.optional').hide().end()
// add a red border to any password fields in the form
.find('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return confirm('Are you sure you want to submit?');
});
7/30/15
52
Ajax
jQuery has excellent support for Ajax

$('div#intro').load('/some/file.html');
More advanced methods include:

$.get(url, params, callback)
$.post(url, params, callback)
$.getJSON(url, params, callback)
$.getScript(url, callback)
7/30/15
53
Plugins
jQuery is extensible through plugins, which can add new

methods to the jQuery object
7/30/15
Form: better form manipulation

Dimensions: lots of browser measurements
Interface: fancy effects, accordions
UI: drag and drop, and more
54
Further reading
http://jquery.com/ - official site
THE END
7/30/15
55
Click icon to add picture
7/30/15
56

html5 css3 Jquery

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

html5 css3 Jquery

Hochgeladen von

Copyright:

Verfügbare Formate

7/30/15

HTML5 + CSS3 + jQuery

Metadata is data (information) about data.

Responsive Meta Tag

Responsive Meta Tag

No More Types for Scripts and

To Quote or Not to Quote.

Make your Content Editable

Search Input keyboard

Email Input keyboard

Tel Input keyboard

Interestingly enough, while I personally tend to prefer a more

If you're moderately familiar with regular expressions, you'll be

When to Use a <div>

The Data Attribute

The Figure Element

There unfortunately isn't

Internet Explorer and HTML5

In order to ensure that the new HTML5 elements render

Internet Explorer and HTML5

Border Radius and image

Multi Column Layout

Transition and Animation

What Works Now?

What makes jQuery

The jQuery() function

$('div.section') returns a jQuery collection

Most jQuery methods operate on all of the matched

Traversing the DOM

jQuery provides enhanced methods for traversing the DOM

jQuery provides methods for assigning event handlers to

Most jQuery methods return another jQuery object - often

jQuery has excellent support for Ajax

More advanced methods include:

jQuery is extensible through plugins, which can add new

Form: better form manipulation

http://jquery.com/ - official site

Click icon to add picture

Das könnte Ihnen auch gefallen