Jorge Pedret » html5 http://jorgepedret.com Freelance Web Developer + Front End Designer Wed, 16 May 2012 21:32:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Code Kick Off: Kick Off your new web project http://jorgepedret.com/tools/code-kick-off-kick-off-your-new-web-project/ http://jorgepedret.com/tools/code-kick-off-kick-off-your-new-web-project/#comments Wed, 16 Feb 2011 23:16:35 +0000 Jorge Pedret http://jorgepedret.com/?p=225 Two days ago we launched Code Kick Off and we’re happy to see a strong response from our first testing users. :-)

What is Code Kick Off?

Code Kick Off is an application that lets you choose from the most popular web technologies and combine them together in one read-to-go project. For the first release we let you choose from:

HTML5 Boilerplate

Compass

CSS Grids

We’re including 4 different grid systems:

WordPress

Tell us what you think!

Go take a look at Code Kick Off! We wanna hear from you, give us a shout on Twitter!

]]> http://jorgepedret.com/tools/code-kick-off-kick-off-your-new-web-project/feed/ 0 CSS won’t style my HTML5 markup in Internet Explorer! http://jorgepedret.com/web-development/html5-web-development/css-wont-style-my-html5-markup-in-internet-explorer/ http://jorgepedret.com/web-development/html5-web-development/css-wont-style-my-html5-markup-in-internet-explorer/#comments Tue, 06 Jul 2010 02:34:44 +0000 Jorge Pedret http://jorgepedret.com/?p=169 You built your whole website using html5 new shiny tags, you’re so proud of yourself, it looks great in your development browser!!

It’s finally time to give it a test in Internet Explorer, let’s see how it looks like…

WHAT??? That looks a lot worst than I was expecting… What the heck is going on?

You try changing your css, but explorer doesn’t change at all… You verify if you’re actually working on the right file, and yes in deed, you are. You try to add some basic css properties, but again, it doesn’t change a bit. The problem is…

Internet Explorer completely ignores html5 new tags

OMG! Until when this stupid browser is going to give me head aches – you say out loud.

At this point you have two options:

  1. Change your entire markup and css to use old tags
  2. Use Remy Sharp’s fix. The only downsize: It completely depends on Javascript

IE simply ignores all the elements it doesn’t recognize, regardless of CSS. By using javascript’s function document.createElement(), we iterate through the markup and recreate all the tags that are not recognized by IE.

Quick copy/paste solution

Here is the code taken directly from Remy’s site:

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I’m thinking it might be a good idea to condition the code to IE versions lower than 8, since IE9 will have html5 support and it might be coming soon, but that’s up to you:

<!--[if lte IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I feel stupid for not being aware and for not testing earlier in IE. It took me a while to figure out what was going on.

Get more information from this sites:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
http://remysharp.com/2009/01/07/html5-enabling-script/

]]> http://jorgepedret.com/web-development/html5-web-development/css-wont-style-my-html5-markup-in-internet-explorer/feed/ 0 HTML5 – What you really need to know http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/ http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/#comments Sun, 18 Apr 2010 23:53:09 +0000 Jorge Pedret http://jorgepedret.com/?p=125 This is a quick reference for those designers & developers who just want the facts.

What’s new?

DOCTYPE

<!-- Before -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Now -->
<!DOCTYPE html>

Most browsers will parse documents with that doctype as html5. That simple :-)

CHARSET

<!-- Before -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Now -->
<meta charset=utf-8 />

What was removed?

This tags are no longer valid in html5

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>

Frames were removed as well.

<frame />
<frameset>
<noframes >

Obsolete tags were taken out of html5 as well:

<acronym>
<!-- Use abbr instead -->
<applet>
<!-- Obsoleted in favor of object -->
<isindex>
<!-- Replaced by usage of form controls -->
<dir>
<!-- Obsoleted in favor of ul -->

Tag’s attributes referring to visual characteristics were removed as well. Just to mention some:

align, background, bgcolor, border, clear, height

What changed?

<a>
<!-- Now it can contain block elements. Hurray! -->
<b>
<!-- Now represents text whose typical typographic presentation is emboldened -->
<hr />
<!-- Now reprensents a thematic break in paragraph-level -->
<i>
<!-- Now represents text in an alternate voice or mood -->
<menu>
<!-- Has been redefined to be usefull for toolbars and context menues -->
<small>
<!-- Is now used to represent small print in documents, generally for legal purposes -->
<b>
<!-- Now represents importance instead of strong emphasis -->

New stuff, the exiting part!

A bunch of new tags have been created to satisfy the common needs that HTML coders find everyday.

<section>
<!-- Generic document or application section -->
<article>
<!-- INDEPENDENT piece of content of a document. E.g: Blog entry, newspaper article -->
<aside>
<!-- Content slightly related to the rest of the page. *cough* side bars *cough* -->
<hgroup>
<!-- Header of a section. E.g: To include title and subtitle, or company name and slogan type of thing -->
<header>
<!-- Group of Introductory or navigational aids. Doesn't necessarily needs to be at the top of the document, it can be the header of a section of the page -->
<footer>
<!-- Footer for a section. Can contain information about the author, copyright, etc. -->
<nav>
<!-- Section of document intended for navigation. -->
<figure>
<!-- Associate a caption with some embedded content, such as graphic or video. -->
<figcaption>
<!-- Provides caption for the previous tag's embedded content -->
<video>
<!-- Video and audio multimedia content. Very exciting tag :-)  -->
<mark>
<!-- Run of marked text. E.g: Can be used for marking keywords of a search in a long text -->
<progress>
<!-- Represents a completion of a task. E.g: Downloading, performing series of expensive operations -->
<meter>
<!-- Represents a measurement, such as disk usage. -->
<time>
<!-- Represents a date and/or time. Very exciting tag :-)  -->
<canvas>
<!-- Rendering dynamic bitmap graphics on the fly. Very exciting tag -->
<command>
<!-- Represents a command the user can invoke -->
<details>
<!-- Additional information or controls which user can obtain on demand -->
<datalist>
<!-- Used for creating a list of options for the new 'select' tag. -->
<keygen>
<!-- Control for key pair generation. -->
<output>
<!-- Represents some type of output. E.g: Calculation result -->

Input tag‘s type attribute now has the following values:

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Depending on the device or browser used, this can prompt change the way to input the value. For example, if browsing from an iPhone, the datetime value promts the native way for the iPhone to choose a date+time.

The type attribute can also be used for automatic browser native validation purposes.

For more details on form changes, take a look at http://diveintohtml5.org/forms.html

Visit: http://www.w3.org/TR/html5-diff/#new-attributes for more new attributes in html5 that you need to know about.

New html5 API’s

Other than tags, html5 implements a bunch of new API’s (think of it like javascript libraries) that will help you develop better applications in a faster way.

  • Video & Audio: API for playing of video and audio; it can be used with the new video and audio elements.
  • Offline Apps: An API that enables offline Web applications.
  • Editable Content: API for editing inline content; use it with the new global contenteditable attribute.
  • Drag & Drop: API for drag & drop elements; use in combination with a draggable attribute.
  • History: API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Geolocation: API that provides scripted access to geographical location of the device that’s browsing the site
  • Local Storage: API for persistent data storage of key-value pair data in Web clients (how exciting is that!?)

Examples:

Check out html5 examples here http://html5demos.com/ they have everything and more of what I’ve said here and it’ll also tell you the current browser support.

]]> http://jorgepedret.com/web-development/html5-what-you-really-need-to-know/feed/ 0