El otro dia buscando algo de inspiración para la creación de una landing page descubrí esta pagina la cual nos puede ser muy útil.
http://inspirationfeed.com/articles/business/six-ideas-for-your-successful-landing-page/
Otra de las novedades del HTML5 son los microdatos. Estos son una manera de describir un determinado tipo de información, como eventos, información personal o de la empresa.
Los microdatos usan atributos simples en las etiquetas html (normalmente <span> o <div>) para asignar una estructura o información a esos datos. En el siguiente ejemplo tenemos información sobre una persona y su empresa
<div> My name is Bob Smith but people call me Smithy. Here is my home page: <a href="http://www.example.com">www.example.com</a> I live in Albuquerque, NM and work as an engineer at ACME Corp. </div>
Este mismo ejemplo etiquetado con microdatos quedaria asi
<div itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Bob Smith</span>but people call me <span itemprop="nickname">Smithy</span>. Here is my home page: <a href="http://www.example.com" itemprop="url">www.example.com</a> I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span> at <span itemprop="affiliation">ACME Corp</span>. </div>
En la primera linea el itemscope indica el que el contenido del div es de tipo Person y cada una de las propiedades de la propiedad esta definida por el atributo itemprop, por ejemplo el itemprop=’name’ describe el nombre de la persona.
Mas información:
https://support.google.com/webmasters/answer/176035?hl=en
Imaginemos que queremos conocer que valor hay seleccionado en un campo select, para comprobar su valor o lo que necesitemos. Para hacer esto utilizaremos val().
<select id='ciudades' name='ciudades'>
<option value='BAR'>Barcelona</option>
<option value='MAD'>Madrid</option>
<option value='ZGZ'>Zaragoza</option>
</select>
<script>
$('#ciudades').change(function(){
var ciudad = $(this).val()
alert('Has seleccionado ' + ciudad);
});
</script>
En este ejemplo nos aparece un select en el cual nos da la opción de seleccionar entre tres ciudades, cuando cambiemos el valor nos mostrara un mensaje en pantalla en el cual nos mostrara el valor del value de la ciudad seleccionada.
Otro de los nuevos elementos que trae el HTML5 es el elemento datalist. La documentación acerca de este elemento nos dice lo siguiente:
Thedatalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
Es decir, el elemento datalist representa un conjunto de opciones que nos muestran opciones predefinidas para otros controles. En la visualización el elemento y sus hijos están ocultos.
A la hora de incluirlo dentro de nuestro código definimos el elemento y su conjunto de opciones, este elemento lo vincularemos por ejemplo con un campo input
<label>Airport: <input type="text" list="airports" name="to" /> <datalist id="<span class="hiddenSpellError" pre="">airports</span>"></datalist> value='ATL' label="Atlanta"> value='MEM' label="Memphis"> value='LHR' label="London Heathrow"> value='LAX' label="Los Angeles"> value='FRA' label="Frankfurt"> </datalist>
Como se ve en la imagen, nos aparece el value en negrita y el valor de label un poco mas claro, y una vez seleccionado el valor, en el campo de texto se queda el valor del value.
Estos elementos pueden ser reutilizados dentro de una pagina web, por ejemplo si quisiéramos poner una lista de aeropuertos de origen y destino, nos podría valer con el mismo datalist.
Este elemento esta soportado por todos los navegadores a excepción de Safari.
Mas información:
http://www.w3.org/TR/html5/forms.html#the-datalist-element
http://www.w3schools.com/tags/tag_datalist.asp
Hoy he vuelto a revisitar el complemento de Google para traducir una pagina web a cualquier idioma. En lineas generales lo ha hecho bastante bien, aunque, hay me he encontrado unos cuantos inconvenientes.
No voy a explicar aquí como integrarlo ya la web que genera el código a integrar esta muy clara y nos lo explica muy bien http://translate.google.com/translate_tools.
El primero es muy visual, ya que en la web que he traducido, estoy usando bootstrap y la barra de traducción de Google me tapa todo el menú.
El segundo ha sido, vamos a calificarlo como gracioso, ya que en la web que he traducido, hay palabras sueltas en inglés y cuando traduces la pagina al inglés, te traduce los términos ingleses al castellano.
Este segundo problema, mirando la documentación para webmasters he encontrado la manera de solucionarlo, y es establecer la clase «notranslate» a las palabras o frases que no quieres que traduzca. Por ejemplo
<p>La etiqueta <span class='notranslate'>form</span> se utiliza para crear formularios web</p>
Otra de las cosas a tener en cuenta a la hora de realizar traducciones de paginas web, sobre todo a la hora de posicionamiento es que, la web traducida no sera indexada en el directorio de Google. Lo dice clarito en la documentación
Search engine indexing The automatically translated version of your web page will not be indexed by search engines.Mas información: https://support.google.com/translate/#2641276
Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.
Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.
A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.
Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs
«El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule».Y la definición de reset dice «El estado reset de un button representa un button que cuando se activa restablece el formulario».
Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.
Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla
$('button[type=reset]').click(function(){
$('#idCampoHidden').val('');
});
En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden
El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset
Bootstrap es para mi uno de los mejores «Frameworks» a la hora de desarrollas webs compatibles con dispositivos móviles, pero puede resultar un poco básico en algunos momentos. Buscando por internet descubrí Bootswatch en el cual tenemos unos cuantos temas que nos pueden ayudar a la hora de realizar nuestra web. Estos temas están disponibles tanto para la versión 2.3.2 de Bootstrap como para la nueva versión 3
Uno de los problemas que nos encontramos a la hora de diseñar paginas con HTML5 es la compatibilidad con navegadores antiguos. Hay muchos usuarios que usan versiones anteriores a Internet Explorer 9, y en esas versiones, no reconocen los nuevos elementos de HTML5. Una de las maneras de solucionar esto es incluyendo el script HTML5 shiv en la cabecera dentro de un condicional, para que cuando el navegador sea menor que esa versión lo cargue y así pueda leer los elementos HTML5.
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Uno de los atributos que debemos especificar en toda pagina web es el atributo Charset, este va a definir que tipo de caracteres vamos a utilizar en la web, para que el navegador lo detecte y lo visualice correctamente.
Este atributo, en HTML4 lo definimos de la siguiente manera
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Con HTML5 definir se ha introducido el atributo charset el y es mas sencillo
<meta class="charset="UTF-8">
Para asegurarnos que todos los navegadores leen la propiedad de codificación de caracteres, la declaración de este debe ser incluida en los primeros 512 caracteres de nuestro documento, es decir, para evitar problemas, debería definirse inmediatamente después de la etiqueta head.
Una de las novedades en el HTML5 es el uso de Web Storage para almacenar los datos de la web en el navegador. Hasta aquí parecería que estoy hablando de las cookies pero a diferencia de estas el Web Storage es mas seguro y rápido y los datos no se incluyen en cada consulta, solo cuando se necesitan, ademas es posible guardar mucha cantidad de datos sin afectar al rendimiento de la web.
El Web Storage esta soportado en Internet Explorer 8+, Firefox, Opera, Chrome y Safari.
Hay dos nuevos objetos para almacenar los datos del cliente:
* localStorage – Almacena los datos sin limite de tiempo.
*sessionStorage – Almacena los datos durante una sesión.
El objeto localStorage almacena los datos indefinidamente. Los datos no son borrados cuando el navegador se cierra y estarán disponibles al día siguiente, semana, o año.
localStorage.propiedad = 'valor' //guarda el dato console.log(localStorage.propiedad) //devuelve el dato
El objeto sessionStorage es igual que el objeto localStorage, excepto que almacena el datos solo una sesión. Los datos son eliminados cuando el usuario cierra la ventana del navegador
rubenlacasa.es 