Programación web para móviles...• La Web móvil es la misma Web que la de escritorio, utiliza:...

Especialista Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2011-2012 Depto. Ciencia de la Computación e IA

Programación webpara móviles

Sesión 1: Introducción al desarrollo

Web para móviles


© 2011-2012 Depto. Ciencia de la Computación e IAProgramación web para móviles Introducción - 2

Contenido

• Introducción al desarrollo web para móviles

• Instalación de un servidor Web

• HTML

• CSS



Programación Web para móviles

• Introducción

• Aplicación móvil vs. Aplicación nativa

• Reglas de usabilidad

• Buenas prácticas de programación

• Dominio

• Detección del navegador

• Inspiración



Introducción• La Web móvil es la misma Web que la de escritorio, utiliza:

• la misma arquitectura.

• las mismas tecnologías.

• Pero existen claras diferencias que impiden que su funcionamiento y manejo sea el

mismo, como son:

• Tamaño de la pantalla.

• Diferentes formas de manejo (táctil, teclado, cursor, etc.).

• Ancho de banda.

• ¡Es móvil!

• Diferente tipo de uso.



Introducción• Al diseñar este tipo de aplicaciones tenemos que orientarlas a su uso principal,

introduciendo cambios en:

• Contenido.

• Información más clara y directa.

• Apariencia.

• Estructura

• Regla del 20%:

• El 80% del contenido del sitio web de escritorio no es válido para una web móvil.

• Hemos de centrarnos en ese 20% restante:

• Averiguar cual es.

• Optimizar el sitio para este uso.



Aplicación móvil vs. Aplicación nativa

Las aplicaciones nativas tienen la ventaja de poder usar funciones no disponibles para la web móvil:

• Interfaces nativas que proveen los propios SDK como iPhone o Android.

• Bases de datos locales. Aunque en HTML 5 se puede usar el

almacenamiento local, estas tecnologías están más avanzadas en los

sistemas nativos.

• Notificaciones push.

• Geolocalización.

• Soporte para cámara o vídeo.



Aplicación móvil vs. Aplicación nativa

• Sin embargo, estas diferencias cada vez son menores:

• Mejoras en HTML5, CSS3 y JavaScript.

• Mejores frameworks de desarrollo para aplicaciones móviles, como JQuery Mobile o Sencha

Touch.

• Apariencia cercana a las de las aplicaciones nativas.

• Adapta el contenido según el dispositivo usado.

• Multiplataforma.

• El desarrollo web no ha muerto por la inclusión de las aplicaciones móviles, sino que se ve

afectado por un proceso de cambio hacía la adopción de nuevas tecnologías.

• PhoneGap: crear una aplicación nativa instalable a partir de una página Web

• Da acceso a: cámara, acelerómetro, geolocalización, listado de contactos, comprobar el

estado de la conexión, etc.



Reglas de usabilidad

1. Reducir la cantidad de contenido

• El espacio visual es muy limitado. Cada píxel cuenta.

• No todo lo que es válido para una Web de escritorio lo es para una

Web móvil.

• Solo debemos de incluir el contenido y las características

principales y más importantes.

• La web móvil debe de estar enfocada a este contenido principal.

• Facilitar su lectura y navegación, así como mejorar los tiempos de

carga reduciendo imágenes y contenidos.




2. Usar una sola columna

• Las páginas Web anchas y con varias columnas dificultan la

navegación y lectura en un dispositivo móvil.

• El zoom añade pasos a la navegación, y en algunos dispositivos no

es fácil de realizar.

• Solución: tener todo el contenido en una sola columna que ocupe

todo el ancho de la pantalla.

• Para añadir contenido lo haremos hacia abajo.

• Esto nos asegura una visualización correcta.




3. Muestra los enlaces de navegación de forma diferente

• No hay que poner todos los enlaces de navegación en la parte superior de la

pantalla, desplazarán el contenido hacia abajo.

• La página principal debería de contener los enlaces al resto del contenido junto

con un buscador (si fuese necesario).

• La página principal debe ser como una guía, facilitando el acceso rápido a la

información más importante de la web.

• Solución:

• Las opciones más importantes arriba.

• Usar barras inferiores.

• Usar menús con listas desplegables.




4. Minimiza la cantidad de datos solicitados

• Escribir utilizando un móvil es mucho más difícil que hacerlo utilizando el teclado

de un ordenador de sobremesa.

• Se escribe mucho más lento y se cometen más errores.

• Por estas razones tenemos que intentar minimizar la cantidad de texto solicitado.

• Soluciones:

• Almacenar datos (usuario, contraseñas, configuración, direcciones, etc.),

• Aprovechar algunas de las funcionalidades que incorporan los dispositivos móviles

(como veremos más adelante).




5. Decide si necesitas más de una Web para móvil

• El tamaño de pantalla, la capacidad de procesamiento y de usabilidad varía

enormemente de un terminal a otro.

• A veces debemos de considerar crear varios sitios web con el mismo contenido pero

adaptado a diferentes necesidades.

• Por ejemplo, Facebook tiene m.facebook.com como sitio web principal para móviles,

pero además tiene una versión optimizada para pantallas táctiles (touch.facebook.com)

y una versión optimizada para conexiones más lentas (0.facebook.com).




6. Diseña para pantallas táctiles, pero también para teléfonos no-táctiles

• La forma de navegar puede ser muy diferente según el dispositivo:

pantallas táctiles, trackball, joystick, teclado, etc.

• Dificultades: selección o pulsado sobre textos o enlaces pequeños.

• En las pantallas táctiles además se dificulta el pulsado sobre elementos

que estén muy juntos.

• Solución: Los enlaces o elementos que puedan ser seleccionados deben

de ocupar un mayor espacio, incluirlos en botones o cuadros más

grandes.




7. Aprovecha las funcionalidades que incorporan los móviles

• Realizar llamadas: es una funcionalidad muy útil que los PCs no pueden realizar

tan fácilmente.

• Aprovecharla para llamar directamente al presionar sobre un número de teléfono,

facilitar el contacto con un servicio técnico, etc.

• Uso de mapas y posición actual: seleccionar una dirección y que automáticamente

se abra en la aplicación de mapas del dispositivo móvil, etc.

• Uso de la posición actual para mostrar puntos de interés cercanos, calcular rutas,

etc.

• Solicitud de información de formas innovadoras: como por ejemplo los códigos

QR, que se han usado en algunas campañas de publicidad, etc.



Buenas prácticas de programación Web para dispositivos móviles• URL lo más corta posible.

• La barra de navegación debe de estar en la cabecera y ofrecer la navegación mínima necesaria.

• Lo más importante, primero. Ofrece al usuario lo que busca.

• No recargar automáticamente la página, a menos que se informe claramente.

• Peso limitado. Reducir todo lo posible las imágenes y el contenido multimedia.

• Scroll. Limitar el desplazamiento de la página a una dirección.

• Test. Hacer pruebas en emuladores y en dispositivos reales.

• Enlaces:

• Mínimos a recursos externos.

• Equilibrio entre enlaces y contenido.

• Identificar de forma clara el destino del enlace. (pdf, etc.)

• No usar ventanas emergentes.

• No ofrecer más contenido del solicitado por el usuario.



Dominio

• Existen diferentes alternativas que podemos usar:

• Podemos tener un subdominio de nuestro sitio Web especializado para

dispositivos móviles.

www.midominio.com → m.midominio.com.

Facebook tiene: m.facebook.com, touch.facebook.com, 0.facebook.com

• Redireccionar desde el dominio principal.

• Dominio ".mobi" (especial para web móvil).

• Recomendación: tener varias opciones disponibles, con la intención

de facilitar al máximo el acceso.

• En este caso deberemos crear redirecciones 301 al dominio principal.



Detección del navegador

• Un dilema a la hora de desarrollar contenidos para móviles es cómo

diferenciar entre dispositivos móviles y navegadores de escritorio.

• Usar una función de comprobación que nos indique el tipo de navegador.

• Una vez obtenido el navegador tenemos varias opciones:

• Redireccionar al dominio correspondiente,

• Adaptar el código de nuestra página según el cliente.

• Existen librerías que permiten detectar el tipo de navegador desde cliente

y desde servidor, usando multitud de lenguajes, como JavaScript, PHP,

ASP, ASP.NET, C#, Apache, JSP, JQuery, Perl, etc.

http://detectmobilebrowsers.mobi/ http://detectmobilebrowsers.com/

http://detectmobilebrowsers.mobi/

http://detectmobilebrowsers.com/



Inspiración



Instalación de un servidor Web

• XAMPP para Linux

• XAMPP para Windows

• Servidor Web para Mac

• Acceso mediante un dispositivo móvil real

• Instalación del SDK de Android

• Instalar Xcode

• Simuladores y Emuladores



Introducción• Una de las herramientas principales que necesitamos es un servidor Web.

• Dado que instalar un servidor Web completo y configurarlo es una tarea

bastante costosa, para el desarrollo y testeo de aplicaciones en local se

puede utilizar un servidor XAMPP.

• Este es un paquete software de fácil instalación que incluye todo lo necesario

para la ejecución de un servidor Web.

• Es independiente de plataforma, software libre (licencia GNU).

• El nombre proviene del acrónimo formado por X (multiplataforma), Apache,

MySQL, PHP y Perl.

• Está disponible para Microsoft Windows, GNU/Linux, Solaris y MacOS X.



XAMPP para Linux

• Descargar XAMPP desde: http://www.apachefriends.org/en/xampp-linux.html

• Abrimos una consola y ejecutamos:sudo tar xvfz xampp-linux-1.7.7.tar.gz -C /opt

• Ahora ya tenemos instalado el servidor en la ruta '/opt/lampp'.

• Para inicializar el servidor escribimos:sudo /opt/lampp/lampp start // stop para detenerlo

• Veremos algo como:Starting XAMPP 1.7.7...

LAMPP: Starting Apache...

LAMPP: Starting MySQL...

LAMPP started.

• Para comprobar que todo ha ido correctamente abrimos un navegador y escribimos la dirección “http://localhost”.

• El directorio raíz de Apache es “/opt/lampp/htdocs”.

http://localhost/



XAMPP para Windows

• Descargar instalador desde: http://www.apachefriends.org/en/xampp-windows.html

• Instalar utilizando los valores por defecto.

• Abrir el Panel de Control de XAMPP (Inicio > Programas > XAMPP).

• Desde aquí podemos iniciar y detener cada uno de los servicios

individualmente.

• Para comprobar que el servidor está instalado correctamente abrimos

un navegador y escribimos “http://localhost/” (firewall?)

• El directorio raíz de Apache es “C:\xampp\htdocs”.

http://localhost/



Servidor Web para Mac• Mac viene con un servidor web Apache instalado.

• Si queremos instalar un servidor XAMPP:

“http://www.apachefriends.org/en/xampp-macosx.html”.

• Para el servidor Apache de Mac:

• Abrir “Preferencias del Sistema” → “Sharing” → habilitar “Web Sharing”.

• (Según la versión) Aparecerá un botón para abrir la carpeta con el contenido Web

y un enlace al localhost.

• Acceso manual: dirección IP de la máquina + nombre de usuario.

http://192.168.0.18/~ajgallego/

• Si usamos un servidor XAMPP podríamos usar directamente: “http://localhost”.

• El contenido Web se encuentra en la carpeta principal con el nombre de “Sites”.



Acceso con un dispositivo móvil real

En Mac:

• Conectarnos a la misma red WiFi.

• En caso de que haya un Firewall permitir el acceso.

• La dirección a usar es la misma que en local:

Dirección IP del servidor + nombre de usuario

http://192.168.0.18/~ajgallego/



Acceso con un dispositivo móvil real

En Linux o Windows:

• Conectarnos a la misma red WiFi.

• Asegurarnos de que no se esté ejecutando ningún Firewall.

• Obtener la dirección IP del servidor:

• En un terminar “ipconfig” (Windows) o “ifconfig” (Linux).

• La dirección a usar será:

Dirección IP del servidor + carpeta proyecto Web

http://172.16.125.128/mi_web



HTML• Introducción• Editores HTML• Etiquetas• Estructura básica de una

Web• Elementos de la

cabecera• Etiquetas básicas HTML• Listas

• Tablas• Cajas (etiqueta <div>)• Enlaces• Imágenes• Formularios• Eventos• Símbolos HTML



Introducción• HTML (HyperText Markup Language).

• Lenguaje de marcado predominante para la elaboración de páginas web.

• Describe la estructura y el contenido en forma de texto.

• Se escribe en forma de “etiquetas”, mediante las cuales podemos

describir la estructura lógica y apariencia del contenido.

• Se puede complementar con otros lenguajes como JavaScript o CSS.

• Actualmente se usa el estándar de HTML 4.01 (1999).

• HTML5 a fecha de 2011 sigue siendo un borrador.



Editores

• Podemos usar cualquier editor de textos básico (gedit, bloc de

notas,...).

• Editores WYSIWYG (What You See Is What You Get):

• Permiten ver el resultado de lo que se está editando en tiempo real.

• Aceleran o facilitan la creación de código HTML, pero en algunas ocasiones

también generan mucho más código del necesario.

• Ejemplos: Adobe Dreamweaver, KompoZer o Microsoft FrontPage.

• Mejor opción: editores que simplemente comprueban que el código

es correcto.



Etiquetas

• Deben de ir encerradas entre corchetes angulares “<>”

• Pueden ser de dos tipos:

• Apertura y cierre (<p>texto</p>).

• Sólo apertura (<br/>).

• Los atributos se deben de colocar en la etiqueta de inicio:

<etiqueta atributo1="valor1" atributo2="valor2">...</etiqueta>

• O para las etiquetas de solo apertura:

<etiqueta atributo1="valor1" atributo2="valor2"/>



Estructura básica de una Web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

¡Hola mundo!

</body>

</html>

CUERPO

CABECERA



Elementos de la cabecera

• <title>Título</title>: define el título de la página, que aparecerá en la barra de título

encima de la ventana.

• <link/>: para vincular el sitio con hojas de estilo:

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

• <style></style>: añadir definición de estilo en línea.

<html>

<head>

<style type="text/css">

Estilos CSS

</style>

</head>

<body>...</body>

</html>



Elementos de la cabecera

• <meta/>: para indicar metadatos:<meta name="description" content="Descripción" />

<meta name="keywords" content="key1,key2,key3" />

<meta name="author" content="Nombre del autor" />

• <script></script>: permite incluir un script en la Web.

El código se puede cargar desde un fichero externo:

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

O escribir directamente entre las etiquetas de <script>:<script type="text/javascript">

Código de un script integrado en la página

</script>



Etiquetas básicas HTML

• <h1></h1> a <h6></h6>: encabezados o títulos del documento.

• <p></p>: definición de un párrafo.

• <br/>: salto de línea.

• <strong></strong> (<b></b>): texto en negrita.

• <em></em> (<i></i>): texto en cursiva.

• <del></del> (<s></s>): texto tachado.

• <u></u>: texto subrayado.

Etiquetas básicas HTML• <center></center>: texto centrado.

• <pre></pre>: texto preformateado, respeta los espacios y saltos de línea.

• <sup></sup>: Superíndice

• <sub></sub>: Subíndice

• <blockquote></blockquote>: párrafo indexado con respecto al margen.

• <hr/>: Línea o separador horizontal.

• : Comentario, texto no visible.

• <span></span>: Etiqueta neutra, se utiliza para aplicar estilos.



Listas

• <ol></ol>: Lista ordenada (con numeración).

• <ul></ul>: Lista con puntos (o viñetas).

• <li></li>: Elemento de una lista.

Ejemplo:

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ol>

1. Elemento 12. Elemento 2



Tablas

• <table></table>: define el inicio y fin de una tabla.

• <tr></tr>: fila de una tabla.

• <td></td>: celda de una tabla.

• <th></th>: celda de “cabecera”.

Ejemplo:<table>

<tr>

<td>Fila 1 izqda</td>

<td>Fila 1 dcha</td>

</tr>

<tr>

<td>Fila 2 izqda</td>

<td>Fila 2 dcha</td>

</tr>

</table>

Fila 1 izqda Fila 1 dcha

Fila 2 izqda Fila 2 dcha



Tablas

En la etiqueta de apertura <table> podemos utilizar los atributos:

• width=“num” / height=“num”: Ancho / Alto de la tabla en puntos o

porcentaje.

• border=“num”: Ancho del borde en puntos.

Con border=“0” obtenemos una tabla con divisiones invisibles.

• cellspacing=“num”: Espacio entre celdas.

• cellpadding=“num”: Espacio entre el borde de la celda y el contenido.

contenido contenidocellpadding

cellspacing



TablasEn las etiquetas de apertura de celda (<td> o <th>) podemos utilizar los atributos:

• width=“num”: anchura de la columna en puntos o en porcentaje.

• align=“left | right | center | justify”: Alineación horizontal

• valign=“top | bottom | middle”: Alineación vertical.

• rowspan=“num”: número de filas que ocupa la celda.

• colspan=“num”: número de columnas que ocupa la celda.

colspan = 2

rowspan = 2



Cajas (etiqueta <div>)

• La etiqueta <div></div> define una caja contenedora.

• Puede contener cualquier tipo de elemento (texto, imágenes, etc.)

u otras etiquetas <div> para crear subdivisiones.

• Se usan para organizar la disposición de elementos.

• Podemos indicar su posición de forma absoluta o relativa.

• Se recomienda su uso junto con CSS cuando se desea alinear

contenido (en vez de la etiqueta <table>).



Imágenes

• Para incluir una imagen se utiliza la etiqueta:

<img src="" alt=""/>

• Donde:

• src=“” ruta de la imagen.

• alt=“texto alternativo”, texto a mostrar en caso de no poder cargar la

imagen (también se utiliza en opciones de accesibilidad).

• Podemos usar “width” y “height” para redefinir el ancho y el alto de la

imagen.

• Por ejemplo:

<img src="cabecera.jpg" alt="Cabecera"/>



Enlaces

• Vinculan partes de un documento con otros documentos o con otras partes del mismo documento.

<a href="URL">Nombre del enlace</a>

href=”” establece la dirección URL a la que apunta el enlace.

• Por ejemplo:

<a href="es.wikipedia.org">Wikipedia</a>

• Podemos crear enlaces sobre otros objetos, como imágenes:

<a href="dirección_URL"><img src="imagen.jpg"/></a>



Formularios

La declaración queda recogida por <form></form>, donde tenemos que indicar:

• action=“”: acción a realizar al enviar el formulario: un fichero o dirección de e-mail.

• method=“”: método de transferencia de las variables. “post” envía los datos de forma

no visible; “get” los adjunta a la URL a la que se redirige.

• enctype=“”: tipo de codificación de la información enviada. Con method=“get” no

es necesario. Con method="post" podemos usar:

• application/x-www-form-urlencoded: valor predeterminado. Codifica todos los caracteres.

• multipart/form-data: requerido al enviar archivos. No codifica la información.

• text/plain: No codifica la información, solo cambia los espacios por el símbolo “+”.



Formularios

• Para añadir campos al formulario se utiliza la etiqueta:

<input type=“” name=“” />

• Donde:

• name=“”: nombre que se asigna al campo.

Se utilizará al enviar la información al servidor o por correo.

• type=“”: Indica el tipo de campo a utilizar.

Puede ser de muchos tipos: text, password, checkbox, radio, file, hidden, submit,

reset.

• value=“”: atributo opcional. Podemos usarlo para indicar el valor

inicial o acceder al valor actual del campo.



Formularios

• type=“text”: campo de tipo texto de una línea.

• maxlenght=“”: número máximo de caracteres.

• size=“”: número de caracteres a mostrar en pantalla.

• value=“”: indica el valor inicial del campo.

• type=“password”: oculta el texto introducido.

<input type=“text” name=“nombre” size=“50”/>

<input type=“password” name=“pass” size=“50”/>



Formularios• type=“checkbox”: permite marcar varias opciones a la vez.

• value=“”: valor que será enviado si la casilla está marcada.

• checked: atributo opcional, hace que la casilla aparezca marcada por defecto.

Ejemplo:

<input type="checkbox" name="option1" value="leche"/> Leche<br/>

<input type="checkbox" name="option1" value="pan" checked/> Pan<br/>

<input type="checkbox" name="option1" value="queso"/> Queso<br/>

• type=“radio”: solo permite marcar una casilla a la vez.

• value=“”: valor que será enviado si la casilla está marcada.

• checked: atributo opcional, hace que la casilla aparezca marcada por defecto.

Ejemplo:

<input type="radio" name="group1" value="leche"/> Leche<br/>

<input type="radio" name="group1" value="pan" checked/> Pan<br/>

<input type="radio" name="group1" value="queso"/> Queso<br/>



Formularios• type=“file”: permite subir archivos.

• size=“”: Indica el ancho del campo. Atributo opcional.

<input type="file" name="datafile" size="40"/>

• type=“hidden”: Valor oculto, no se puede modificar.

• type=“submit”: Representa el botón de “Enviar”.

• value=“texto”: texto que aparecerá en el botón.

• type=“reset”: borra el contenido de todos los campos.

• value=“texto”: texto que aparecerá en el botón.



Formularios - Campos de Selección• <select></select>: define una lista de opciones.

• size=“”: Numero de opciones visibles a la vez. • 1 → desplegable.

• >1 → lista con barra de desplazamiento.

• multiple: Permite seleccionar mas de un valor.

• <option value=“”>Nombre</option>: opciones de la lista.

• value=“”: valor que se enviará con el formulario.

• selected: opción seleccionada por defecto.

<select name="Colores" multiple>

<option value="r">Rojo</option>

<option value="g">Verde</option>

<option value="b">Azul</option>

</select>

<select name="Colores" SIZE="1">

<option value="r">Rojo</option>

<option value="g" selected>Verde</option>

<option value="b">Azul</option>

</select>



Formularios

<textarea></textarea>: Área de texto de múltiples líneas.

Los atributos que podemos utilizar son:

• name=“”: Nombre del campo.

• cols=“num”: Número de columnas de texto visibles.

• rows=“num”: Número de filas de texto visibles.



Eventos• Permiten realizar una acción cuando sucede un determinado evento.

Se definen como: nombreEvento=“funcionJavaScript()”

• onclick: se presiona el botón del ratón sobre un elemento.

• onmouseover: el cursor del ratón pasa sobre un elemento.

• onmouseout: el cursor del ratón sale fuera de un elemento.

• onfocus: un elemento recibe el enfoque.

• onkeypress: se presiona una tecla.

• onsubmit: al enviar un formulario.

• onreset: al resetear un formulario.

• onchange: un control pierde el enfoque y su valor ha sido modificado.

• Ejemplo:<script type="text/javascript">

function saveText() { /* acciones JavaScript */ }

</script>

<textarea id="myarea" onkeyup="saveText()"></textarea>



Símbolos HTML

Los caracteres especiales se deben convertir en entidades HTML para que se muestren correctamente en un navegador:

á á Á Á

é é É É

í í Í Í

ó ó Ó Ó

ú ú Ú Ú

ü ü Ü Ü

ñ ñ Ñ Ñ

(espacio) € €

< < > >

& & º °



CSS• Introducción • Adjuntar una hoja de estilo• Definición de estilos para etiquetas HTML• Identificadores y Clases• Estilos CSS básicos• Pseudo-clases• Capas• Más información



Introducción

• Hojas de estilo en cascada: Cascading Style Sheets.

• Permite definir la apariencia de una Web.

• Separa el contenido de la forma.

• Permite a los diseñadores mantener un control mucho más preciso

sobre la apariencia.

• El W3C (World Wide Web Consortium) es el encargado de formular

su especificación:

• 1ª versión → CSS 1 (1996)

• Última versión → CSS 2.1 (2011)



Introducción

• En versiones antiguas de HTML se añadía el formato dentro de las propias etiquetas:<font face="verdana" color="blue" size="12">Texto</font>

• Desventajas:• Obligaba a especificar el mismo formato en todas las etiquetas

para tener un diseño consistente. • Al cambiar un formato hay que cambiarlo en todas las etiquetas.

• Con CSS, las etiquetas HTML no deben proporcionar información sobre apariencia.



Ventajas del uso de CSS

• Control centralizado.

• Fácil actualización.

• Mayor claridad en el código.

• Menor tamaño.

• Uso de hojas de estilo locales (accesibilidad).

• Personalización según dispositivo (temas, impresora,

dispositivo móvil).



Adjuntar una hoja de estilo

Puede ser adjuntada de tres formas diferentes:

• Hoja de estilo externa

• Hoja de estilo interna

• Estilo en línea (inline)



Hoja de estilo externa

• La hoja de estilo que está almacenada en un archivo diferente:

<html>

<head>

<link rel="stylesheet" type="text/css" href="estilo.css"/>

...

</head>

• Opción recomendada. • Separa completamente el estilo del contenido.

Hoja de estilo interna

• Los estilos CSS se escriben dentro del propio documento HTML:

<html>

<head>

<STYLE type="text/css">



</STYLE>

</head>

…

• Solo usar para: diferenciar uno de los ficheros HTML de nuestra Web.



Estilo en línea (inline)

• Definir un estilo directamente dentro de una etiqueta HTML:

<h1 style="color: blue; font-size: 16pt;"> … </h1>

• Solo usar para: un estilo especial que se va a usar en un único caso.

• No es recomendable su uso de forma generalizada, pues genera:

• Inconsistencias

• Dificultades en actualización

• Rompe la separación estilo / contenido

• Mayor tamaño de código



Definición de estilos para etiquetas HTML

• Para definir una etiqueta HTML usamos la sintaxis:

etiqueta {

estilo CSS 1;

estilo CSS 2;

...

}

• Podemos definir varias etiquetas a la vez separándolas con comas:

etiqueta1, etiqueta2, etiqueta3 {

estilos CSS;

}



Definición de estilos para etiquetas HTML

• Definir etiquetas “dentro” de otras etiquetas.

contenedor etiqueta {

estilos CSS;

}

• Por ejemplo, definir el estilo de un enlace cuando esté dentro de un párrafo:

p a {

estilos CSS;

}

El estilo solo se aplicará cuando la etiqueta redefinida se encuentre dentro de la etiqueta contenedora.



Identificadores y Clases

• Permiten crear clases de estilos aplicables a etiquetas HTML, con la diferencia de:

• Identificador: único en todo el documento HTML.

#identificador { estilos CSS; }

• Clases: pueden repetirse.

.clase { estilos CSS; }

• Los identificadores se suelen usar con etiquetas "neutras" como <div> o <span>, para marcar partes de un documento.




• En HTML usamos “id” para asignar una clase tipo identificador y “class” para usar una clase:

<div id="capitulo">

<p>...</p>

<p class="destacado">....</p>

</div>

• En la hoja de estilos tendríamos:

#capitulo {

estilos CSS;

}

.destacado { estilos CSS;}




• También podemos usar estilos contenedores:

#identificador etiqueta {

estilos CSS;

}

• O aplicar estilos sólo a una determinada etiqueta:

etiqueta#identificador {

estilos CSS

}

.clase etiqueta { estilos CSS;}

etiqueta.clase { estilos CSS}



Estilos CSS

• La sintaxis básica para definir un estilo es:

atributo: valor;

• Los estilos se separan con punto y coma (;).

• Después del atributo se ponen dos puntos (y no un igual).

• Unidades de medida: • píxeles (px)

• puntos (pt)

• centímetros (cm)

• pulgadas (in)



Estilos de Fondo

• background-color: Un color, con su nombre o su valor RGB

background-color: green;

background-color: #000055;

• background-image: El nombre de la imagen con su camino relativo o

absoluto

background-image: url(mármol.gif);

background-image: url(http://www.url.com/fondo.gif)



Estilos para Cajas

• width o height: Unidades CSS | Porcentaje

width: 50px; width: 100%; height: 15px;

• margin: arriba dcha abajo izqda | arriba dcha abajo | arriba-abajo izqda-dcha | 4 márgenes

margin: 4px 2px 1px 2px; margin: 4px;

También podemos usar: margin-left, margin-right, margin-top, margin-bottom

• padding: arriba dcha abajo izqda | arriba dcha abajo | arriba-abajo izqda-dcha | 4 márgenes

padding: 4px 2px 1px 2px; padding: 4px;

También podemos usar: padding-left, padding-right, padding-top, padding-bottom



Estilos para Cajas

CONTENIDO

margin

padding

border



Estilos para Cajas

• border-color: color RGB o nombre de color

border-color: red; border-color: #ffccff;

Podemos usar: border-top-color, border-right-color, border-bottom-color, ...

• border-style: none | dotted | solid | double | groove | ridge | inset | outset

border-style: solid; border-style: double;

• border-width: Unidades CSS

border-width: 10px; border-width: 0.5in;

• border: <grosor> <tipo> <color>

border: 2px solid red;

También podemos usar: border-top, border-right, border-bottom y border-left



Pseudo-clases

• Permiten definir un estilo solo cuando suceda un determinado evento o se den unas condiciones:

• a:link - enlace que no ha sido explorado por el usuario.

• a:visited - enlaces ya visitados.

• a:active - enlace seleccionado con el ratón.

• a:hover - enlace con el puntero del ratón encima, pero no seleccionado.

• a:focus - enlace con el foco del sistema. También puede ser usado para un input.

• p:first-letter - primera letra de un párrafo.

• p:first-line - primera línea de un párrafo.

• Por ejemplo:

a:hover { color: blue; }

a:visited { color: darkgreen; }

p:first-letter { color: green; font-size: x-large; }



Capas

• float: none | left | right

Sirve para alinear un elemento a la izquierda o la derecha de un elemento anterior.

• clear: none | right | left

Indica que no se permiten elementos por ese lado del objeto.

float: left; float: left; float: left;

clear: left;



Capas

• position:relative; - Su posición depende de la de los demás.

• position:absolute; - Coloca los elementos en una posición exacta.

• top, bottom, left, right - Para indicar la posición.

position: relative;top: 10px;left: 10px;

position: absolute;top: 10px;left: 10px;



¿Preguntas...?

Programación web para móviles...• La Web móvil es la misma Web que la de escritorio, utiliza:...

Documents

Transcript of Programación web para móviles...• La Web móvil es la misma Web que la de escritorio, utiliza:...