Latimea siteurilor traditionale (css)

Facebook.com	981px (fixed)
Linkedin.com	980px (fixed)
Ebay.com (listing)	760px - 1200px (liquid)
Amazon.com	980px - 100% (liquid)
Mobile.de (fixed)	978px (fixed)
Bmw.de (fixed) (left aligned)	1024px (fixed)
Mercedes-benz.de (left aligned)	1000px (fixed)
Gsmarena.com	1002px (fixed)
Nytimes.com	972px (fixed)

Transitions and transformations with css3 and jquery fallback for ie

.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
 -moz-transform: rotate(315deg) scale(0.5);
 -o-transform: rotate(315deg) scale(0.5); 
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
 transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in; 
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}

.home-section img{
-webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 -ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}

For IE 9:

 <!--[if lte IE 9]>
  <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<script type="text/javascript" src="jquery-css-transform.js"></script>

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">

</script>

<script type="text/javascript">

$().ready(function() {
$('.home-section').hover(function () {								   
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {								   
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});			
	</script>
   <![endif]-->

Where to find jquery-animate-css-rotate-scale.js :
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!

More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/

Browser specific hacks - css filters

Webkit only css hack (safari, chrome):

@media screen and (-webkit-min-device-pixel-ratio:0) {

body{ background:red}

}

Firefox only css hack:

@-moz-document url-prefix() {

body{ background:green}

}

Opera only css hack:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

       body {background:orange}

 }

IE only css hack:

body {  
 background : green\9; /* IE9,IE8 and below */  
 *background : yellow; /* IE7 and below */  
 _background : orange; /* IE6 */  
}

More:
 http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

HTML 5 - Short Introduction

HTML5 Edition for Web Authors

http://dev.w3.org/html5/spec-author-view/
(Editor's Draft 22 January 2011)

Introduction

With the creation of the W3C, HTML's development changed venue. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML4 followed, reaching completion in 1998.

At this time, the W3C membership decided to stop evolving HTML and instead begin work on an XML-based equivalent, called XHTML. This effort started with a reformulation of HTML4 in XML, known as XHTML 1.0, which added no new features except the new serialization, and which was completed in 2000.

Around the time that HTML's evolution was stopped in 1998, parts of the API for HTML developed by browser vendors were specified and published under the name DOM Level 1 (in 1998) and DOM Level 2 Core and DOM Level 2 HTML (starting in 2000 and culminating in 2003).

The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004, where some of the principles that underlie the HTML5 work (described below), were presented to the W3C jointly by Mozilla and Opera.

Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specification. The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations, and that specifications need to be detailed enough that implementations can achieve complete interoperability without reverse-engineering each other.

The latter requirement in particular required that the scope of the HTML5 specification include what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also meant including significantly more detail than had previously been considered the norm.

In 2006, the W3C indicated an interest to participate in the development of HTML5 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 specification.

Since then, both groups have been working together. :) Happy end.

Basic HTML sample

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>

<p>This is a <a href="demo.html">simple</a> sample.</p>

</body>
</html>

HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS.

La granita intre HTML si Illustrator / intre text si imagine

Am plecat de la ideea de a desena o harta a Europei cu tarile in care am facut turism pana acum (in scop stimulativ). Si tot cautand pe google o harta buna, am ajuns la ideea: "de ce nu o harta vectoriala ?".

Instant am gasit linkul utilului wikipedia:

http://commons.wikimedia.org/wiki/File:Blank_map_europe.svg

Si dupa putina stilizare, stergand stilurile inline (la fel ca intr-un html obisnuit) si scriind urmatorul randulet:



#at,#ro,#it,#cy,#hu,#si,#hr,#sr,#bg,#es,#de,#ch {fill:#956}

Gata si harta:

Aici veti gasi o simpla poza, pentru ca nu pot uploda sau insera un SVG atat de complex in blogger (cu cateva clickuri beninteles).

Unelte diverse:

http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html - aplicatie pentru a converti svguri in canvasuri (html5)

http://uvdiv.blogspot.com/2009/08/how-to-create-svg-graphics-in-blogger.html - exemplu de inserare svg in html prin crearea ''on the fly" cu js

mineaeliza: { web design }