wp_enqueue_script('jquery');
Month: February 2011
CSS center stuff with dynamic width
It is not as simple as display: auto, but still pretty simple:
http://solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css
Just in case the source is taken out:
<div> <div> My Content </div> </div>
.centered{ margin-left: auto; margin-right: auto; display: table; }
Web optimization checklist
1) If you are using a js library, like jquery, make sure to download it from the Google CDN instead of from your own server (to save bandwidth, have better response, and the chance the user already have it cached on his / her browser.
HTML role attributes
Introduced as part of XHTML, they mark the functionality or orientation of a give content. Used by WAI-ARIA capable screen readers to deduct content from the page. Example:
<div role=”banner”>This is my banner</div>
This is supposed to be more semantic than <div class=”banner”>
There are a bunch of roles that can be used (you can’t make them up):
banner
- This is a region that contains the prime heading or internal title of a page. Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes elements such as the logo of the site sponsor, the main heading for the page, and the site-specific search tool. This typically appears at the top of the page, spanning the full width.
complementary
- This is any section of the document that supports but is separable from the main content, yet is semantically meaningful on its own even when separated. There are various types of content that conform to this role. For example, take the case of a portal—this may include but not be limited to show times, current weather, related articles, or stocks to watch. The content should be relevant to the main content; if it is completely separable, a more general role should be favored.
contentinfo
- This is meta information about the content on the page, or the page as a whole. For example, footnotes, copyrights, links to privacy statements, and suchlike would belong here.
main
- As the name suggests, this is the main content in a document. It marks the content that is directly related to or expands upon the central topic of the page.
navigation
- This refers to the collection of links suitable for use when navigating the document or related documents.
note
- This denotes content parenthetic or ancillary to the main content of the resource.
search
- The search tool of a web document, this is typically a form used to submit search requests about the site or to a more general internet search service.
A quick glance at these values shows considerable overlap between many of the new HTML5 elements; the banner
role and header
element, complementary
role and aside
element, navigation
role and nav
element, all seem very closely related. Indeed, the complementary
and note
roles in combination cover the purpose of the aside
element. We saw that the aside
element has been stretched to include two quite different purposes; arguably having two separate roles (or elements, in HTML5 ) would make more sense.
The main
role also arguably provides a purpose for which HTML5 does not have an element—the main content block of a page.
Now, unlike with class
or id
, you can’t simply invent your own role values. It is possible to define your own role values formally, though in most instances this will be of no practical value as browsers and other software won’t have any idea of what to do with it, and in any case it’s beyond the scope of this course. However, as you might have guessed, ARIA defines a number of additional values in addition to the standard role values defined in XHTML 1.1. ARIA roles can be quite complex, so let’s focus on some of the most immediately useful ones. Note also that simply adding a role
value to an element (for example, role="button"
to a span
element) doesn’t make that element a button. Rather, role
is for describing the purpose for which you are using the element. It’s up to the developer to make the span behave like a button.
ARIA defines several types of role
, among these widget roles (we saw earlier that a widget is what ARIA calls controls), landmark roles (regions of the page intended as navigational landmarks) and document structure roles (structures that organize content in a page). Next up, let’s run through a quick overview of the most common ARIA roles.
Widget roles include:
alert
alertdialog
checkbox
combobox
dialog
menuitem
menuitemcheckbox
menuitemradio
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
Optimizing for mobile screens
HTML5 template
HTML coding in general:
1) Divide semantic or meaningful parts of your website in containers. Everything must have a container as a logical section.
2) Use your containers (divs, or see HTML5 below for other tags) to apply padding, and margin separation between sections. Also, use them for borders and drop shadow effects.
HTML5 specific:
1)The hgroup surrounds header elements (say, the h1 and any other h2 or h3s underneath it) and when a outline algorithm hits the page, it just shows the h1 element of it. Each hgroup can contain an h1, so in theory, if you are using hgroups, it should be “ok” to have several h1’s in your page. Note: this element has been removed from the HTML5! Browsers will probably regard it as an unknown element, but most likely it won’t validate.
2) Notice how the bottom navigation links are not marked with the <nav> tag, this is explicitly recommended in the HTML draft document, leaving <nav> for more important parts of the document, and making <footer> sufficient enough to tell these are just generic links.
3) <main> is the newest addition to the html5 family. It basically encompass your main content, so you avoid doing stuff like <div class=”main”> or <div id=”main”>. Not a lot of browser support as of 2/16/2013, but you can just add a temp CSS patch to make sure it works as expected:
main{
display: block;
}
4) <section> is a related group of content in a document, the <div> tag was used before to enclose this, but section is more generic, and it can contain sections within sections. If you just want to style a group of HTML elements, don’t use a section (which is more like a sub-part of an article), but throw a div in the mix instead.
5) <article> is a piece of the document that can be used as a standalone piece of content, reusable if taken independently from the page content. If you can put that piece as a blob in an RSS feed, it is a good candidate for an article, if in doubt, make it a section. Articles usually contain several sections, not the other way around.
6) <aside> is for a piece of content that relates to the page content (or to the page article) tangentially.
7) Published <time datetime="2010-06-15T11:00" pubdate>June 15 2010</time> is used to mark up dates and times. The datetime part is machine readable, the pubdate, if there, signifies this article's (or whatever is this contained in) publication date.
8)<figure> is used to encapsulate images and captions. It usually contains a <figcaption> tag, which describes what the <figure> image is about
9) <mark> used to highlight content
10) The attribute “role” is used to mark what kind of content the specific DOM element has. For example:
<nav role=”navigation”>
<ul> <li><a href=”#”>Why?</a></li>
<li><a href=”#”>Synopsis</a></li>
</ul>
</nav>
This will be used to indicate that the
Here are other roles and their description:
– application: This role is used to specify a region used for a web application.
– banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
– complementary: This role is used to specify an area complementary to the main section of a page.
– contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
– form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
– main: This role is used to specify the main content of the page.
– navigation: This role is used to specify navigation links for the current document or related documents.search: This role is used to define an area that performs a search.
EXAMPLE OF A PAGE WRITTEN IN HTML%:
<!doctype html>
<head> <meta charset=”utf-8″> <!– Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess –> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> <title></title> <meta name=”description” content=””> <meta name=”author” content=””>
</head>
<body>
<header>
<hgroup><h1>Web Directions USA</h1>
<h2>The Web Industry Conference</h2></hgroup>
<p>September 21-25</p>
<p>Midtown Atlanta</p>
<p>Register before August 15 and save $100!</p>
<nav> <ul> <li>Skip to the content</li> <li>Home</li> <li>Program</li> <li>Workshops</li> <li>Sponsor</li> <li>Expo</li> <li>Venue</li> <li>Pricing</li> <li>Contact</li> <li>Register now!</li> </ul> </nav> <nav> <ul> <li>Design Track</li> <li>Development Track</li> <li>Keynotes</li> <li>Networking</li> <li>Speakers</li> </ul> </nav></header>
<section><h2>Design Track</h2>
<p>Dan Rubin gets creative with CSS3 and HTML5; Juliette Melton runs effective remote research; Aaron Walter gets all emotional about design; Esther Derby introduces agile to UI; Ryan Freitas balances data-driven and genius design; Zoe Mickley Gillenwater streamlines sites with CSS3 and Jason Cranford Teague celebrates the year of web typography.</p><p>Agile Meets UI</p></section>
<article><hgroup><header><h2>HOW TO INCORPORATE UI & UX INTO AN AGILE PROCESS</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Stephanie (Sullivan) Rewis </figcaption></figure></hgroup>Agile teams work in short iterations and deliver working software that means coded, tested, documented, and if the customer decides the time is right, ready to go out the door. Teams work on features in tiny slices based on prioritized user stories, avoiding big up front design. But without a design phase, where does UX and UI fit?Esther will share strategies for evolving UI design as the software grows, keeping UI designers in the loop and helping everyone on the team be a better designer (cause they think already are).Learning to Love Humans: Emotional Interface Design</article><article><hgroup><header><h2>BOW DOWN TO THE MACHINE NO LONGER!</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Aarron Walter</figcaption></figure></hgroup>Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand.In this talk, Aarron Walter will introduce you to the emotional usability principle a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.Creativity, Design and Interaction with HTML5 and CSS3</article>
<section>SEARCH</section>
<section>LOEWS ATLANTA HOTELSpecial offer: stay at the conference venue for just $179 per night that’s $100 off!</section>
<section>STAY IN TOUCH Twitter: @webdirections See what all the speakers have to say on Twitter Track the latest Web Directions news (RSS)</section> <section>DOWNLOAD OUR ONE-PAGERNeed to convince the person who writes the checks? Grab our ready to print one-pager.</section>
<section>FROM OUR ATTENDEES One of the best organised and most informative conferences in the digital arena I’ve been to.PAUL MCCARTHY, NSW DEPT OF COMMERCE</section>
<section> BROUGHT TO YOU BY
OUR EXHIBITORS OUR SPONSORS CHAMPIONS OUR COMMUNITY PARTNERS<section> <footer> <h3>ABOUT WEB DIRECTIONS</h3> Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and Read more <h3>SIGNUP TO THE NEWSLETTER</h3> Drop in your email address and stay up to date with the latest. Name: Email: <h3>SUBSCRIBE</h3> <p>Web Directions Pty Ltd. ABN: 20 118 802 118. All rights reserved.</p> News Feed (RSS) | Podcast | Terms and Conditions | Privacy Policy</footer>
</body>
</html>
If you have doubts about what tag to choose, see the image below (original coming from http://html5doctor.com/downloads/h5d-sectioning-flowchart.png )
And, a list that gets updated with the tags that are supported by HTML5:
http://www.w3schools.com/tags/default.asp
Linux search
# looking for an specific file name find / -name foo
# looking for a string inside a file, excluding certain files:
grep –exclude=*.log -rnw ‘.’ -e “the_string_you_are_searching_here”
This is basically the software representation of a given map of language characters. The English language, not having lots of different letters, can be represented by 8 byte construct, which give you about 256 characters. Enough to cover all the letters and punctuation signs. Most browsers and computer systems would default to this if not specified.
In HTML4, it is specified as:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In HTML5, the specification is:
<meta charset="utf-8">
In IE7 or older IE browsers, you won’t be able to target CSS rules to HTML5 elements, like this:
section {color: red}
Instead though, you can use the following weird code:
[section] {color: red}<section section="true">It was a dark and stormy night</section>