Catchy web pages via Wordpress

HTML5 + W d Pr e s s
or
Gl oba l I nf or ma t i on I nt e r ns hi p Pr ogr a m
f r om BUDNET

www. budne t de s i gn. c om

W i s t hi s Guy Anywa y?
ho
• 12+ ye a r s HTM CSS/ J a va Sc r i pt .
L/
M j ob s i nc e 1999.
y
• W dPr e s s s i nc e 2005. La unc he d
or
a t on of s i t e s . Cur r e nt l y
ma na ge 6.
• For t he ne xt 5 da ys : Pr i nc i pa l
Pr e s e nt a t i on Engi ne e r a t Cr a me r
• Ne xt W e k: M e c ul a r
e ol
• PAST: Advi s or Te c h, Compe t e , De ma ndwa r e , The W e kl y Di g,
e
Gi l l e t t e , M e um of Sc i e nc e , Bos t on, PC Conne c t i on, St a t e
us
St r e e t , W be x
e

I nt r oduc t i on t o HTML5
HTM L5 i s a l ot of t hi ngs -
– Ongoi ng. Thi s i s a movi ng t a r ge t .
The s pe c c a n c ha nge unde r ne a t h you.
Thi s c a n be f un, I s we a r . I t a l s o
me a ns t he r e ’ s not a l wa ys a n answ . er
Tha t , t oo, c a n be f un.
– Oc c a s i ona l l y c ont r ove r s i a l .
– Ful l of c ool s t uf f t ha t ’ s got bot h
br ows e r a nd we b de ve l ope r s e xc i t e d
– Some t hi ng t o pa y a t t e nt i on t o/
e xpe r i me nt wi t h/ di s c us s a nd gi ve
f e e dba c k on ( whi c h i s why we ’ r e he r e
t oda y)

W t Ar e W Goi ng To Ta l k
ha e
About
M r ki ng up a s t a nda r d W dPr e s s bl og
a or
us i ng s ome of t he ne w, s e ma nt i c
e l e me nt s / a t t r i but e s . Thi s i s a s ubs e t of
t he s pe c t ha t ’ s r e l a t i ve l y s t a bl e a nd i s
us a bl e r i ght now. W ’ l l us e a s ma l l bi t
e
of J a va Sc r i pt or t he M ode r ni z r l i br a r y t o
ma ke s t yl i ng t he s e e l e me nt s wor k i n
I nt e r ne t Expl or e r .

Swe e t .

M e t t he Ne w Se ma nt i c
e
El e me nt s

<section>
The s e c t i on e l e me nt r e pr e s e nt s a ge ne r i c
doc ume nt or a ppl i c a t i on s e c t i on. A
s e c t i on, i n t hi s c ont e xt , i s a t he ma t i c
gr oupi ng of c ont e nt , t ypi c a l l y wi t h a
he a di ng. Exa mpl e s of s e c t i ons woul d be
c ha pt e r s , t he va r i ous t a bbe d pa ge s i n a
t a bbe d di a l og box, or t he numbe r e d
s e c t i ons of a t he s i s . A W b s i t e ' s home
e
pa ge c oul d be s pl i t i nt o s e c t i ons f or a n
i nt r oduc t i on, ne ws i t e ms , c ont a c t

e
El e me nt s

<nav>
The na v e l e me nt r e pr e s e nt s a s e c t i on of a
pa ge t ha t l i nks t o ot he r pa ge s or t o pa r t s
wi t hi n t he pa ge : a s e c t i on wi t h na vi ga t i on
l i nks . Not a l l gr oups of l i nks on a pa ge
ne e d t o be i n a na v e l e me nt — onl y
s e c t i ons t ha t c ons i s t of ma j or na vi ga t i on
bl oc ks a r e a ppr opr i a t e f or t he na v
e l e me nt . I n pa r t i c ul a r , i t i s c ommon f or
f oot e r s t o ha ve a s hor t l i s t of l i nks t o
va r i ous pa ge s of a s i t e , s uc h a s t he t e r ms

e
El e me nt s

<article>
The a r t i c l e e l e me nt r e pr e s e nt s a c ompone nt
of a pa ge t ha t c ons i s t s of a s e l f -
c ont a i ne d c ompos i t i on i n a doc ume nt , pa ge ,
a ppl i c a t i on, or s i t e a nd t ha t i s i nt e nde d
t o be i nde pe nde nt l y di s t r i but a bl e or
r e us a bl e , e . g. i n s yndi c a t i on. Thi s c oul d
be a f or um pos t , a ma ga z i ne or ne ws pa pe r
a r t i c l e , a W b l og e nt r y, a us e r - s ubmi t t e d
e
c omme nt , a n i nt e r a c t i ve wi dge t or ga dge t ,
or a ny ot he r i nde pe nde nt i t e m of c ont e nt .

e
El e me nt s

<aside>
The a s i de e l e me nt r e pr e s e nt s a s e c t i on of
a pa ge t ha t c ons i s t s of c ont e nt t ha t i s
t a nge nt i a l l y r e l a t e d t o t he c ont e nt a r ound
t he a s i de e l e me nt , a nd whi c h c oul d be
c ons i de r e d s e pa r a t e f r om t ha t c ont e nt .
Suc h s e c t i ons a r e of t e n r e pr e s e nt e d a s
s i de ba r s i n pr i nt e d t ypogr a phy. The
e l e me nt c a n be us e d f or t ypogr a phi c a l
e f f e c t s l i ke pul l quot e s or s i de ba r s , f or
a dve r t i s i ng, f or gr oups of na v e l e me nt s ,

e
El e me nt s

<hgroup>
The hgr oup e l e me nt r e pr e s e nt s t he he a di ng
of a s e c t i on. The e l e me nt i s us e d t o gr oup
a s e t of h1–h6 e l e me nt s whe n t he he a di ng
ha s mul t i pl e l e ve l s , s uc h a s s ubhe a di ngs ,
a l t e r na t i ve t i t l e s , or t a gl i ne s .

“ Ju s t a n o t he r wo r d p r e s s we b l o g ”

e
El e me nt s

<header>
The he a de r e l e me nt r e pr e s e nt s a gr oup of
i nt r oduc t or y or na vi ga t i ona l a i ds . A
he a de r e l e me nt i s i nt e nde d t o us ua l l y
c ont a i n t he s e c t i on’ s he a di ng ( a n h1–h6
e l e me nt or a n hgr oup e l e me nt ) , but t hi s i s
not r e qui r e d. The he a de r e l e me nt c a n a l s o
be us e d t o wr a p a s e c t i on’ s t a bl e of
c ont e nt s , a s e a r c h f or m, or a ny r e l e va nt
l ogos .

e
El e me nt s

<footer>
The f oot e r e l e me nt r e pr e s e nt s a f oot e r f or
i t s ne a r e s t a nc e s t or s e c t i oni ng c ont e nt or
s e c t i oni ng r oot e l e me nt . A f oot e r
t ypi c a l l y c ont a i ns i nf or ma t i on a bout i t s
s e c t i on s uc h a s who wr ot e i t , l i nks t o
r e l a t e d doc ume nt s , c opyr i ght da t a , a nd t he
l i ke . Foot e r s don’ t ne c e s s a r i l y ha ve t o
a ppe a r a t t he e nd of a s e c t i on, t hough
t he y us ua l l y do. W n t he f oot e r e l e me nt
he
c ont a i ns e nt i r e s e c t i ons , t he y r e pr e s e nt

e
El e me nt s

<time>
The t i me e l e me nt r e pr e s e nt s e i t he r a t i me
on a 24 hour c l oc k, or a pr e c i s e da t e i n
t he pr ol e pt i c Gr e gor i a n c a l e nda r ,
opt i ona l l y wi t h a t i me a nd a t i me - z one
of f s e t .

e
El e me nt s
<form> <input> attributes
Pl a c e hol de r Te xt / Se a r c h Boxe s
<input type="search" placeholder=“Search Example.com" name="s" id="s" />

Ema i l Addr e s s e s
<input type="email" class="text-input" name="email" id="email" value=""
size="22" tabindex="2" aria-required='true' />

W b Addr e s s e s
e
<input type="url" class="text-input" name="url" id="url" value=""
size="22“ tabindex="3" />

I s n’ t Al l Tha t Ne w St uf f
J us t About Pe r f e c t f or
M r ki ng up a Bl og?
a

He c k ye s .

he a de r . php
<?php
/**
* @package WordPress
* @subpackage Kubrick_x_HTML5
*/
?>
<!DOCTYPE html>

<html <?php language_attributes(); ?>>


<head profile="http://gmpg.org/xfn/11">

<meta charset="<?php bloginfo('charset'); ?>" />

<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<script type="text/javascript">
var elem;
var elems = 'abbr article aside audio canvas datalist details eventsource figure footer header hgroup mark menu
meter nav output progress section time video'.split(' ');
var i = elems.length+1;
while ( --i ) {
elem = document.createElement( elems[i] );
}
elem = null;
</script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Default/Kubrick (part 1)

he a de r . php
<style media="screen">
<?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php
bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top;
border: none; }
<?php } ?>

</style>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">


<header id="header" >
<hgroup id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2 class="description"><?php bloginfo('description'); ?></h2>
</hgroup>
</header>
<hr />

Default/Kubrick (part 2)

he a de r . php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class=“no-js”>
<title>
<?php if ( is_front_page() ) {bloginfo('name');?> | Fresh Ideas Caught and Served <?php } else {;?>
<?php bloginfo('name');?> |
<?php if($post->post_parent) {
$parent_title = get_the_title($post->post_parent);
echo $parent_title;?>
–
<?php }?>
<?php wp_title(''); ?>
<?php } ?>
</title>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php echo get_post_meta($post->ID, "meta-description", "true"); ?>" />
<link rel="shortcut icon" href="http://static.crameronline.com/_assets/images/favicon.ico"/>
<script type="text/javascript">
var ___baseURL ="<?php bloginfo('template_directory'); ?>";
</script>
<!—one file, which contains Modernizr 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/_assets/scripts/b.c.js"></script>

AwiderNet.com

Vi e w Sour c e
<html lang="en-US" dir="ltr" class="js canvas canvastext
geolocation rgba hsla no-multiplebgs borderimage borderradius
boxshadow opacity no-cssanimations csscolumns no-cssgradients
no-cssreflections csstransforms no-csstransforms3d no-
csstransitions video audio fontface">
<!– such is the power of modernizr 
<title>A Wider Net | Fresh Ideas Caught and Served </title>
<meta charset="UTF-8">

AwiderNet.com

i nde x. php
<?php
/**
*/
get_header(); ?>
<div id="content" class="narrowcolumn" >
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?
>"><?php the_title(); ?></a></h1>
<time datetime="<?php the_time('c') ?>" pubdate="pubdate"><?php the_time('F jS, Y') ?></time>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »');
?></p>
</article>
<?php endwhile; ?>
<nav class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</nav>
<?php else : ?>
<h1 class="center">Not Found</h1>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Default/Kubrick

Vi e w Sour c e
s<article id="post-3" class="post-3 post hentry category-uncategorized">
<h1><a title="Permanent Link to This Is an HTML5ized Version of the Default Wordpress Theme" rel="bookmark"
href="http://htmlcssjavascript.com/dev/?p=3">This Is an HTML5ized Version of the Default Wordpress Theme</a></h1>
<time pubdate="pubdate" datetime="2010-01-17T21:52:52+00:00">January 17th, 2010</time>
<div class="entry">
<p>Source Code and discussion.</p>
</div>
<p class="postmetadata"> Posted in <a rel="category" title="View all posts in Uncategorized"
href="http://htmlcssjavascript.com/dev/?cat=1">Uncategorized</a> | <a title="Edit post" href="http://htmlcssjavascript.com/dev/wp-
admin/post.php?action=edit&post=3" class="post-edit-link">Edit</a> | <a title="Comment on This Is an HTML5ized Version of the
Default Wordpress Theme" href="http://htmlcssjavascript.com/dev/?p=3#respond">No Comments »</a></p>
</article>

Default/Kubrick

s i de ba r . php
<?php
/**
*/
?>
<aside id="sidebar" >
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

</li>
<?php }?>
</ul>
<nav>
<ul>
<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>
</ul>
</nav>
<ul>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>
<li><h2>Meta</h2>

</li>
<?php } ?>
<?php endif; ?>
</ul>
</aside>

Default/Kubrick

s e a r c hf or m. php
<?php
/**
*/
?>
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>" >
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="search" placeholder="Search <?php
bloginfo('blogtitle'); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Default/Kubrick

c omme nt s . php
<?php
// snip!
?>
<?php if ( comments_open() ) : ?>
<div id="comment-form">
<h2><?php comment_form_title( 'Leave a comment', 'Leave a Reply to %s' ); ?></h2>
<div class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?
></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label><input type="text"
class="text-input" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req)
echo "aria-required='true'"; ?> />
</p>
<p><label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?
></small></label><input type="email" class="text-input" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>"
size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /></p>
<p><label for="url"><small>Website</small></label><input type="url" class="text-input" name="url" id="url" value="<?
php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
</p>
<?php endif; ?>
<p><label for="comment"><small>Comments</small></label>
<textarea name="comment" cols="100%" rows="10" tabindex="4"></textarea>
</p>
<div class="button"><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" /></div>
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
<!—SNIP-

AWiderNet

f oot e r . php
<?php
/**
*/
?>
<hr />
<footer id="footer" >

<p>
<?php bloginfo('name'); ?> is proudly powered by
<a href="http://wordpress.org/">WordPress</a>
<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.

</p>
</footer>
</div>

<?php /* "Just what do you think you're doing Dave?" */ ?>
<?php wp_footer(); ?>
</body>
</html>

Default/Kubrick

W t ’ s t he Di f f ?
ha

footer.php

a r c hi ve s . php
<?php
/**
*/
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<div id="content" class="widecolumn">

<?php get_search_form(); ?>
<section>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</section>
<section>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</section>
</div>

<?php get_footer(); ?>

Kubrick/default

s t yl e . c s s
/*SNIP!*/
/* Begin Structure */
body {
margin: 0 0 20px 0;
padding: 0;
}
/*HTML5*/
footer, section, article, aside, header, time {
display:block;
}
#page {
background-color: white;
margin: 20px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}

#header
/*SNIP!*/

Kubrick/default

W t ’ s t he Di f f ?
ha

style.css

s t yl e . c s s
.borderradius.boxshadow.rgba #container #main article,
.borderradius.boxshadow.rgba #container #main #posts > .meta-data,
.borderradius.boxshadow.rgba #container #main #posts #no-results,
.borderradius.boxshadow.rgba #container #main #posts .author {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
background:#fff;
overflow: hidden;
}

AWiderNet

Thi ngs I Le a r ne d
The new outline algorithm is
a fickle master
Otherwise- not so bad.
Kubrick worked with almost
no browser specific
intervention in modern
browsers

M e I nf o
or

ht t p: / / www. budne t de s i gn. c om

Catchy web pages via Wordpress

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Catchy web pages via Wordpress

Similaire à Catchy web pages via Wordpress (20)

Dernier

Dernier (20)

Catchy web pages via Wordpress

Notes de l'éditeur