HTML5 - Part 2

Guardar saltos de linea de un textarea

Cuando introducimos texto en un textarea para despues mostrarlo en la web los saltos de linea se codifican con /n/r en windows y como /n en linux y mac os x. Para poder mostrar estos saltos de linea fuera del textarea debemos convertirlos a <br/>.

Esto se pude hacer desde php con la siguiente función php al realizar el insert en la BD, por ejemplo: Leer mas...

15oct

HTML5: etiquetas no soportadas en la versión 5 del lenguaje html

Categoria(s) HTML5 Comentar

El nuevo lenguaje de programación html en su versión 5, el html5, deja obsoletas muchas etiquetas válidas en el anterior lenguaje html4.

Hagamos un repaso de las mismas:

<acronym> : explica acrónimos, como por ejemplo, que significado tienen las organizaciones de las que sólo se muestran sus siglas.
En su lugar usar la etiqueta <abbr> : explica abreviaciones.

<applet> : inserta un applet (script) en el código html
En su lugar usar la etiqueta <object> : ejecuta aplicaciones externas (Flash, p.e.) Leer mas...

14oct

Autoredimensionar alto de iframe

Categoria(s) HTML5 | JQuery Comentar

Cuando usamos iframes en nuestras aplicaciones web el principal problema que se nos presenta es adaptar el alto del iframe al contenido que va a cargar. Obviamente esto es más problemático cuanta más disparidad de tamaños pueda tener el contenido a mostrar en el interior del iframe.

Para solucionar esto, existe la posibilidad de cambiar el tamaño del iframe mediante javascript. Lo primero es encerrar nuestro iframe en una capa que podamos redimensionar a nuestro antojo y al iframe le ponemos altura 100%. Adaptandose de este modo a la capa que lo contiene en todo momento. Leer mas...

13oct

Input solo numérico

Categoria(s) HTML5 | JQuery 4 Comentarios

Vamos a ver como hacer para que un input de tipo texto solo admita valores numéricos usando JavaScript.

Lo primero es la función JavaScript. Leer mas...

10oct

MAILTO: como establecer un email de contacto

Categoria(s) HTML5 Comentar

Como página de contacto de una web, normalmente nos podemos encontrar un formulario de contacto o una cuenta de correo que pulsando en ella enlaza directamente a enviar un mail a la dirección facilitada.

Para este último caso, se utiliza el atributo de href de la etiqueta a: MAILTO.

Mailto:correo1@web.es

Pero además, podremos usar las siguientes propiedades de MAILTO:

cc = con_copia@web.es
bcc = copia_oculta@web.es
subject = subject del email
body = cuerpo del email Leer mas...

30sep

Lorem ipsum: texto de relleno en webs de desarrollo

Categoria(s) Diseño | HTML5 | PHP 1 Comentario

Cuando estamos desarrollando una web, bien sea en fase de diseño o bien en parte de programación, para rellenar el texto que vamos a mostrar en la web y ver como quedaría el contenido en ella, una buena práctica y elegante a la vez, es rellenar ese texto con lorem ipsum.

Se suele usar para realizar demostraciones, llenar de contenido las webs embrionarias ante la ausencia de contenido por parte del cliente, etc.
Es muy utilizada por tener la cualidad de tener una distribución de letras muy similar al inglés. Leer mas...

29sep

Como detectar iPad/iPhone con javascript

Categoria(s) Diseño | HTML5 Comentar

A veces nos puede resultar muy útil si queremos identificar un aparato de apple en nuestro navegador, para ello nos basta con:

function iPhone()
{
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));
}
function iPad()
{
     return ( (navigator.platform.indexOf("iPad") != -1));
}

29sep

Páginas web HTML5 y UTF-8: codificación correcta de los caracteres en PHP

Categoria(s) HTML5 | PHP Comentar

Cuando se desarrollan páginas web en utf-8, muchas veces cuando se trabaja en lenguajes servidor tipo PHP, la información obtenida a través de la base de datos que se muestra en la web, por ejemplo MySQL, se puede llegar a mostrar incorrectamente.

Cabecera html5 con codificación utf-8:

<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  ..
</head>

Sucede que ciertos caracteres como la ñ, €, á, etc. pueden ser sustituidos como caracteres raros a la hora de ser mostrados en la web. Leer mas...

21sep

Realizar auto zoom de nuestra web en iPhone

Categoria(s) Diseño | HTML5 | Ipad Comentar

Algo que puede resultar de mucha ayuda es que los visitantes de nuestra web, vena con el zoom nuestra página, recordemos que si no la tenemos adapta el uso del zoom desde el iPhone es imprescindible para leer correctamente los contenidos. Para ello nos basta con poner lo siguiente:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Y listo ya tenemos el zoom al máximo.

12sep

Usar media Querys para seleccionar estilos para Ipad o Iphone

Categoria(s) CSS3 | HTML5 Comentar

Una de esas pequeñas aportaciones maravillosas que nos trae el HTML 5, es que nos permite la utilización de media querys, en este caso os vamos a enseñar a usarlas para poder seleccionar la hoja de estilo correspondiente a la resolución.

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Como es obvio aquí el truco esta en tener diferentes hojas de estilo que se adapten a las diferentes resoluciones, quedándosenos así una web adaptable totalmente.