Archivo de la etiqueta: HTML

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.

Required en radio o checkbox multiple

A veces cuando diseñamos un formulario tenemos que incluir en este elementos radio o checkbox, y queremos que estos sean obligatorios, en el resto de elementos lo podemos tener claro le ponemos el atributo “required” y ya, pero estos elementos sueles dar multiples opciones, entonces que hacemos, lo ponemos en todos el atributo “required”, pues si, esa es una de las soluciones, pero hay otra mas sencilla, que es ponerlo solo en el ultimo.


<input type='checkbox' name='opcion' value='si' required>

<input type='checkbox' name='opcion' value='no' required>


<input type='checkbox' name='opcion' value='si'>

<input type='checkbox' name='opcion' value='no' required>

Ejemplo: http://www.sacredheartprimary.co.uk/macss-js/webforms2/testsuite/021.html

Como eliminar las extensiones .php, .html y htm de nuestra pagina web con .htaccess

Apache Web Server

A la hora de presentar nuestra pagina web, a veces nos puede interesar, que el usuario no sepa como esta hecha la pagina web, o simplemente queremos simplificar el enlace para que se pueda acceder de una manera sencilla.

He encontrado esta pagina web, la cual merece ser visitada, ya que esta muy bien hecha, en la cual nos explican de una manera muy sencilla, aunque en inglés, de como configurar, si usamos Apache, con .htaccess, para ocultar las extensiones.

http://alexcican.com/post/how-to-remove-php-html-htm-extensions-with-htaccess/

Seis ideas para crear una landing page – Web Tips

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/

Enhanced by Zemanta

Los microdatos – HTML5 Tips

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:

http://dev.w3.org/html5/md/

https://support.google.com/webmasters/answer/176035?hl=en

Enhanced by Zemanta

Obtener el valor seleccionado en un Select con jQuery – jQuery Tips

JQueryUIImaginemos 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.

Enhanced by Zemanta

Input autocompletable sin Javascript – HTML Tips

El elemento datalist

Otro de los nuevos elementos que trae el HTML5 es el elemento datalist.  La documentación acerca de este elemento nos dice lo siguiente:

The datalist 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.

¿Como podemos utilizarlo?

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=&quot;hiddenSpellError&quot; pre=&quot;&quot;>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>

Al pulsar la tecla L se muestra los aeropuertos que empiezan con L
Al pulsar la tecla L se muestra los aeropuertos que empiezan con L

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

Enhanced by Zemanta

Integrar Google Translator en nuestra web – Google Tips

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

Enhanced by Zemanta

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

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

Ocultar la extensión de nuestras paginas web – Apache Tips

Apache Web Server

A veces, por el motivo que sea, puede que no nos interese que los visitantes que accedan a nuestra pagina web sepan como esta hecha, algunas veces este motivo es por motivos de seguridad, y otras, por motivos de posicionamiento web, queda bastante mejor tener un enlace de la manera http://midominio.com/contacta que http://midominio.com/contacta.php .

Si el servidor en el cual esta nuestra web es Apache y tiene el mod_rewrite habilitado podemos hacerlo creando un fichero .htaccess en la raíz de nuestro sitio de la siguiente manera:

Options Indexes FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ [NC,L]
RewriteRule ^([A-Za-z0-9-]+)/?$ $1.php
ErrorDocument 404 /404.php

view raw
.htaccess
hosted with ❤ by GitHub

Este fichero esta configurado para ficheros php, si lo queremos hacer con ficheros html o htm solo tenemos que cambiar donde pone .php en la linea 7 por .html o .htm.

Decir también que la ultima linea no es necesaria, pero a mi me gusta ponerla ya que así evitamos que si alguien “escribe mal” la ruta no salga un error de servidor. Lo de “escribe mal” lo pongo entre comillas ya que muchas veces se hace intencionadamente con el único objetivo de conocer las características del servidor en el cual se esta ejecutando la web, así que no cuesta nada crear nuestra propia pagina de error o bien que aparezca la principal del sitio.

Enhanced by Zemanta