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.

Anuncios

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