Programatori.info

web programming blog

Archive for category HTML

3D Slides Built with HTML5, CSS3, and SVG

Oct 6

Posted by Web Design CLuj in 3D, CSS, Front Page, HTML, Presentation, WEB 2.0 | No Comments

Over on my personal blog I talk about a 3D slide deck I've created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I'll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can 'accordian' open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

Read more to learn about the 3D slide deck and how I built it.

HTML5 Link Prefetching

Sep 22

Posted by Web Design CLuj in Front Page, HTML, Performance, WEB 2.0 | No Comments

From David Walsh comes a good writeup on the HTML5 link prefetch tag:

PLAIN TEXT
HTML:
<!-- full page -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />

<!-- just an image -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
 

You use the link tag to do prefetching, setting the rel to "prefetch" and giving the URL to the resource to prefetch. When should you use link prefetching?

Whether prefetching is right for your website is up to you.  Here are a few ideas:

  • When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren't massive).
  • Loading images to be used on most pages throughout the website.
  • Loading the next page of the search results on your website.

Some things to know about link prefetching though:

A few more notes about link prefetching:

  • Prefetching does work across domains, including pulling cookies from those sites.
  • Prefetching can throw off website statistics as the user doesn't technically visit a given page.
  • Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

Video Conferencing with the HTML5 Device Element

Sep 20

Posted by Web Design CLuj in Front Page, HTML, Standards, Video, WEB 2.0 | No Comments

Did you know that work is being done to enable videoconferencing from HTML5 applications? Ian Hickson has been doing work on the element in a separate draft to make this possible.

The element will be used to allow the user to give permission to a page to use a device, such as a video camera. A type attribute can be used for the page to give more specificity on what kind of device they want access to. Right now this could be 'media' for access to an audio or visual device; 'fs' to access the file system, such as a USB connected media player; or 'rs232' or 'usb' to access devices connected in this manner.

Example usage:

PLAIN TEXT
HTML:
<p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></device></p>
<video autoplay></video>
<script>
 function update(stream) {
   document.getElementsByTagName('video')[0].src = stream.url;
 }
</script>
 

The spec includes a way to work with Stream objects for the data coming from the device and to record Streams. It also includes an API for working with peer-to-peer connections, such as sendBitmap() or sendFile() to send data between a peer connection. The entire standard is still being baked but here is what a P2P connection might look like in pseudo-code:

PLAIN TEXT
JAVASCRIPT:
var serverConfig = ...; // configuration string obtained from server
// contains details such as the IP address of a server that can speak some
// protocol to help the client determine its public IP address, route packets
// if necessary, etc.

var local = new ConnectionPeer(serverConfig);
local.getLocalConfiguration(function (configuration) {
  if (configuration != '') {
    ...; // send configuration to other peer using out-of-band mechanism
  } else {
    // we've exhausted our options; wait for connection
  }
});

function ... (configuration) {
  // called whenever we get configuration information out-of-band
  local.addRemoteConfiguration(configuration);
}

local.onconnect = function (event) {
  // we are connected!
  local.sendText('Hello');
  local.addStream(...); // send video
  local.onstream = function (event) {
    // receive video
    // (videoElement is some <video> element)
    if (local.remoteStreams.length> 0)
      videoElement.src = local.remoteStreams[0].url;
  };
};
 

[via Aditya Mani]