Diseño web

Cómo añadir CSS en nuestra web

estilos-cssEn nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros archivos HTML. A continuación, veremos tres formas diferentes para incluir CSS en un documento HTML.

1- Incluir CSS en el mismo documento HTML

Esto se hace en el HEAD del documento, es decir, entre las etiquetas <head></head>. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar una a una todas las páginas que incluyen el estilo que se va a modificar.

En nuestra página html quedarían incluidos así:

 

<!DOCTYPE html >
<html lang="es">
<head>

<title>Estilos CSS - Ejemplo</title>
<style type="text/css">
p { color:green; font-size: 13px }
</style>
</head>
<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

 

2- Inlcuir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS. El cual se enlaza al HTML mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css. Se pueden enlazar a las páginas HTML tantos archivos CSS como sean necesarios.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

  1. Crea un archivo de texto con el siguiente contenido: p { color:green; font-size: 13px }
  2. Guarda el archivo de texto con el nombre estilos.css.
  3. En el HTML debes enlazar el archivo CSS mediante la etiqueta <link>:


<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

Cuando el navegador carga la página HTML, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.  En este caso es solo para “screen”. Pero también se pueden enlazar estilos especificos para imprimir utilizando “print”.

Este es el modo más correcto y utilizado de añadir estilos CSS.

El principal motivo es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que nos permite tener  los mismos estilos en todas las páginas que forman un sitio web.

Este método simplifica el mantenimiento de un sitio al máximo, ya que un solo cambio en un solo archivo CSS permite modificar de forma rápida y sencilla los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las diferentes formas de incluir la hoja de estilos del ejemplo anterior serían así:


@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

3- Incluir CSS en los elementos HTML

La tercer forma de incluir estilos CSS en documentos HTML es hacer sobre las etiquetas de html.

Ejemplo:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
</head>

<body>
<p style="color:green; font-size: 13px">Un párrafo de Ejemplo.</p>
</body>
</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto o en los html que se usan en plantillas de e-mails. Resulta un método muy dificultoso para realizar modificaciones en un futuro, ya que se deberían hacer una a una por etiqueta.

Hemos mencionado la técnica que nos parece mejor (caso 2), pero no hay que dejar de lado las demás, ya que cada caso puede ser particular y conocer todas las opciones con las que contamos nos permitirá saber cual se adapta mejor para cada situación. Nosotros utilizamos las tres de forma combinada para obtener el mayor provecho según sea necesario.

Si quieres puedes compartir con nosotros tus experiencias con cada método!

Saludos!

Estilos CSS, ¿qué son y para qué sirven?

estilos_css Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son y para qué sirven. CSS es el lenguaje para describir la presentación de páginas web, por ejemplo los colores, el diseño y las fuentes. Nos permite adaptar la presentación a las diferentes necesidades y tipos de dispositivos. El CSS es independiente al HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. Leer más

Qué es un sprite, para qué sirve y cómo usarlo

google-sprite

Un sprite es un conjunto de imágenes combinadas en un solo archivo. Dicho así, no tiene mucho sentido pero si observamos esta imagen podemos imaginarnos de lo que estamos hablando.

Como describimos antes, se trata de un conjunto de imágenes ordenadas en una cuadrícula. No se trata de una técnica nueva, pero no por ello significa que haya perdido importancia su uso. Desde hace un tiempo es considerado por los buscadores una mala práctica el no usar CSS Sprites. Leer más

Optimizar imágenes para la web: Smush.it

Si tienes un un sitio web, tienda virtual, o un blog online sabrás que las imágenes son un punto muy importante en la web ya que nos permiten mostrar y hacer más atractivo y amigable nuestro sitio.

Un detalle importante es el tamaño y sobre todo el peso de nuestras imágenes, debemos ser cuidadosos al momento de tener en cuenta esto. Las imágenes de alta calidad y de gran tamaño hacen que nuestra página cargue más lenta y consuma más ancho de banda, lo cual puede que no sea del agrado de nuestros usuarios. Leer más

Font Awesome ¿Qué es y cómo se usa?

font-awesom-icon

Font Awesom es un framework de iconos vectoriales y estilos css. Pero… ¿para qué sirve? Este framework es utilizado para sustituir imágenes de iconos comunes por gráficos vectoriales convertidos en fuentes. Para ello utiliza una librería de mas de 400 iconos transformadas en fuentes. Leer más

10 trucos que deberías saber de Coda 2

Coda2

Seguro que en más de una ocasión os hemos comentado que Coda 2 es uno de nuestros editores favoritos en Mac. Si no lo has probado, ya estás tardando! Y si ya lo estás usando, seguro que algo de lo que te vamos a contar a continuación, aún no lo sabes. Leer más

Clipping Magic, aplicación online para recortar el fondo de una imagen

Eliminar el fondo de una fotografía suele ser la pesadilla de muchos de nuestros clientes, ya que le hacemos bastante hincapié en que en una tienda, no es lo mismo mostrar un producto con el fondo blanco que con un fondo cualquiera. Por hacer una comparación, podríamos decir que no recortar el fondo de la imagen de tus productos sería algo así como tener tu tienda física descuidada, desordenada…, o darle poca importancia a los expositores de tu tienda. Si sueles comprar por internet, podrás comparar entre aquellas tiendas que no recortan el fondo a sus productos (afortunadamente quedan pocas) con las que lo recortan, le ponen sombra… ¿En cuál te entran más ganas de comprar? En fin, se trata de cuidar un poco la imagen de tu tienda. Leer más

Sincronizar Coda 2 con Dropbox en varios ordenadores

Sincronizar Coda2 con Dropbox

Si eres desarrollador web o por cualquier motivo usas Coda 2, lo que vamos a explicar hoy te va a encantar. Si tienes dos ordenadores, sabrás lo incómodo que es tener que estar configurando los sitios en cada uno de ellos, pero esto… tiene solución! Vamos a sincronizar la configuración de Coda 2 a través de Dropbox y así, cuando uses cualquier ordenador, todo aparecerá igual, sin necesidad de hacer el trabajo de configurar sitios dos veces. Veamos cómo hacerlo:

  1. Antes de nada, asegúrate de que Coda 2 se ha abierto al menos una vez después de su instalación en cualquiera de los ordenadores donde lo quieres sincronizar. 
  2. En el ordenador donde tengas el Coda 2 configurado correctamente, descarga el script de GitHub o haz clic aquí para descargarlo directamente: descargar zip del script de GitHub. Ahora ejecútalo.
  3. A continuación, descarga el script en el otro ordenador, pero es muy importante que antes de ejecutarlo, lo abras y modifiques la línea 9, simplemente donde pone TRUE, sustitúyelo por FALSE:
    Sustituir TRUE por FALSE
  4. A continuación, ejecútalo y espera a que se sincronice con Dropbox. ¡Listo!

Cómo enviar un enlace de Google Maps o incrustarlo en tu página web

Vemos que en muchas ocasiones, a algunos de nuestros clientes les cuesta facilitarnos un enlace con la ubicación exacta de su empresa. Hoy, además de explicar cómo enviar un enlace de Google Maps, explicamos también cómo incrustar un mapa en una página web.

Paso 1: Abre tu navegador y accede a Google Maps.

Paso 2: Escribe la dirección de tu empresa en el campo que aparece en la parte superior de la web y haz clic en el botón de la lupa. En el ejemplo siguiente, vamos a indicar: Plaza de España, Sevilla.Buscar google maps

Paso 3: En el mapa verás un localizador justo en la dirección que hayas introducido, o varios si encuentra más de un resultado.

Mapa Plaza España

Paso 4: Haz clic en el botón de la columna de la izquierda que ves a continuación:

Enlazar mapa

Paso 5: Te aparecerá un cuadro de diálogo como el siguiente:

Incrustar mapa

¿Qué significan todo esto?

  • En el primer campo aparece un enlace, el cual puedes copiar y pegar donde quieras, por ejemplo para enviar por correo el enlace directo del mapa que estás viendo. Aunque esto mismo también puedes hacerlo pulsando en Enviar. Si marcas la casilla URL corta, este campo se sustituirá por una URL más corta que te puede servir por ejemplo para compartirla en redes sociales (si te hemos pedido el enlace a Google Maps de tu empresa, nos referimos a este, largo o corto, no hace falta que sigas leyendo más…)
  • El segundo campo es el código que te ofrece Google para incrustar tu mapa en el código HTML de una página web. El mapa, por defecto, tiene unas medidas de 425x350px, pero puedes modifcarlas haciendo clic en Personalizar y obtener vista previa del mapa que se va a insertar.

Personalizar medidas

¿Fácil, no? Si crees que esta entrada puede ser de utilidad para alguno de tus contactos, no olvides compartirla y si tienes alguna duda, déjanos tu comentario para poder ayudarte.

Cómo buscar imágenes gratis para tu blog

¿Que por qué poner imágenes a tus entradas de tu blog? Porque una entrada nunca será lo mismo con una imagen, siempre llamará más la atención al lector, será más cómoda de leer y porque ¡una imagen vale más que mil palabras!

Hoy te indicamos dónde encontrar imágenes libres de derechos listas para usar en tu blog, sea cual sea la temática de tu blog:

→ stock.xchng: sxc.hu

stock.xchngActualmente es uno de los mayores bancos de fotos gratis en internet. Es muy fácil de navegar en la web, ya que puedes realizar búsquedas (en inglés) o navegar a través de sus categorías. Las imágenes están todas a alta calidad, pero para descargarlas, debes registrarte. Algo a tener en cuenta es que si haces una búsqueda, la primera y última fila son publicidad de otras páginas de fotos de pago, puedes ver sombreada la primera fila en la siguiente captura:

xchng de pago

→ morgueFile: morguefile.com

 morgueFile

morgueFile, siempre es nuestra segunda opción después de stock.xchng. También debes hacer la búsqueda en inglés, pero en este caso, no es necesario estar registrado para descargarte imágenes.

→ WikiMedia Commons: commons.wikimedia.org

WikiMedia Commons

Wikimedia Commons es una gran biblioteca de imágenes, ilustraciones, audio y vídeo que se pueden utilizar libremente. También encontrarás algunas que son bajo licencia, pero la mayor parte se encuentran libre de derechos, por lo que podrás usarlas sin ninguna atribución. Asegúrate antes de usarlas de verificar la licencia debajo de cada imagen.

→ StockPhotosforFree: stockphotosforfree.com

stockphotosforfree

StockPhotosforFree es otro banco de fotos más donde encontrarás fotos a gran calidad. Para descargarlas, debes registrarte, pero podrás hacerlo a través de Facebook.