Posterous theme by Cory Watilo

Filed under: css

Make the web faster - zip it

In mid 90s I realized most Flash swf files could be compressed using zip. The resulting file would often be 50% smaller. I sent this suggestion to Macromedia, and I was very happy when the next version of the SWF file format came out, it included LZW compression.

Google has an initiative to make the web faster. They just proposed a new lossy image file format. I was just wondering if something like what SWF does could be also used for HTML. Imagine you pack all your JavaScript, CSS and smaller images inside a resource.zip file. Later, you would target each file inside this zip file like:

<link rel='stylesheet' href='resource.zip?file=/mystyle.css' type='text/css' />
<script type='text/javascript' src='resource.zip?file=/jquery.js'></script>
<img src="resource.zip?file=/images/blank.gif" />

This way the browser could download all the resources with just one request. Compare this to many complex sites that make over one hundred requests to the server. CSS sprites would be something from the past.

There are some drawbacks: linking to compressed resources in other domains wouldn't be as easy as today, and crawling by search engines would require decompressing the file first. Uploading asset groups by FTP would also be faster, but then updating a single file would require uploading the complete compressed asset file.

In any case the speed increase would probably be very noticeable if web sites downloaded most of their assets on one request, instead of making hundreds of them.

FotoVista360 / WeDo360

I started my own virtual tour project early 2006. I tried pushing the limits both in hardware and software for three years, working together with my brother. We probably created over 30 virtual tours in Mallorca, Madrid and the Canary Islands. But we finally gave up and sold the equipment. We used a one-shot 360º lens I ordered from USA.

  • Full screen VR panoramas help people sell their properties.
  • Fast even in full screen mode
  • Windows, Mac and Linux compatible
  • Hotspots and an interactive 3D Flash map ease navigation between rooms.
  • Flash map design tool allow easy creation of isometric maps.
  • Quick previews and incremental rendering make it feel quite responsive.
  • An info layer provide information about each room when desired.
  • Custom JAVA applet configuration.
  • Self made 360º photography with dedicated equipment.

I will later update this post and explain all the software and hacks we used to be able to create virtual tours quickly and for a low price.

Create E-Merge Toledo web site

In 5 weeks in 2003 I programmed this on-line education website and its control panel together with my cousin Carlos. We used PHP and MySQL to build it. The design concept came from Dot Design, which I then adapted to CSS. e-mergetoledo.com is now offline. The project came through Bilbilis. We think someone hired him to create this site just to get some money from the European union.

The client needed a website with three parts:

  1. An on-line school that will allow users to register, pay, download documentation, take exams and view results. It must include a graphical Flash interface to access the different sections. 
  2. Informative pages with updatable events and PDF magazines to download.
  3. Full backoffice to allow creating and editing courses, update documentation, control students, change events and magazines...

 

Satellite tracking and MapServer Flash interface, 2001

The idea behind the Ikarus project was to create a web platform to control satellite communicators in different ways. Together with my cousin Carlos we created the first version of this web platform in 2001. The plan was to be able to see in an interactive map where your truck, boat or airplane was at the moment, where it had been in the past, read variables sent from the devices (for example pressure, temperature), and be able to send and receive messages from those devices. The hardware used the Orbcomm satellite network and the whole concept was created by my friend Miquel.

The main parts of my work were creating a back end, a front end (both using PHP and MySQL), and a Flash based MapServer interface component. This 15 Kb component was quite innovative at the time. Normal use of MapServer required clicking arrows which would reload the whole page (at a time where people still used modems). I created a map interface that could be simply dragged around, the same way Google Maps did it 3 years later. It took more than 5 years for similar web map interfaces to become popular.

MapServer was able to generate images in different formats. I realized that if I used PNG images the file sizes were really small, less than 2 kb most of the time. But Flash was not able to load PNG images so I did a PHP script that would do server side PNG to SWF file conversion on the fly. It worked really nicely. The project did never really take off. It was hard to sell this idea in Mallorca, where we lived at the time. To prove how useful it could be Miquel designed a floating transmitter and offered it for free to track the oil spill in north Spain in 2002. Unfortunately no one seemed to know who was taking the decisions during this crisis, and the help was never accepted. In 2003 our system was tested in a boat expedition from Mallorca to the Antartic. We created a simple web page for this project, which would receive coordinates, texts and photos from the boat, and present them as a blog. At the time I was quite proud of using CSS. I think it was probably the first time I developed and styled the whole web site using style sheets. It made it so easy to update!

Flash closet design tool with 3D rendering, 2002

In 2002 I was asked to create a complex website for a closet design company in Mallorca. The idea was to build an on-line tool for designing closets. This tool would be used by employees in front of customers visiting their shops, and directly by customers at home over the Internet. This was one of the most complex  projects I've finished. It took me six months.

Unfortunately after it was finished the owner of the company changed, and the new owner was not interested in having a web page at all. The project included:

  • The corporate website which I designed.
  • The back office which allowed a complete follow up the process, from design to construction and invoicing. It was possible to enter all kinds of materials, sizes, prices based on ranges... gives me a headache just to think about it :)
  • On line Flash/ActionScript design tool. It allowed designing both inside and outside of the closet, including drawers, shelves, bars, divisions, sizes, walls, materials, doors. Rules defined conditions of what's allowed in a design and what not. Simple key short cuts allowed creating designs fast. The whole Flash tool was only 23 Kb. Did I mention I like optimizing? :)
  • I created a 3D rendering server using Flash, PHP and POV. Photographic quality and lower rendering times were tested using radiosity and a more powerful PC, but the client was not interested. I built this server concept in such way it could be installed in many computers, even home computers with non permanent Internet connection, a bit like SETI at home. Computers would ask the main server if there were pending renders to do, and if there were any, the information would be downloaded, the image rendered, and sent back to the server.
  • Printing of closet details: dimensions, materials, and the 3D image. This print out would be used for constructing the closet. The page design was done using ActionScript for precise layout and font control, as opposed to HTML which gave unpredictable and limited results.