Getting Married: Opposites Attract – Why and How the ‘Hand and Glove’ Work Together Chapter 3.
sIFR Opposites Attract
-
Upload
james-phelps -
Category
Documents
-
view
223 -
download
0
Transcript of sIFR Opposites Attract
-
8/8/2019 sIFR Opposites Attract
1/39
sIFR Opposites Attract
ICKD 4February 29 th , 2008, Delft
Mark Wubben http://novemberborn.net/License: http://creativecommons.org/licenses/by-sa/3.0/nl/deed.en
sIFR is a prime example of how Flash and HTML can work together. Ill show you how you canimplement sIFR and how it uses some of the technologies Bob Corporaal just talked about.
But rst, a quick question. Whos familiar with sIFR? Or, perhaps, whos not familiar with sIFR?
Bobs slides: http://reefscape.net/presentations/ickd08/
http://creativecommons.org/licenses/by-sa/3.0/nl/deed.enhttp://creativecommons.org/licenses/by-sa/3.0/nl/deed.enhttp://novemberborn.net/http://novemberborn.net/ -
8/8/2019 sIFR Opposites Attract
2/39
A quick introduction of sIFR. It helps bring rich typography to todays web. In other words, it turnsboring typography
Photo by Ralph Aichinger http://ickr.com/photos/sooperkuh/358241806/
-
8/8/2019 sIFR Opposites Attract
3/39
into beautiful typography!
Photo by Aaron Feaver http://ickr.com/photos/feaverish/733663763/
-
8/8/2019 sIFR Opposites Attract
4/39
So how is this done? sIFR is a combination of HTML, CSS, JavaScript and Flash. It uses progressiveenhancement, so it only kicks in if the browser will support it and if the correct Flash version isinstalled. This means the HTML stays pure, great for search engines and accessibility! sIFR also playspretty well with screen readers.
Its open source, too, licensed under the CC-GNP LGPL.
Photo by Je ! Kubina http://ickr.com/photos/kubina/42275122/
-
8/8/2019 sIFR Opposites Attract
5/39
But of course, use with moderation.
Photo by Mark Wubben http://ickr.com/photos/novemberborn/256746937/
-
8/8/2019 sIFR Opposites Attract
6/39
Back in 2004, Shaun Inman came up with an innovative solution of doing typography on the web.
Photo by Jeremy Keith http://ickr.com/photos/adactio/99391890/
-
8/8/2019 sIFR Opposites Attract
7/39
This was spring 2004, and his solution came to be known as Inman Flash Replacement. The techniqueinserted Flash movies with a pre-dened size into the page, and the text rendered inside the Flashmovie.
Photo by Jeremy Keith http://ickr.com/photos/adactio/99391890/
-
8/8/2019 sIFR Opposites Attract
8/39
Summer came, and Mike Davidson and Tomas Jogin made IFR scalable. I saw this, was pretty bored anddecided to have a go at rewriting their code. From one thing came another, and so
http://www.mikeindustries.com/blog/archive/2004/08/sifr
Photo by Rex Sorgatz http://ickr.com/photos/moculous/246307803/
-
8/8/2019 sIFR Opposites Attract
9/39
me and Mike released sIFR 2 in the spring of 2005.
http://www.mikeindustries.com/blog/archive/2005/04/sifr-2.0-released
Photo by Rex Sorgatz http://ickr.com/photos/moculous/246307803/
-
8/8/2019 sIFR Opposites Attract
10/39
Fast forward to now, Im working on v3.
Photo by Jeremy Keith http://ickr.com/photos/adactio/523679899/
-
8/8/2019 sIFR Opposites Attract
11/39
Okay! Well walk through sIFR quickly so you learn how its applied to an existing web page. This willmore clearly show the principles of progressive enhancement, and itll show you how well Flash andHTML can work together.
-
8/8/2019 sIFR Opposites Attract
12/39
First, design the website the way you want it to look without sIFR .
-
8/8/2019 sIFR Opposites Attract
13/39
Then determine which parts of the page you wish to replace by sIFR.
-
8/8/2019 sIFR Opposites Attract
14/39
First, some foundations. We have to add a bit of HTML to load sIFR specic CSS and JavaScript les.
Photo by darleneisevil http://ickr.com/photos/darleneisevil/297948062/
-
8/8/2019 sIFR Opposites Attract
15/39
Careful! The `media` attribute needs to be correct!
Of course youre free to merge sIFR CSS with other CSS les. Same for the JavaScript.
-
8/8/2019 sIFR Opposites Attract
16/39
Careful! The `media` attribute needs to be correct!
Of course youre free to merge sIFR CSS with other CSS les. Same for the JavaScript.
-
8/8/2019 sIFR Opposites Attract
17/39
Careful! The `media` attribute needs to be correct!
Of course youre free to merge sIFR CSS with other CSS les. Same for the JavaScript.
-
8/8/2019 sIFR Opposites Attract
18/39
Photo by James Phelps http://ickr.com/photos/mandj98/266266308/
-
8/8/2019 sIFR Opposites Attract
19/39
.sIFR-active h1 , .sIFR-active h2 { font-family : Verdana ; visibility : hidden ; line-height : 1em;}
.sIFR-active h1 { padding : 0;}
This is the CSS which goes into the HTML page.
-
8/8/2019 sIFR Opposites Attract
20/39
.sIFR-active h1 , .sIFR-active h2 {font-family: Verdana;visibility: hidden;line-height: 1em;
}
.sIFR-active h1 {padding: 0;
}
.sIFR-active is a class thats set on the or element when sIFR has activated. You canuse it to style elements di ! erently before theyre replaced by sIFR.
-
8/8/2019 sIFR Opposites Attract
21/39
.sIFR-active h1, .sIFR-active h2 { font-family : Verdana ; visibility : hidden ; line-height : 1em;}
.sIFR-active h1 {padding: 0;
}
There is some magic going on here. Ive picked Verdana as a font family because its available onpretty much any platform. This means the text is rendered in roughly the same manner on eachplatform. This is important because it makes the height of the text the same.
By setting the line-height to 1em, it takes the value of the font size. This is a trick required to calculate
the font size in IE if its not specied in pixels. Lastly, we hide the HTML text before replacement toimprove the loading experience.
-
8/8/2019 sIFR Opposites Attract
22/39
Next up, the actual code we use to replace elements on the page!
Photo by Jared Vincent http://ickr.com/photos/jaredvincent/506985893/
-
8/8/2019 sIFR Opposites Attract
23/39
var palatino = { src : ' palatino.swf ' };
sIFR . activate ( palatino );
Put this in the , after loading sifr.js.
First we create an object which holds a reference to the Flash movie. Then activate sIFR by passing inthe object this lets sIFR load the Flash movie in the background so it ends up in the browser cachebefore sIFR actually starts replacing elements. Not doing this may lead to the Flash movie being
downloaded multiple times in IE and Safari.
-
8/8/2019 sIFR Opposites Attract
24/39
var palatino = { src : ' palatino.swf ' };
sIFR.activate(palatino);
Put this in the , after loading sifr.js.
First we create an object which holds a reference to the Flash movie. Then activate sIFR by passing inthe object this lets sIFR load the Flash movie in the background so it ends up in the browser cachebefore sIFR actually starts replacing elements. Not doing this may lead to the Flash movie being
downloaded multiple times in IE and Safari.
-
8/8/2019 sIFR Opposites Attract
25/39
var palatino = { src: 'palatino.swf' };
sIFR . activate ( palatino );
Put this in the , after loading sifr.js.
First we create an object which holds a reference to the Flash movie. Then activate sIFR by passing inthe object this lets sIFR load the Flash movie in the background so it ends up in the browser cachebefore sIFR actually starts replacing elements. Not doing this may lead to the Flash movie being
downloaded multiple times in IE and Safari.
-
8/8/2019 sIFR Opposites Attract
26/39
sIFR . replace ( palatino , {selector : ' h1 ',
css : ' .sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; } '
});
A simple replacement statement for the heading.
-
8/8/2019 sIFR Opposites Attract
27/39
sIFR . replace ( palatino , {selector: 'h1',
css: '.sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; }'
});
We pass in the object we created earlier. sIFR uses the arguments from this object, as well as from thesecond object thats passed in. This means you can put generic arguments on the `palatino` object,and specic arguments on the second object.
-
8/8/2019 sIFR Opposites Attract
28/39
sIFR . replace ( palatino , {selector : ' h1 ',
css: '.sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; }'
});
Selector contains a CSS selector. Here I simply replace `h1`, but you could become more specic if youneed to.
-
8/8/2019 sIFR Opposites Attract
29/39
sIFR . replace ( palatino , {selector : ' body.programma #container h1 ',
css: '.sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; }'
});
An example of a more specic selector.
-
8/8/2019 sIFR Opposites Attract
30/39
sIFR . replace ( palatino , {selector: 'h1',
css : ' .sIFR-root { color: #555511; \background-color: #DDDD88; \font-weight: bold; } '
});
Some CSS for inside the Flash movie. `.sIFR-root` applies to the entire movie. The CSS properties areself-explanatory. Flash supports a subset of CSS, and sIFR has added a few other properties. You cansee the full list at http://wiki.novemberborn.net/sifr3/Styling.
-
8/8/2019 sIFR Opposites Attract
31/39
Bet youre curious now, eh!?
Photo by Ishmael Orendain http://ickr.com/photos/ishmaelo/31685288/
-
8/8/2019 sIFR Opposites Attract
32/39
sIFR . replace ( palatino , {selector : ' h2 ',
css : ' .sIFR-root { color: #000000; \background-color: #DDDD88; \font-weight: bold; } '
});
The replacement statement for the headings. Its pretty much the same.
-
8/8/2019 sIFR Opposites Attract
33/39
So, thats sIFR in a nutshell. Looking back at Bobs presentation, what else can we do?
Photo by Gideon http://ickr.com/photos/malias/369960853/
-
8/8/2019 sIFR Opposites Attract
34/39
sIFR 3 supports scaling, or page zoom. This is a feature found in Opera, IE 7 and the upcoming Firefox3. Rather than changing text size, you zoom the entire page. Lets have a look at how sIFR handlesthis, and how it would look at sIFR not dealt with it.
Photo by Jonathan Talbot, World Resources Institute http://ickr.com/photos/wricontest/322587441/
-
8/8/2019 sIFR Opposites Attract
35/39
As you can see, for Flash and HTML to work together you need to take page zoom into account.Luckily, its rather easy! It turns out that the pixels you use in CSS do not necessarily correspond topixels on the screen. In other words, when you use page zoom, the browser changes the ratio betweenCSS pixels and device pixels.
Internally, a Flash movie is rendered in device pixels. The width and height of the movie in the HTMLpage however are measured in CSS pixels. Thus, when you zoom out, the Flash movies width andheight in the HTML page change, but internally it stays the same. Hence, the clipping of the sIFR textwe saw earlier.
The solution? If Flash only knew the size it takes in the HTML page, it could calculate the scaling ratioitself and scale its internal size to the HTML size.
Ph b DA N h //i k / h /d /80300544/
-
8/8/2019 sIFR Opposites Attract
36/39
Luckily Flash and JavaScript do communicate. The Flash movie knows its rendered size at all times,which lets it scale along with the browser. Communication is also used to resize the Flash movie if theres suddenly less space available after scaling or resizing the browser window.
And you can do more fun stu ! , such as changing the text in the Flash movie!
Photo by Jarod Hodge http://ickr.com/photos/pingnews/473097669/
-
8/8/2019 sIFR Opposites Attract
37/39
Questions?
Picture by Adam Hooker,
-
8/8/2019 sIFR Opposites Attract
38/39
And on that bombshell, Id like to conclude this presentation. Thank you indeed.
Picture by Mark Wubben,
J Ph l
-
8/8/2019 sIFR Opposites Attract
39/39
Adam Hookerhttp://flickr.com/photos/azadam/72251349/
Mark Wubbenhttp://flickr.com/photos/novemberborn/387178249/
Ralph Aichinger http://flickr.com/photos/sooperkuh/358241806/
Aaron Feaverhttp://flickr.com/photos/feaverish/733663763/
Jeff Kubinahttp://flickr.com/photos/kubina/42275122/
Mark Wubbenhttp://flickr.com/photos/novemberborn/256746937/
Jeremy Keithhttp://flickr.com/photos/adactio/99391890/
Rex Sorgatz
http://flickr.com/photos/fimoculous/246307803/
Jeremy Keithhttp://flickr.com/photos/adactio/523679899/
darleneisevilhttp://flickr.com/photos/darleneisevil/297948062/
Jarod Hodge
http://flickr.com/photos/pingnews/473097669/
DArcy Normanhttp://flickr.com/photos/dnorman/80300544/
Jonathan Talbothttp://flickr.com/photos/wricontest/322587441/
Gideonhttp://flickr.com/photos/malias/369960853/
Ishmael Orendainhttp://flickr.com/photos/ishmaelo/31685288/
Jared Vincenthttp://flickr.com/photos/jaredvincent/506985893/
James Phelpshttp://flickr.com/photos/mandj98/266266308/
Thank you wonderful Flickr photographers.
http://flickr.com/photos/wricontest/322587441/http://flickr.com/photos/wricontest/322587441/http://flickr.com/photos/dnorman/80300544/http://flickr.com/photos/dnorman/80300544/http://flickr.com/photos/pingnews/473097669/http://flickr.com/photos/pingnews/473097669/http://flickr.com/photos/darleneisevil/297948062/http://flickr.com/photos/darleneisevil/297948062/http://flickr.com/photos/adactio/523679899/http://flickr.com/photos/adactio/523679899/http://flickr.com/photos/fimoculous/246307803/http://flickr.com/photos/fimoculous/246307803/http://flickr.com/photos/adactio/99391890/http://flickr.com/photos/adactio/99391890/http://flickr.com/photos/novemberborn/256746937/http://flickr.com/photos/novemberborn/256746937/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/http://flickr.com/photos/jenniferwilliams/106394787/