Marañando and Information Technology
Sunday, 20. September 2009, 11:54:37
Sunday, 20. September 2009, 11:54:37
Sunday, 5. April 2009, 11:13:25
Wednesday, 1. April 2009, 15:46:58
Thursday, 5. February 2009, 08:21:06
Tuesday, 16. October 2007, 12:40:14
Wednesday, 10. October 2007, 11:09:20
Tuesday, 24. July 2007, 23:11:31
Tuesday, 22. May 2007, 15:41:10
Sunday, 30. July 2006, 16:58:13
Monday, 24. April 2006, 01:46:54
Saturday, 15. April 2006, 05:12:27
Tuesday, 4. April 2006, 15:44:43
ping. That sends a little bit of information to some other computer on the net, and measures how long it takes to get back, if it does.
Friday, 25. November 2005, 16:23:07
Tuesday, 22. November 2005, 22:56:46
Monday, 21. November 2005, 23:35:56
I managed to get the same slides to appear in fullscreen mode (the OperaShow presentation mode), in a different style for normal on-screen reading, and to show them on my phone in a presentationoptimised for the phone. It wasn't rocket science, and I thought I would share how I did it. (Thanks Tommy for the photographic evidence that this works on a real phone running Opera Mini)
(The next bit involves digging into the HTML source code. If you think that's boring, skip to the slides themselves - if you have Opera you can switch from fullscreen (which won't work before December - only the mobile version is uploaded) to small screen rendering and see how it comes out, then write a comment saying "Oooh, Aaaah" and I will be grateful
).
So what did I do? The first thing was to write some slides, to use OperaShow. I originally did this with the online tool, because it made the stylesheet for me. I copied the entire stylesheet into a seperated file, and I edited it a bit. Then I started to look at my own slides. I had some simple XHTML - this is what OperaShow is based on - its structure is the one I got from teh generator, and it works well for me even after hacking around. I added a link to the external stylesheet I had created, and said it was for several media types:
<link rel="style" type="text/css" href="slides.css" [B]media="print, tv, projection, screen"[/B] />Then I added an internal stylesheet:
<style type="text/css" [B]media="handheld"[/B]><[CDATA[ /* Style rules go here */ ]]> </style>(Why the funny extra brackets? Because this is real XHTML, following real XML rules. Just in case someone wants to build a really basic browser that only understands real XML, and skips all the error-correcting that Opera does to make the web that's out there actually work).
What rules do I actually put in? The following isn't exactly the same as the source. I've improved a bit, left out a few repetitive things, but you should get the idea. The first ones are to reduce the margins, padding and so on to something more obvious for mobiles, and remove the big bullets from lists. Stuff like:
ul,ol,ul li { margin: 3px ; padding: 3px ; list-style: none }
There are a number of images used in the screen and projection version. Most of them are more than 50kb, they are fairly large, and they are not really cool for mobiles. Fortunately, they are all styled with a couple of classes. I added a link to a very small, mobile-optimised picture, and gave it a special class that is set not to render in the linked stylsheet. While I was there, I decided to tell a logo image to show itself small (it's not too heavy, but its normal size was much too big), and I decided the first slide was not worth seeing as a slide. Those two things have an id, so I styled them too.
#mwi {width:55px;height:58px}
.r {float:right; padding:0px; margin:0px}
.topleft, .right, #s1 {display:none}
Then I decided I wanted to make the slides stand out a bit. Put a box around them, add a little slide number to each box, like a real slideset div.slide { counter-increment: slide; }
.slide { border: 1px black solid; padding: 4px; margin: 0px 0px 5px}
.slide:before { content: "Slide " counter(slide); float:right; }
By this time, I was messing around in the depths of stylesheets I never really understood before. (I found things like background images included through the use of data: URIs and all sorts of wierd and wonderful stuff). One of the things I found in the print style was that it put lots of metadata into the print version, but I was too slack to add metadata yet. (I'll dig back in and do that, because it is pretty useful as well as cool to see it printing). But I did use a couple of rules I found to add some simple metadata:
head { display: block; border: 1px black; padding:5px; width:100%}
title { display: block; padding: 0px; margin: 0px;
text-align:center ; font-weight: bold;}
If you look at the real source, you'll see the slight differences. You can look at how the other stylesheets work, too. But you're better off asking a different expert about the details of those - all I did that was special is trim them down to something I can manage, and make the mobile-friendly version work. (Even then, I could have done a bit more... maybe next time I'll explain that instead).
Friday, 28. October 2005, 14:55:03

It's silly, it's simple, it's gross, and it's cool
Dumb demos of simple things widgets can do.