Prototyping with HTML5: Short guide

HTML 5 is the latest version of the hyper-text markup language used to build websites, it''s optimized for the creation of mobile websites and applications. Responsive websites are easily built using HTML5, offering full functionality across all types of devices. Without the need for horizontal scrolling, mobile internet users can browse websites more efficiently. While it offers many of the same features as previous versions, there are several new features that open up world of opportunities. However, some webmasters are skeptical of making the switch to HTML5, fearing it''s not worth their time or effort. HTML5 also offers offline caching, meaning visitors can load certain elements on a webpage without an active internet connection – assuming they''ve visited the site in the past. If a visitor''s internet connection happens to go down, he or she can still load core elements of the site.

Trang 1

with

TODD ZAKI WARFEL / UXLONDON /#HTML5

Trang 2

http://bit.ly/UXLondon

Grab the files

Trang 3

Set Expectations

Guiding Principles

Trang 4

The Best Tool is the one you know

Guiding Principles

Trang 5

Prototype Only What you Need

Guiding Principles

Trang 6

Pros and Cons

HTMl as a prototyping tool

Trang 7

Production vs Non-production

About that code thing

Trang 8

html vs html5

Trang 10

HTML5 Doctypes

<!DOCTYPE HTML>

Trang 12

Organization / Structure

HTML helps you think about the

DESIGN

Trang 13

html page structure

A typical HTML page will

use divs with IDs and

Classes to create the

structure.

div id=header

div id=footer

div id= sidebar div id=content

div id=nav

Trang 14

HTML5 page structure

HTML5 gives semantic

meaning to these structures,

which previously required

IDs and Classes.

header

footer

aside section/article

Trang 15

Pro tip: Update your reset.css

article, aside, footer, header,

hgroup, nav, section

{display:block; margin:0; padding: 0; border:0; font-‐weight:inherit; font-‐style:inherit; font-‐size:

100%; font-‐family:inherit;

vertical-‐align:baseline; list-‐

style:none; outline:none}

Trang 16

Pro tip: Update your reset.css

article, aside, footer, header,

hgroup, nav, section

{ display:block; margin:0; padding: 0; border:0; font-‐weight:inherit; font-‐style:inherit; font-‐size:

100%; font-‐family:inherit;

vertical-‐align:baseline; list-‐

style:none; outline:none}

Trang 17

html5 Recursiveness

HTML5 allows for multiple

sections and articles within

a single page Each section/

article can have its own

header, footer, aside and

nav

footer

aside section

header nav

header

footer article

Trang 18

html5 Recursiveness

nav

footer

aside section

header nav

header

footer article

Trang 19

html5 Recursiveness

nav

footer

aside section

header nav

header

article

footer

Trang 20

What about the problem child?

IE needs a little help from

our friend JavaScript.

Trang 21

Pro tip: Smack IE Into Shape

<![endif]-‐-‐>

</head>

Trang 25

Pro tip: HTML5 Search Input

Trang 26

HTML5 Registration Form

<form>

<input name="Full Name"

placeholder="Enter your full name"

autofocus required >

<input type="email" name="Email"

placeholder="Enter your email address" required >

<input type="url" name="URL"

placeholder="What’s your website

address?" >

</form>

Trang 27

Email URL

Trang 28

Gettin’ Sexy with CSS3

It’s the New Photoshop

Trang 29

Fancy Button

.btn-‐fancy {}

Trang 30

Border Radius

border-‐radius: 6px; -‐moz-‐border-‐radius:

6px; -‐webkit-‐border-‐radius: 6px;

Fancy Button

Trang 32

TExt Shadow

text-‐shadow: 1px 1px 0 #d2572b;}

Fancy Button

Trang 33

Background Gradient

background :-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop (0.55, #e67646), to(#d2572b));

background :-‐moz-‐linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b);

Fancy Button

Trang 34

Anatomy of a CSS3 Button

.btn-‐primary {padding: .5em .9em; background:

0%, 0% 100%, from(#eb9972), color-‐stop(0.55,

#e67646), to(#d2572b)); background:-‐moz-‐linear-‐

gradient(center top, #eb9972, #e67646 55%,

#d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐

border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐

box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐

weight: 500; color: #fff; text-‐shadow: 1px 1px 0

#d2572b;}

Trang 35

#e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55,

#d2572b;}

Trang 36

border-‐radius:6px; border-‐radius:6px; border:1px

#d2572b;}

Trang 37

#d2572b;}

Trang 38

CSS3 RGBA and Opacity

rgba (238,88,0,1.0);

#d2572b; opacity:1.0;

rgba (238,88,0,0.5);

#d2572b; opacity:0.5;

Trang 40

Hit me with some jQuery!

Trang 41

Simple JavaScript Function

Trang 42

Double Time

$('#CommentForm').hide();

Trang 43

http://www.w3.org/TR/html5/

http://www.w3.org/Style/CSS/current-‐work.en.html http://html5shiv.googlecode.com/svn/trunk/html5.js http://modernizr.com/

Trang 44

on The Twitters

http://bit.ly/protobk

Tiêu đề	Prototyping
Tác giả	Todd Zaki Warfel
Trường học	UX London
Thể loại	Hướng dẫn
Năm xuất bản	2025

Định dạng
Số trang	44
Dung lượng	1,13 MB