Comunicación Multimedia

Iwebkit 5.04
Uno de los más populares <frameworks> para la construcción de páginas web en el iPhone.
Bajar en iwebkit.com

Consiste en:

− Una hoja de estilo CSS: style.css

− Un archivo Java Script: function.js
− Un conjunto de imágenes para usar en la aplicación

Cómo habilitar el uso de este <framework> en el header de index.html

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link href="pics/homescreen.gif" rel="apple-touch-icon" />

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-
scalable=no" name="viewport" />

<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />

<script src="javascript/functions.js" type="text/javascript"></script>

Elementos de una página.

-------------------> top bar <div id=”top bar”></div>

----------------> content region <div id=”content”></div>

------------------------> footer <div id=”footr”></div>

El Top Bar

dentro del Top Bar podemos agregar un título

<div id="topbar">
<div id="title">
iWebKit 5 Demo</div>

también se pueden agregar botones de navegación.

<div id="topbar">
<div id="title">
iWebKit 5 Demo</div>
<div id="leftbutton">
<a href="http://iwebkit.net" class="noeffect">PC Site</a> </div>
</div>

También podemos tener botones con los identificadores

− rightbutton
− left button
− rightnav
− leftnav

<div id="topbar">

<div id="leftnav">
<a href="index.html"><img alt="home"
src="images/home.png" /></a><a
href="storelist.html">iTunes
List</a></div>

<div id="rightnav">
<a href="ipodlist.html">iPod List</a></div>
</div>

En esta línea de código podemos ver cómo funciona el

código “leftnav” y “rightnav”. Apple recomienda crear
este tipo de navegación dentro de una aplicación web para
sus dispositivos móviles para que el usuario no necesite
recurrir a los botones de navegación del dispositivo
mismo.
El “content” de una página

<div id="content">
<span class="graytitle">Navigation</span>

<ul class="pageitem">

<li class="textbox"><span class="header">The

transparent topbar</span>

<p>
As with the Black topbar you can simply make it
transparent by simply
adding a class to it. This style emulates
that of the photos app and is
epecially nice on sites with a custom
background image.</p>

<span class="header">Navigation
arrows</span>

<p>
Also available are the
well known navigation arrows that you
see above. I have decided to give
you the option of simply having 1 button
at the top or using a
&quot;breadcrumb&quot; system with
wich you can have multiple left or right arrows
on the same page. This is of course for the ease of use of your site
enabling the user to naviagte quickly.
</p>
</li>
</ul>
</div>
Menu Items

Aquí vemos el código que desplega el menu item de esta página y que integra un hipervínculo a
otra página.

<li class="menu"><a href="technology.html">

<img alt="list"
src="thumbs/plugin.png" /><span
class="name">The
Technologies</span><span
class="arrow"></span></a></li>

<li class="menu"><a
href="navigation.html">
<img alt="wordpress"
src="thumbs/start.png" /><span
class="name">Navigation
elements</span><span
class="arrow"></span></a></li>

<li class="menu"><a
href="form.html">
<img alt="music"
src="thumbs/other.png" /><span
class="name">Form
elements</span><span
class="arrow"></span></a></li>

<li class="menu"><a
href="integration.html">
<img alt="store" src="thumbs/accessibility.png" /><span class="name">iPhone
Integration</span><span class="arrow"></span></a></li>

<li class="menu"><a href="blogrss.php">

<img alt="wordpress" src="thumbs/voice.png" /><span class="name">Rss
Feed</span><span class="comment">embedded</span><span
class="arrow"></span></a></li>
Simple list page

<div id="content">
<ul>
<li class="title">Music</li>

<li class="withimage">
<a class="noeffect" href="http://itunes.apple.com/fr/album/one-love/id327568537">

<img alt="test"
src="http://a1.phobos.apple.com/us/r1000/012/Music/33/77/0e/mzi.owirvytf.170x170-75.jpg" />

<span class="name">One Love</span><span class="comment">David Guetta</span>

<span class="arrow"></span></a></li>

<li class="withimage">
<a class="noeffect" href="http://itunes.apple.com/fr/album/back-on-my-b-
s/id314164974">
<img alt="test"
src="http://a1.phobos.apple.com/us/r2000/005/Music/c6/3e/f8/mzi.kfqhjocj.170x170-75.jpg"
/><span class="name">Back
On My B.S.</span><span class="comment">Busta Rhymes</span><span
class="arrow"></span></a></li>

<li class="withimage">
<a class="noeffect" href="http://itunes.apple.com/fr/album/the-boy-who-knew-too-
much-deluxe/id325258032">
<img alt="test"
src="http://a1.phobos.apple.com/us/r2000/000/Features/34/32/d0/dj.grpqhbeu.170x170-75.jpg"
/><span class="name">The
boy who knew too much</span><span class="comment">Mika</span><span
class="arrow"></span></a></li>

<li><a class="noeffect" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTop?

id=50&popId=1&genreId=34"><span class="name">

All Top songs</span><span class="arrow"></span></a></li>

<li class="title">TV Series</li>

<li class="withimage">
<a class="noeffect"
href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewTVSeason?
id=336916043&s=143442">
<img alt="test"
src="http://a1.phobos.apple.com/us/r30/Video/68/8d/4a/mzl.plhikvbk.100x100-75.jpg" /><span
class="name">Trueblood</span><span class="comment">Season
1</span><span class="arrow"></span></a></li>