Ir al contenido principal

Entradas

Mostrando entradas de septiembre, 2014

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:SelectoresModelo de cajasBordes y fondosEfectos de textoTransformaciones 2D / 3DAnimaciones
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.SintaxisUna regla CSS consiste en un selector y un bloque de declaraciones: 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 prop…

Herramientas para 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 CSS3Bear CSSBear 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 designScreenflyPrueba tu web en cualquier resolución como puede ser escritorio, tablet, televisiones, móviles...ResponsinatorHerramienta similar a la anterior, pero con menos opciones.Diseño WebFlatuicolorpickerFlatuicolorpicker es una paleta de colores perfecta para páginas con diseños planos.GraphicburgerRecursos gráficos gratis para uso personal y comercial.Bancos de imágenesPexelsImágenes de alta calidad gratis para uso personal y comercial.TipografíasGoogle Fon…

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 altu…

Curso HTML 5: Nuevos atributos para formularios. Parte I

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"> Nombr…

Font Awesome Cheat Sheet

¿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íasEn el siguiente enlace, podemos observar una comparativa entre otras librerías de iconosPodemos 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).I…

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 BootstrapDefaultEs 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> PrimaryTiene 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> SuccessIndica una acción que se ha llevado a cabo de manera positiva. <button type="button" class="btn btn-success">Success</button> InfoBotón contextual que indica información adicional o mensajes de alerta. <button type="button" class="btn btn-info">Info</button> …

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="Est…

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  Intern…

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/estructuralesarticle: 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 pue…