viernes, 19 de septiembre de 2014

Curso CSS 3: Introducción

Curso CSS 3: Introducción

¿Qué es CSS3?

CSS son las siglas de Cascading Style Sheets (hoja de estilo en cascada). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar.
El número 3 hace referencia a la última versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores.

CSS3 conserva la antigua especificación de CSS y además cuenta con nuevas funcionalidades. Algunas de las más importantes son las siguientes:

  • Selectores
  • Modelo de cajas
  • Bordes y fondos
  • Efectos de texto
  • Transformaciones 2D / 3D
  • Animaciones

Hay que tener presente que aún está en fase de desarrollo. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades.

Sintaxis

Una regla CSS consiste en un selector y un bloque de declaraciones:

Sintaxis CSS3

Antes de la llave de apertura nos encontramos con el selector, en este caso hace referencia al párrafo. Dentro de las llaves nos encontramos con las declaraciones, la palabra antes de los dos puntos es la propiedad. Después de los dos puntos viene el valor. De esta manera aplicaremos a los párrafos un color rojo y el contenido estará centrado.

La sintaxis básica es completamente igual tanto en la versión 3 de CSS como en sus predecesores. Más adelante nos introduciremos de lleno en las nuevas funcionalidades y su soporte en los distintos navegadores.

viernes, 12 de septiembre de 2014

Herramientas para desarrollo web

Herramientas desarrollo web

Esta entrada está destinada a ser una recopilación de las herramientas que me parecen útiles a la hora de realizar una web. Están clasificadas por categorías, para facilitar su búsqueda. Actualizaré la lista conforme vaya descubriendo o recordando herramientas que haya utilizado, o que me llamen la atención y merezcan la pena estar presentes.

HTML 5 y CSS3

Bear CSS

Bear CSS es una pequeña herramienta que sirve para generar una plantilla CSS que contendrá todos los elementos que hayamos definido en el documento HTML.

Responsive design

Screenfly

Prueba tu web en cualquier resolución como puede ser escritorio, tablet, televisiones, móviles...

Responsinator

Herramienta similar a la anterior, pero con menos opciones.

Diseño Web

Flatuicolorpicker

Flatuicolorpicker es una paleta de colores perfecta para páginas con diseños planos.

Graphicburger

Recursos gráficos gratis para uso personal y comercial.

Bancos de imágenes

Pexels

Imágenes de alta calidad gratis para uso personal y comercial.

Tipografías

Google Fonts

Cientos de fuentes gratuitas de uso libre optimizadas para la web.

Font Squirrel

Fuentes 100% gratuitas para uso comercial.

SEO

Übersuggest

Obtén nuevas ideas para tus keywords.

martes, 9 de septiembre de 2014

Curso HTML 5: Nuevos atributos para formularios. Parte II

Curso HTML 5: Nuevos atributos para formularios. Parte II

En anteriores entradas, pudimos ver la primera parte de los nuevos atributos para formularios que HTML5 trae consigo. En esta entrada vamos a descubrir los que nos faltan. Estos atributos permiten una mejor optimización y control de datos.

A continuación puedes observar un listado detallado y su soporte en diferentes navegadores:

Nuevos atributos para formularios

<input> Atributo formtarget Indica donde mostrar la respuesta que recibiremos después de enviar el formulario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="validacion.php">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formtarget="_blank"
  value="Enviar a una nueva página">
</form> 

<input> Atributos height y width Asignamos una altura y un ancho especifico al <input>. Estos atributos solo son utilizados para <input type="image">

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="image" src="img_submit.gif" alt="Imagen" width="48" height="48"> 

<input> Atributo list Este atributo hace referencia a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input list="navegadores">

<datalist id="navegadores">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  

<input> Atributos min y max Especificamos un valor mínimo y máximo para un elemento <input>. Funciona con los siguientes tipos de input: number, range, date, datetime, datetime-local, month, time y week.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Introduce una fecha anterior a 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Introduce una fecha posterior a 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Cantidad (entre 1 y 5):
<input type="number" name="cantidad" min="1" max="5">  

<input> Atributo multiple Cuando está presente, permitimos asignar más de un valor en un elemento <input>.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Selecciona imágenes: <input type="file" name="img" multiple> 

<input> Atributo pattern Especifica una expresión regular para que el elemento <input> valide el contenido. Funciona con los siguientes tipos de input: text, search, url, tel, email, and password. Es conveniente usar el atributo title para ayudar al usuario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Teléfono: <input type="text" name="telefono" pattern="[0-9]{9}" title="Nueve dígitos">

<input> Atributo placeholder Aplicamos un texto descriptivo dentro del <input> que desaparecerá cuando introduzcamos un valor.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="text" name="fname" placeholder="Nombre">

<input> Atributo required Cuando está presente, especifica que dicho campo debe ser completado antes de mandar el formulario. Funciona con los siguientes tipos de input: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Usuario: < input type="text" name="usrname" required>

<input> Atributo step Este atributo especifica un intervalo de números para un elemento <input>. Si step="3", los números pueden ser -3, 0, 3, 6, etc. Puede combinarse con los atributos min y max. Funciona con los siguientes tipos de input: number, range, date, datetime, datetime-local, month, time and week.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="number" name="puntos" step="3">

lunes, 8 de septiembre de 2014

Curso HTML 5: Nuevos atributos para formularios. Parte I

Curso HTML 5: Nuevos atributos para formularios

Como hemos podido ver en anteriores entradas, HTML5 trae consigo una amplia lista de nuevos tipos de inputs. En esta entrada vamos a centrarnos en los nuevos atributos para formularios. Estas nuevas características permiten una mejor optimización y control de datos.

A continuación puedes observar un listado con los nuevos atributos para formularios de HTML 5 y su soporte en diferentes navegadores:

Nuevos atributos para formularios

<form> / <input> Atributo autocomplete Podemos controlar que campos tendrán la opción de autocompletado activada o desactivada. Cuando la está activada, el navegador automáticamente completa los valores basados en antiguos datos que hemos introducido anteriormente. Es posible asignar la característica de autocompletado al formulario, y desactivarla para cualquier campo específico. También funciona a la inversa.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="validacion.php" autocomplete="on">
  Nombre:<input type="text" name="name"><br>
  Dirección: <input type="text" name="adress"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form> 

<form> Atributo novalidate Si queremos que los campos de un formulario no sean validados cuando se envíe, le asignamos el atributo novalidate

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form> 

<input> Atributo autofocus Cuando asignamos este atributo a un campo del formulario, automáticamente estará seleccionado cuando la página cargue.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  Nombre:<input type="text" name="fname" autofocus><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<input> Atributo form El atributo form referencia un input fuera del formulario que pertenece a este.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" id="form1">
  Nombre: <input type="text" name="fname"><br>
  <input type="submit" value="Enviar">
</form>

Apellidos: <input type="text" name="lname" form="form1">

<input> Atributo formaction este atributo especifica la URL de la página que validará el formulario cuando sea enviado.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Enviar como administrador">
</form> 

<input> Atributo formenctype El atributo formenctype especifica la codificación en la que será enviada la información al servidor (solo para formularios con method="post")

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_post_enctype.asp" method="post">
  Nombre: <input type="text" name="fname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formenctype="multipart/form-data"
  value="Enviar como Multipart/form-data">
</form>  

<input> Atributo formmethod El atributo formmethod especifica el método en el que será enviado el formulario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp" method="get">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Enviar usando POST">
</form>  

<input> Atributo formnovalidate Cuando utilizamos este atributo, especificamos que el elemento <input> no será validado cuando se envíe.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="demo_form.asp">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Enviar"><br>
  <input type="submit" formnovalidate value="Enviar sin validación">
</form> 

domingo, 7 de septiembre de 2014

sábado, 6 de septiembre de 2014

¿Qué es Font Awesome?

¿Qué es Font Awesome?

¿Qué es Font Awesome?

Font Awesome es una librería de iconos que podemos aplicar fácilmente a cualquier web. Sobre todo es interesante su integración con Bootstrap ya que hay un apartado dedicado especialmente para él con ejemplos prácticos.

Disponemos de 479 iconos vectoriales que podemos modificar a nuestro gusto con reglas CSS — tamaño, color, sombras...

Font Awesome es de uso libre, lo que quiere decir que podemos implementar los iconos en cualquier proyecto web con fines comerciales sin problemas. Al tratarse de archivos vectoriales, por muy grande que hagamos un icono no perderá calidad.

Diferencias con otras librerías

En el siguiente enlace, podemos observar una comparativa entre otras librerías de iconos

Podemos observar que la diferencia principal frente a los glyphicons que vienen con Bootstrap es que tiene el doble de iconos a elegir. Además con Font Awesome podemos crear listas visualmente atractivas y disponemos de iconos con efectos animados (bastante útiles para preloaders).

Implementación

Su implementación es sencilla, tenemos que agregar la siguiente línea de código en la cabecera. Antes de la etiqueta de cierre </head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

A continuación, en la sección de nuestra página donde queramos incluir el icono que hemos escogido introducimos el siguiente código:


Usuario <i class="fa fa-user"></i>

El resultado del ejemplo anterior sería el siguiente: Usuario

En resumen, si queremos utilizar un conjunto de iconos para darle más vida a nuestra web Font Awesome cumple sobradamente con dicho cometido. En próximas entradas veremos ejemplos prácticos de su uso.

viernes, 5 de septiembre de 2014

Curso Bootstrap: Botones

Curso Bootstrap: Botones

Visuales, funcionales, necesarios... Podríamos catalogar con mil adjetivos a los botones que abundan en Internet y seguro que se nos ocurrirían mil más. Por eso disponemos de estos elementos en Bootstrap y cómo vamos a ver, cada uno tiene una función.

Botones Bootstrap

Default

Es un botón estándar, poco destacable. No nos indica ninguna función de su posible funcionamiento.


<button type="button" class="btn btn-default">Default</button>

Primary

Tiene un peso visual mayor que el botón anterior. Indica la primera acción de un lote de botones.


<button type="button" class="btn btn-primary">Primary</button>

Success

Indica una acción que se ha llevado a cabo de manera positiva.


<button type="button" class="btn btn-success">Success</button>

Info

Botón contextual que indica información adicional o mensajes de alerta.


<button type="button" class="btn btn-info">Info</button>

Warning

Indica que las acciones con este botón deben de ser tomadas con precaución.


<button type="button" class="btn btn-warning">Warning</button>

Danger

Indica que las acciones con este botón son potencialmente peligrosas.


<button type="button" class="btn btn-danger">Danger</button>

Link

Este botón tomará la apariencia de un enlace, pero manteniendo las mismas cualidades.


<button type="button" class="btn btn-link">Link</button>

Tamaño Botones Bootstrap

Además de elegir el tipo de botón según nuestras necesidades, otra opción de la que disponemos es elegir el tamaño de estos.

Así podremos elegir entre cuatro opciones preestablecidas: large (.btn-lg), default, small (.sm), extra small (.xs); y combinarlas con las clases anteriores.

Large

El tamaño más grande que podemos elegir.


<button type="button" class="btn btn-primary btn-lg">Large button</button>

Default

Tamaño estándar, si no escogemos ninguna opción este es el tamaño que se utiliza por defecto.


<button type="button" class="btn btn-primary">Default button</button>

Small

El resultado es un botón de tamaño algo más reducido del que se utiliza por defecto.


<button type="button" class="btn btn-primary btn-sm">Small button</button>

Extra small

El tamaño más reducido que podemos aplicarle a un botón mediante las clases predefinidas.


<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Block level button

Por último, si queremos que un botón ocupe el ancho total de la caja que le contiene añadimos la siguiente clase .btn-block.


<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

Estado de los Botones

Cuando presionamos un botón, este aparecerá como activo (con un fondo oscuro y unas sombras internas). Mediante los estilos predefinidos en Bootstrap, podemos añadir la clase .active para los casos en los que sea necesario que el estado de un botón sea siempre ese.

Active Button


<button type="button" class="btn btn-primary btn-lg active">Button</button>

También podemos crear botones inactivos, añadiendo el atributo "disabled", en los que no será posible clicar.

Disable Button

Botón inactivo sin funcionamiento.


<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Button</button>

Etiquetas de los botones

Por último, un dato interesante es la apariencia de botón que le podemos dar a elementos que no lo son. Estos elementos son: enlaces e inputs.


<a class="btn btn-default" href="#" role="button">Enlace</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Enviar">

Desde Bootstrap recomiendan que utilicemos la etiqueta button siempre que sea posible para evitar problemas entre navegadores y versiones antiguas.

jueves, 4 de septiembre de 2014

Etiquetas HTML5: picture

Etiquetas HTML5: picture

Esta etiqueta es una novedad aún no implementada de HTML 5 cuya principal ventaja será la optimización de la carga de imágenes en dispositivos portátiles. Además favorecerá la correcta visualización de estas.

Cuando tenemos una imagen con un ancho de unos 600px por ejemplo, en los monitores actuales de escritorio o en un portátil se verá sin problemas. Pero si dicha web está maquetada en responsive, la misma imagen en un dispositivo móvil perderá información al ser redimensionada. Y puede que el resultado no sea el que esperábamos.

Con la etiqueta picture lo que conseguiremos es mostrar la misma imagen pero optimizada dependiendo de la resolución del dispositivo.

La sintaxis es la siguiente:

<picture>


<picture>
    <source media="(min-width: 800px)" src="high-res.jpg">
    <source media="(min-width: 480px)" src="med-res.jpg">
    <source src="low-res.jpg">
    <img src="fallback.jpg" alt="Esta imagen se cargará en navegadores antiguos (IE7/8).">
</picture>

Al igual que con un proyecto responsive, podemos crear unos condicionales dependiendo de la resolución.

Así la primera fila cargaría una imagen grande previamente creada a partir de una resolución de 800px.

La segunda cargaría una imagen mediana a partir de 480px.

La tercera cargaría una imagen pequeña.

Y por último dejamos una imagen por defecto para navegadores antiguos que no entiendan la etiqueta picture.

Es una etiqueta bastante interesante con múltiples opciones que en un futuro cuando esté implementada será un pilar importantísimo a la hora de optimizar la carga en páginas web. Todas las opciones que hemos visto en el ejemplo anterior son configurables en cuanto a medidas o resoluciones.

En esta web explican el concepto de la etiqueta <picture> con todo detalle.

Curso HTML 5: Nuevos tipos de input

Curso HTML 5: Nuevos tipos de input

Como hemos podido ver en anteriores entradas, HTML5 trae consigo una amplia lista de nuevos elementos. En esta entrada vamos a centrarnos en los nuevos tipos de input para formularios. Estas nuevas características permiten una mejor validación y control de datos.

A continuación puedes observar un listado con los nuevos input de HTML 5 y su soporte en diferentes navegadores:

color: Muestra una lista con colores a elegir.

  Chrome   Internet Explorer   Firefox   Safari   Opera

date: Caja de texto donde tenemos la opción de insertar la fecha que queramos.

  Chrome   Internet Explorer   Firefox   Safari   Opera

datetime: Además de la fecha, también podemos escoger la hora con huso horario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

datetime-local: Además de la fecha, también podemos escoger la hora sin huso horario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

email: Campo destinado para las direcciones de correo. Dependiendo del navegador puede ser validado automáticamente.

  Chrome   Internet Explorer   Firefox   Safari   Opera

month: Permite seleccionar cualquier mes del año.

  Chrome   Internet Explorer   Firefox   Safari   Opera

number: Destinado para campos que deben ser numéricos. Se puede añadir restricciones de cantidad.

  Chrome   Internet Explorer   Firefox   Safari   Opera

range: Selecciona los valores de un rango determinado por nosotros. Dependiendo del navegador puede visualizarse como un slider.

  Chrome   Internet Explorer   Firefox   Safari   Opera

search: Campo de búsqueda.

  Chrome   Internet Explorer   Firefox   Safari   Opera

tel: Campo destinado para contener un número de teléfono.

  Chrome   Internet Explorer   Firefox   Safari   Opera

time: Permite seleccionar la hora sin huso horario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

url: Campo destinado para las direcciones web. Dependiendo del navegador puede ser validado automáticamente.

  Chrome   Internet Explorer   Firefox   Safari   Opera

week: Permite seleccionar cualquier semana del año.

  Chrome   Internet Explorer   Firefox   Safari   Opera

miércoles, 3 de septiembre de 2014

Curso HTML 5: Nuevos elementos semánticos

Curso HTML 5: Nuevos elementos semánticos

En la anterior entrada aprendimos qué es HTML 5 y algunas de las novedades que trae consigo. Comprendimos la nueva estructura de la que se van a componer las páginas y su significado semántico para el posicionamiento web. Pero aún hay más...

A continuación puedes observar un listado con los nuevos elementos HTML 5 y su soporte en diferentes navegadores:

Nuevos elementos semánticos/estructurales

article: Contendrá texto distribuido independientemente de la web. Es decir, está pensado para albergar noticias, comentarios, entradas...

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

aside: Similar a a un sidebar, donde debe haber contenido relacionado al contenido de la web.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

bdi: Aísla una parte de texto que puede ser formateado en una dirección distinta de otro texto fuera de ella.

  Chrome 16.0   Internet Explorer   Firefox 10.0   Safari   Opera

details: Especifica detalles adicionales que el usuario puede mostrar u ocultar.

  Chrome 12.0   Internet Explorer   Firefox   Safari 6.0   Opera 15.0

dialog: Define un cuadro de diálogo.

  Chrome Canary   Internet Explorer   Firefox   Safari 6.0   Opera

figcaption: Es el encargado de darle un título descriptivo a la etiqueta figure.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

figure: Representa un contenido independiente.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

footer: Píe de página.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

header: Cabecera de la página.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

main: El contenido principal de un documento.

  Chrome 6.0   Internet Explorer   Firefox 4.0   Safari 5.0   Opera 11.1

mark: Resalta el texto deseado.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

menuitem: Crea un menú contextual (pulsando botón derecho del ratón sobre el elemento) en el que podemos incluir varias opciones.

  Chrome   Internet Explorer   Firefox 8.0   Safari   Opera

meter: Representa una escala de valores con un resultado conocido.

  Chrome 8.0   Internet Explorer   Firefox 6.0   Safari 6.0   Opera 11.0

nav: Dentro de esta etiqueta incluiremos los enlaces para que el usuario navegue entre nuestras diferentes secciones.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

progress: Representa una barra de progreso.

  Chrome 8.0   Internet Explorer 10.0   Firefox 16.0   Safari 6.0   Opera 11.0

rp: Consiste en mostrar una aclaración del contenido si el navegador no soporta anotaciones en Ruby.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

rt: Define una explicación sobre la pronunciación de los caracteres en tipografías como la asiática.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

ruby: Las anotaciones Ruby son utilizadas para tipografías asiáticas, para mostrar la pronunciación de los caracteres.

  Chrome 5.0   Internet Explorer 5.5   Firefox   Safari 5.0   Opera 15.0

section: Una sección es la agrupación de contenido sobre una temática, convenientemente con un encabezado.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

summary: Crea una cabecera para la etiqueta <details>.

  Chrome 12.0   Internet Explorer   Firefox   Safari 6.0   Opera 15.0

time: Su funcionamiento básicamente es para interacciones producir mejores resultados en los motores de búsqueda.

  Chrome 6.0   Internet Explorer 9.0   Firefox 4.0   Safari 5.0   Opera 11.1

wbr: Si la palabra o frase que introducimos es demasiado larga y el ancho total es menor, con esta etiqueta crearemos un salto de línea cuando sea necesario.

  Chrome 1.0   Internet Explorer   Firefox 3.0   Safari 4.0   Opera 11.7