Curso de Desarrollo y Diseño Web GRATIS online

Vamos a intentar crear el mejor curso gratuito de desarrollo web online que podamos escribir con las herramientas que disponemos, para ello vamos a hacer un texto que se alargue en el tiempo, con continuas actualizaciones y revisiones, intentando abarcar todos los conceptos, desde la parte de el boceto en papel, hasta la el uso de lenguajes de programación, como el uso de los más conocidos gestores de contenidos. Intentaremos desgranar con la mayor profundidad todos los conceptos, obviamente por cuestiones de tiempo algunas cosas se nos quedarán en el "tintero" o pasaremos levemente por encima. Lo crucial es que podamos informar de todo el mundo web y que sirva casi como una referencia obligatoria para todo el que se quiera meter a desarrollar páginas web profesionales.

Lo dicho, este curso no tiene fin, aunque hayamos puesto una fecha de finalización, esa es la fecha cuando nuestro trabajo debería ser un referente no su final, se alimenta constantemente con textos, videos, imágenes y enlaces nuevos progresivamente, todas las semanas haremos como mínimo una nueva actualización, esperemos que sea de gran ayuda.

Vocabulario del Webmaster

Vamos a enumerar todos los conceptos con los que tarde o temprano debes familiarizarte, un listado incluido en un feo "chorizo" donde poder ver rápidamente los términos. No te agobies, no queremos que te lo aprendas como en el pasado se memorizaban la famosa lista de los reyes Godos, sólo un vistazo rápido. En el futuro cuando retomes a este listado verás incluso que te faltan términos.

Lenguaje de marcado

• Html
• Html 5

Lenguajes de Estilo

• CSS

Lenguajes de Programación

• Php
• Javascript
• ASP
• Java

Formatos de imagen para la web

• Jpg
• Png
• Gif

Programas gráficos

• Adobe Photoshop
• Gimp
• Adobe Illustrator

Posicionamiento en Buscadores

• SEO
• SEM
• Link Building

Redes Sociales

• Community Manager
• Social Media
• Facebook
• Twitter
• Pinterest
• LinkedIn

Gestores de contenidos (CMS)

• Drupal
• Wordpress
• Joomla
• Prestashop
• Magento
• Moodle

Un poco de historia

En la historia del hombre, los ordenadores ocupan una pequeñísima porción de tiempo, y todavía mucho menor, respecto al nacimiento de la Web allá en noviembre de 1989, cuando Tim Berners-Lee, conocido por ser el padre de la WEB, estableció la primera comunicación entre un cliente y un servidor mediante el protocolo HTTP.

Html

¿Qué es HTML?

Hyper Text Markup Language más conocido simplemente como HTML, NO es un lenguaje de programación, no se programa. Es un lenguaje de marcado, para maquetar tu página web y presentar la información, crea la estructura básica.

Un vistazo rápido al esqueleto de html: guardando este código en un blog de notas con la extensión .html o .htm tendríamos nuestra primera página, así de simple y fácil.

En los niveles más básicos del desarrollo web con html junto al lenguaje de estilos CSS, podríamos crear una página web estática con cierto diseño web y si le añadimos javascript (otro lenguaje que veremos más adelante) proporcionaríamos efectos atractivos como pueden ser sliders.

Necesitas entonces un navegador web como Firefox, Chrome, Opera o Internet Explorer, hay muchos, pero estos suelen ser los más utilizados (como ya sabrás no te recomendamos utilizar IE). El archivo que acabamos de guardar lo abrimos con uno de los navegadores como los mencionados.

Por ejemplo:

<etiqueta>Contenido</etiqueta>

Contenido: podría ser texto, una imagen, un video, incluso una porción de código de un lenguaje de programación como puede ser PHP

Etiquetas Básicas

Crea el documento HTML

Encabezados

Hay 6, del h1 al h6. Es importante utilizarlos en orden para tener una estructura correcta de la web, además actúan como cajas rusas, el h1 (único) engloba los demás. Si tenemos una idea clara como estructuramos un documento de word y sus encabezados podemos entender la estructura de la web.

Sólo puede haber un h1, a diferencia de los demás encabezados.

Ejemplo completo de estructura de una web

Texto Lorem Ipsum

Este es un texto muy habitual para rellenar contenido sobre todo cuando no tenemos toda la información o textos para la web finales, y queremos ver como quedará el diseño en lo relativo a los espacios y la maquetación.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

En la actualidad, se calcula que existen 1000 millones de webs activas. Cifra enorme que deja patente la importancia que la Web tiene en la vida diaria de millones de usuarios alrededor del mundo. Sin embargo, esta cifra no es tan alentadora para los propietarios de sitios web y diseñadores que se dan cuenta de la enorme competencia que existe. Atraer visitantes hasta una determinada página web es vital para una página web.

En este contexto, el diseño web se convierte en una pieza fundamental a la hora de crear cualquier sitio web o blog que se diferencie de sus competidores. En esta introducción al diseño web se repasan los principales aspectos a tener en cuenta a la hora de realizar el diseño de un sitio web así como una introducción a los lenguajes básicos utilizados en el desarrollo de páginas web, HTML y CSS.

Introducción al Diseño Web

¿Qué es el diseño web?

El diseño web consiste en la planificación, diseño, e implementación de sitios web. A la hora de abordar el diseño de una página, no solo se debe atender a criterios estéticos sino tener en cuenta la experiencia del usuario. Por ello, un sitio web debe atender a los principios de navegabilidad, usabilidad, e interactividad.

La usabilidad es un concepto muy utilizado en el contexto de la tecnología que se refiere a la facilidad que los usuarios tienen para usar una interfaz web. Si el contenido del sitio se encuentra organizado correctamente, si el diseño es agradable y sencillo y el usuario es capaz de encontrar aquello que busca, probablemente se quede mucho más tiempo en la página web. Además, siendo positiva esta experiencia, probablemente vuelva a visitarla.

La navegabilidad se refiere a la facilidad con la que los usuarios pueden desplazarse por las distintas páginas web de un sitio. El diseño de un sitio web tiene que ofrecer la posibilidad a los usuarios de saber, en qué página se encuentran, en qué página han estado y cómo pueden volver a ella.

Finalmente, el concepto de interactividad se refiere a las distintas acciones que el usuario lleva a cabo en un sitio web y cómo éste responde a sus peticiones. Se trata tanto de descargar un documento o reproducir un video, aunque aquí también se tienen en cuenta elementos tan “sencillos” como el hacer clic en un botón.

Diseño de una página web

El diseño de una página web es un proceso creativo que además debe estar sujeto a las expectativas del usuario final, que debe en todo momento sentirse cómodo al navegar por la página y encontrar aquella información que busca. Por ello, a la hora de diseñar una este tipo de páginas es necesario tener en cuenta algunos factores como son la distribución de los elementos, los colores que se utilicen, la tipografía, el tamaño, estilo y tipo de imágenes, etc.

Distribución de la página

El diseño de una página web se organiza en cajas. Todos los elementos que aparecen dentro, los menús, el cuerpo, los titulares, los párrafos, etc. se representan mediante cajas rectangulares que no son visibles para el usuario final. En general, podemos decir que una página web se estructura de la siguiente forma:

• El logotipo que se ubica en la esquina superior izquierda.
• El encabezado que contiene el nombre del sitio web y un banner de navegación.
• El menú que se coloca a la derecha o izquierda de la página.
• El cuerpo donde se encuentra la mayoría de la información y donde se sitúan los titulares, párrafos, imágenes, etc.
• El pie de página que incluye información adicional como, información de contacto, un enlace al mapa del sitio, etc.

Antes de iniciar el proceso de desarrollo o realización de la página web, es necesario realizar bocetos que ofrezcan una visión global de cómo será, finalmente, la página web.

Selección de imágenes y posicionamiento de la Información

Una vez que la distribución de la página está definida es necesario prestar atención al posicionamiento de la información. Los usuarios que visitan una página web no leen la información de forma exhaustiva sino que “escanean” el contenido buscando la información que les interesa. En general, los usuarios leen en diagonal desde la esquina superior izquierda y hacia abajo. Por ello, la información más importante deberá posicionarte en la parte superior de la página, donde existen más probabilidades de que los usuarios lo lean.

Del mismo modo, la utilización de imágenes condiciona la visualización de la página, ya que los usuarios suelen sentirse más cómodos y atraídos por el contenido visual que por el contenido textual. Sin embargo, es importante no abusar de este recurso ni incluir imágenes demasiado llamativas ya que pueden molestar a los usuarios y crear una sensación de incomodidad.

Elección de los colores

El uso del color es otro de los elementos fundamentales en el diseño web. Así, un mal uso del color puede arruinar un diseño o hacer que los usuarios abandonen la página rápidamente. Para evitar este tipo de situaciones, a la hora de diseñar una página web se tendrá en cuenta:

• Para facilitar la lectura, se elegirá como color de fondo de la página un color pálido. Es importante potenciar el contraste entre el color del fondo y el color del primer plano.
• Es recomendable no utilizar más de tres colores distintos. Así, se mantendrá un diseño simple y atractivo para el usuario. En general, debe elegirse un color principal que se use como color dominante en la página web y uno o dos colores que usados en menor proporción ayuden a destacar ciertos elementos de la página.
• Los colores tienen un simbolismo. A cada color se le asocian implicaciones diferentes.

Por ejemplo:

El color azul implica calma, confianza, autoridad, seriedad, etc. Normalmente se utiliza para páginas web relacionadas con las nuevas tecnologías, IT o la medicina.

El color rojo implica calor, fuerza, triunfo, amor, pasión. Por ello, se utiliza para páginas web relacionadas con el lujo, la moda, el marketing o los deportes.

El color negro implica sencillez, lujo, noche. Generalmente, encontraremos este color en páginas web de cine, arte o fotografía.

El color blanco se relaciona con la pureza, la inocencia, la frescura. Suele utilizarse en páginas de diseño o noticias.

Dependiendo de cuál sea el tema de nuestra página web, y cuál sea la audiencia objetivo utilizaremos unos colores u otros.

Tipografía y símbolos gráficos

Al igual que los colores, la tipografía es otro de los elementos fundamentales dentro del diseño web. El uso de una tipografía determinada le otorga su personalidad a la página. Sin embargo, existen una serie de principios que debemos seguir a la hora de elegir la tipografía para una página web:

• Es aconsejable utilizar fuentes estándar que se visualicen bien en cualquier navegador o pantalla.
• Se recomienda no utilizar más de dos tipos de fuentes en un mismo sitio web. Una fuente para los títulos y otra para el resto del texto.
• Para la mayor parte del texto conviene utilizar fuentes tradicionales de fácil lectura como Arial, Verdana o Helvética.
• Es aconsejable no utilizar fuentes serif ya que los adornos que este tipo de fuentes llevan puede aparecer deformado en algunas pantallas, lo que complicaría bastante la lectura. Se debe optar por fuentes sans-serif, que son más redondeadas y su lectura es mucho más fácil en pantalla.

Finalmente, es recomendable acompañar el contenido de la página web con ciertos símbolos o convenciones que ayudan al usuario y hacen que se sienta más cómodo navegando por el sitio web. Por ejemplo:

• Una casa representa la página de inicio.
• Una lupa simboliza la función de búsqueda.
• Una interrogación representa la función de Ayuda.
• Un sobre simboliza el correo electrónico o la forma de contactar con los responsables de la página
• Una bandera se utiliza a la hora de señalar la posibilidad de cambiar la página de idioma.

La ventaja que tiene el uso de estos símbolos y no otros es que los usuarios de Internet están acostumbrados a ellos y los reconocen fácilmente.

Accesibilidad

En general, se habla de accesibilidad para hacer referencia al grado en el que todos los usuarios pueden utilizar un objeto, acceder a un lugar o a un servicio independientemente de cuáles sean sus capacidades. En el contexto del diseño web, la accesibilidad ocupa una posición importante, ya que la web es un recurso fundamental para muchos aspectos de la vida de las personas: educación, gobierno, empleo, sanidad, entretenimiento, etc.

Por este motivo, a la hora de diseñar una página web debemos intentar utilizar diseños que permitan hacer nuestro sitio y en general la Web más accesible para los usuarios independientemente de sus circunstancias personales y de los dispositivos utilizados.

Se debe tener en cuenta, que todos los usuarios en algún momento pueden tener problemas de accesibilidad sin que por ello sufran un problema que les impida hacerlo con normalidad. Cualquier usuario se puede encontrar con situaciones de ruidos externos, pantallas con visibilidad reducida o situaciones puntuales en las que se tenga total capacidad visual o auditiva.

Para mejorar la accesibilidad de la web, el W3C, organismo que se encarga de desarrollar pautas y recomendaciones para el crecimiento de la web, ha desarrollado las Pautas de Accesibilidad al Contenido en la Web también conocidas como WCAG, que sirven de guía en el diseño de páginas web accesible. El contenido de estas pautas está disponible en la página web del W3C.

Introducción al lenguaje HTML

HTML es el lenguaje fundamental sobre el que se construyen las páginas web. La misión de este lenguaje no es otra que identificar los distintos elementos que componen una página web. Como pueden ser los textos, las imágenes, los vídeos, etc.

Breve Historia del HTML

En 1989, Tim Berners-Lee creó la World Wide Web y con ella, el lenguaje HTML. Lo que a priori nació como un sistema para que los científicos del CERN, la Organización Europea para la Investigación Nuclear, pudieran compartir documentos, posteriormente se convirtió en una herramienta fundamental en nuestra vida diaria. Tim Berners-Lee probablemente no fuera consciente de las consecuencias de su invención, pero el HTML supuso un cambio gigantesco en las comunicaciones. Este nuevo tipo de lenguaje permitía mostrar contenido enriquecido a través de un navegador y usando un servidor central. Hasta entonces, la comunicación a través de Internet solo permitía el uso de texto plano sin formato y sin imágenes.

Etiquetas

Una página web se escribe en texto plano sin darle formato, incluso esto se realiza para la inclusión de imágenes. Es el etiquetado del lenguaje HTML el que permite que los navegadores identifiquen cada elemento de una página y le den el formato que hayamos especificado. Cada parte de la página web es identificable mediante una etiqueta de comienzo y cierre.

<p>El niño juega contento en el patio del colegio</p>

Donde <p> sería la etiqueta de comienzo y </p> la de cierre.

Para que el código HTML funcione y el navegador interprete correctamente la información es necesario que las etiquetas estén correctamente anidadas, es decir, que las etiquetas de cierre aparezcan en orden inverso a la de las etiquetas de inicio. De no ser así, el código no es válido. Por ejemplo:

< strong >El niño juega <p>contento</strong> en el patio del colegio</p>

Este código sería inválido ya que las etiquetas no guardan el orden correcto. Es necesario tener en cuenta que muchos de los elementos propios del lenguaje HTML forman una estructura jerárquica. Por ejemplo:

<html>

<body>

<p>El niño juega contento en el patio del colegio</p>

</body>

</html>

La etiqueta <html> marca el inicio del código y así mismo el cierre. Dentro de éste se encontraría la etiqueta <body> que desciende de ella y define el cuerpo del documento incluyendo todo el contenido, en este caso un párrafo: <p>El niño juega contento en el patio del colegio</p>

Elementos

El lenguaje HTML es un lenguaje de etiquetas. Todo contenido de la página web, sea texto, imagen, audio, vídeo, etc. es etiquetado de forma que los navegadores como Internet Explorer, Mozilla o Google Chrome sepan cómo mostrarlo.

Para identificar un párrafo o texto dentro de la propia página web, se utiliza el elemento "<p>", si por el contrario, queremos especificar la inclusión de una imagen, será necesario utilizar el elemento "<img>".

Todos los elementos de una página web tienen un significado semántico, permitiendo distinguir entre secciones, imágenes, párrafos, encabezados, listas, etc. Así por ejemplo, un párrafo de texto en HTML quedaría representado de la siguiente forma:

<p>El niño juega contento en el patio del colegio</p>

Algunos elementos pueden incluir otros elementos. Si por ejemplo se quisiera mostrar alguna palabra en negrita dentro del párrafo podríamos hacerlo de la siguiente forma:

<p>El niño juega <strong>contento</strong> en el patio del colegio</p>

En este caso, la palabra “contento” aparecería marcada en negrita incluso cuando esta se encuentre dentro de las etiquetas del elemento párrafo. En este caso la etiqueta </strong> marca el final del elemento y hace que solo la palabra contento aparezca resaltada. En cualquier navegador, este párrafo aparecería como:

El niño juega contento en el patio del colegio

En ningún caso, las etiquetas y elementos se muestran en la página web que ven los usuarios. Algunos de los elementos más comunes que se utilizan en lenguaje HTML para organizar el texto son:

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: son elementos de cabecera utilizados para introducir secciones. Van de mayor a menor importancia.
• <p>: se utiliza para introducir párrafos.
• <ol>: se usa para definir listas ordenadas de elementos.
• <ul>: se utiliza para definir listas de elementos sin ordenar.
• <li>: se emplea para definir listas enumeradas.
• <a>: se utiliza para introducir un hiperenlace.
• <img>: se emplea para introducir una imagen.

Atributos

Dentro de las etiquetas de comienzo es posible incluir información adicional, son los denominados atributos. Por lo general, cada atributo se compone de dos partes un atributo nombre y un atributo valor.

<div class="center clear">

En este ejemplo “class” es el atributo nombre y “center clear” es el valor que se asigna a ese atributo nombre. Los valores de los atributos suelen expresarse entre comillas, aunque si estos se componen de una sola palabra o número pueden escribirse tal cual.

Otros elementos a tener en cuenta

Etiquetas, elementos y atributos son los elementos fundamentales que componen un documento HTML. Sin embargo, es necesario tener en cuenta que también aparecen otros elementos:

• Declaración doctype. Todo documento de html debe incluir al principio la declaración doctype, que se representa como <! DOCTYPE html> Su función es indicarle al navegador que interprete el contenido de ese documento, es decir su código HTML y CSS de acuerdo con los estándares del W3C.
• Comentarios. Como en cualquier otro tipo de código en HTML es posible introducir comentarios que no aparecerán en la página web ni serán interpretados por el navegador. Los comentarios se utilizan para incluir explicaciones al código. En HTML, los comentarios deben incluirse entre los símbolos <!-- -->

Introducción al lenguaje CSS

CSS es un lenguaje de hojas de estilos que nos permite, una vez definidos los contenidos y su función en HTML, definir el aspecto de cada elemento, su color, tamaño, tipo de letra, su separación con respecto a otros elementos, etc. Es imprescindible para trabajar con páginas web complejas CSS, ya que nos permite crear documentos HTML bien definidos, mejorar la accesibilidad y visualizar la página en dispositivos diferentes.

Breve Historia de CSS

Las hojas de estilos aparecieron en torno a los años 70, cuando se observó la necesidad de aplicar estilos a los documentos electrónicos. Internet y el crecimiento del HTML aumentaron aún más la necesidad de un estándar para la definición de estilos que acabara con las diferencias que se daban en los documentos electrónicos si se utilizaba un navegador u otro.

El Consorcio de la Web propuso crear un lenguaje de estilos específico para HTML. Al principio, se tomaron en consideración dos propuestas: la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). Finalmente, los creadores de ambos lenguajes, Håkon Wium Lie y Bert Bos decidieron trabajar juntos y crearon el lenguaje CSS.

Llegado 1996, el W3C publicó la primera recomendación oficial, la "CSS nivel 1". A partir de ese momento, se han publicado distintas versiones de CSS a las que los navegadores han ido adaptándose de forma progresiva.

Funcionamiento

El lenguaje HTML nos permite, por sí mismo, definir estilos y modificar la apariencia de los elementos de una página web y, así, se hacía antes de que el uso de CSS fuera generalizado. Mediante etiquetas especiales, en HTML es posible definir estilos sin utilizar CSS:

<h1><font color="red" face="Arial" size="5">Título</font></h1>

En este ejemplo, la etiqueta <font> permite especificar la apariencia del texto mediante los atributos “color”, “face” y “size”.

Aunque este tipo de definición de estilos parece, a priori, sencillo, es necesario tener en cuenta lo dificultoso que sería modificar la apariencia de un sitio web si cada elemento debiera incluir su propio estilo definido de forma individual.

CSS nos permite separar el contenido de la página y definir su estilo, de forma que todas las etiquetas que sean iguales tendrán el estilo que se haya definido en el CSS. Así, se ahorra trabajo y se evita ensuciar el código.

CSS en el documento HTML

Una de las principales ventajas que incluye CSS es que ofrece varias posibilidades para incluir CSS en un documento HTML. Así es posible:

1. Incluir CSS en el propio elemento HTML.

Dentro de una etiqueta, especificamos un atributo denominado “style” en el que definimos diferentes valores:

<p style="color: white; font-family: Arial;"> El niño juega contento en el patio del colegio </p>

Este método tan solo se utiliza para definir los estilos de elementos muy concretos del código HTML, de no ser así, definir los estilos de la página web sería muy laborioso.

2. Incluir CSS en el mismo documento HTML.

Los estilos se definen en el propio documento HTML mediante etiquetas <style> que se incluyen en la cabecera del documento:

<style type="text/css">

p { color: white; font-family: Arial; }

</style>

En este ejemplo, vemos, entre llaves, los estilos que se aplicarían a los párrafos de un documento. El color sería blanco y la fuente Arial. Este método es ideal cuando se modifican un número limitado de estilos o el número de páginas a definir no es muy grande.

3. Incluir CSS mediante un archivo externo

Todos los estilos se recogen en un archivo externo con la extensión CSS, que se enlaza al documento HTML mediante la etiqueta <link>. Dicha etiqueta suele incluir cuatro atributos:

• type: indica el tipo de recurso al que enlaza. Para documentos CSS el valor siempre es: text/css.
• href: indica la URL del archivo CSS.
• media: indica el medio, pantalla de ordenador, impresoras, etc. en el que se deben aplicar los estilos.
• rel: indica la relación entre los documentos enlazados. En el caso de CSS este valor es stylesheet.

<link rel="stylesheet" type="text/css" href="/css/estilo.css" media="screen" />.

Selectores

Cada uno de los estilos que componen una hoja de estilos se denomina regla y cada regla se compone de un selector que indica el elemento HTML, al que se aplica la regla, seguido de una declaración. Dicha declaración, separada mediante llaves, contiene las características que modifican al selector o elemento HTML, como puede ser el tamaño de la letra o su color. Por ejemplo:

p {color: black;}

Esta regla CSS se compone del selector “p” que se corresponde con el elemento HTML de párrafo, y la declaración {color: black;}, que modifica la característica color dándole el valor “black”.

A cada uno de estos selectores se les puede aplicar varias reglas y una misma regla puede aplicarse a distintos selectores. El estándar CSS actual, CSS 2.1 incluye una docena de tipos de selectores entre los que podemos destacar:

1. El asterisco como selector universal

Las reglas que se definan precedidas de un asterisco se aplicaran a todos los elementos de una página:

* { margin: 0;}

2. Selector de etiqueta

Las reglas se aplican a todos los elementos de una página cuya etiqueta coincida con el valor del selector.

h1 {color: black;}

En este caso, esta regla se aplicaría a los titulares h1. Si lo que queremos es definir una regla que se aplique a más de un elemento, solo deberemos separar los elementos por comas:

h1, h2, h3 {color: black;}

3. Selectores descendentes

En este caso, se trata de definir reglas para elementos HTML que se encuentren dentro de otros elementos.

<a href="">...<span>texto2</span></a>

Si queremos definir un estilo para el elemento <span> que se encuentra dentro del elemento <a>, se deberá establecer la siguiente regla:

a span { color: blue; }

Unidades de medida

La mayoría de las propiedades que podemos expresar mediante CSS incluyen la posibilidad de definir medidas y colores. Por lo que es importante conocer las distintas opciones disponibles para expresar este tipo de valores.

Las principales unidades de medida que se utilizan en el lenguaje CSS son de dos tipos: unidades absolutas y unidades relativas. Como unidades absolutas encontramos:

• Pulgadas: “in”. Una pulgada equivale a 2.54 centímetros.
• Centímetros: “cm”.
• Milímetros: “mm”.
• Puntos: “pt”. Un punto equivale a 0.35 milímetros.
• Picas: “pc”. Una pica equivale a 12 puntos.

Una regla que incluya este tipo de medidas se representa de la siguiente forma:

body { margin: 0.5in; }

Así, el margen del cuerpo del documento será de 0.5 pulgadas. En cuanto a las unidades relativas se encuentran:

• “em”, se refiere al tamaño de letra del elemento.
• “ex”, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de letra del elemento.
• Píxel: “px”, se refiere al tamaño en píxeles con respecto a la resolución de la pantalla del dispositivo en el que se visualiza la página. La siguiente regla es ejemplo de cómo modificar el tamaño de letra de los párrafos:

p { font-size: 32px; margin: 1em; }

Además también es posible utilizar porcentajes para establecer los tamaños de letra:

h1 { font-size: 200%; }

A la hora de utilizar unidades de medida para aplicar estilos CSS, es recomendable utilizar valores relativos ya que se adaptan mejor a los distintos dispositivos en los que un usuario puede visualizar la página web, mejorando así la accesibilidad.

Colores

A la hora de definir y aplicar estilos de color en CSS podemos utilizar diferentes métodos, aunque estos son los más comunes:

1. Palabras Clave

La lista básica de colores que se define en CSS se corresponde con los nombres de los colores básicos en inglés: “aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,white, yellow”

Aunque los navegadores actualmente soportan muchos más nombres de colores, este método no es muy utilizado debido a que se trata de una gama con muy pocos colores.

2. RGB decimal

Este modelo incluye tres valores que se expresan con un número y que definen la cantidad de color rojo, verde y azul. Al sumar los componentes de rojo, verde y azul que se hayan definido, se obtendrá un color específico. En CSS los colores mediante RGB decimal se expresarían de la siguiente forma:

p { color: rgb(50, 98, 176); }

3. RGB porcentual

De forma similar, es posible definir un color mediante el porcentaje de rojo, verde y azul que ese color específico utilice.

p { color: rgb (54%, 38%, 40%); }

4. RGB hexadecimal

Basándose en el valor decimal de cada color y aplicando una fórmula matemática que transforma esos valores en un valor del sistema numérico hexadecimal, se obtiene un valor único que representa a un determinado color al que se le añade el prefijo #.

p { color: #450837; }

Aunque la operación es compleja todos los programas de diseño gráfico y varias aplicaciones web ofrecen el valor RGB hexadecimal directamente, lo que facilita la labor y hacen que este método sea el más utilizado a la hora de definir colores en CSS ya que utiliza un único valor y permite utilizar una amplia gama de colores.

La combinación del código HTML y CSS hace posible el diseño de páginas web complejas que ofrecen múltiples funcionalidades al usuario y que son capaces de dar vida a cualquier diseño web.

Wireframes

Los wireframes para la web son el uno de los primeros pasos que todo diseñador de páginas que se precie debería realizar, un paso que nos quitará imnumerables problemas a la larga y acelera considerablemente el proceso de creación

Frameworks para diseño web responsive

Los más habituales:

• Bootstrap
• Foundation
• Skeleton

Curso de Diseño Web en PDF

Además de realizar todo el curso en html, en breve iremos colgando progresivamente todos los cursos en PDF:

• Cheetsheets para facilitar el aprendizaje.
• Páginas de términos o materias para profundizar más.
• PDF completo del curso de Desarrollo Web.

Diseño Web Madrid

Para los que no tenéis tiempo para desarrollar vuestros sitios en internet, siempre os quedará Webtematica ;), donde encontrarás las mejores webs a la mejor relación calidad-precio.

Apéndice. Diccionario de términos del desarrollo web

En este espacio nos acercamos a algunos términos relacionados con el desarrollo web o con el mundo de internet y las distintas redes sociales con las que podemos interactuar. Así, conceptos como SEO o SEM, relativos al posicionamiento de la información o los términos que identifican a los distintos lenguajes usados por los informáticos para la creación de páginas web, como son el php, html o javascript, tendrán una definición más amplia en este pequeño diccionario de términos clave en el mundo de internet y la informática.

El webmaster

Por tanto, resulta oportuno acercarse a distintos términos de interés para el desarrollador web, encargado de realizar la tarea de la elaboración del software necesario para la creación de una web. Un software que será usado posteriormente por el diseñador web, encargado de darle un aspecto elegante y estructurado a este nuevo espacio en internet. Y por último, el webmaster, que se encargará de integrar ambos elementos aportados por el responsable de que el software funcione y el que tiene la misión de darle un aspecto gráfico y visual adecuado.

Programación y diseño en la www

Por tanto, los primeros términos que deben entenderse para conocer un poco mejor el desarrollo web serán los que mencionan a sus técnicos informáticos ya aludidos: desarrollador web, diseñador web y webmaster. Profesionales que usan un lenguaje informático específico para su trabajo de programación y diseño en la www.

HTML

En cuanto a los lenguajes utilizados para el desarrollo web, aparecen términos como html, cuyas siglas en ingles corresponden a “Hyper Text Markup Language”, algo referido al lenguaje de marcas de hipertexto que es la alusión al software que se usa en la elaboración de páginas web, también denominado código html, el lenguaje estándar que se impone en la visualización de las páginas web actuales y el que todos los navegadores utilizan para buscar información.

PHP

PHP es otro lenguaje de programación muy generalizado, diseñado especialmente para el desarrollo web con contenido dinámico y que también se puede incorporar en un documento HTML. Este lenguaje, según los expertos, es el más flexible y el de mayor rendimiento de los que se conocen en el mundo de internet.

JavaScript

Otro de los términos a tener en cuenta en el campo del lenguaje informático para la programación y elaboración de páginas webs es el JavaScript, también conocido por las siglas JS. Este lenguaje permite mejoras en la interfaz del usuario y en las páginas web dinámicas; también se usa en aplicaciones fuera de la web, como son los documentos en PDF y otras aplicaciones para el escritorio llamadas widgets. El código de este lenguaje puede ser interpretado también por todos los navegadores.

Posicionamiento SEO

Además de generar una buena página web con el uso del lenguaje informático adecuado, es importante el posicionamiento que esta tenga en los distintos motores de búsqueda, es decir, el lugar que ocupe cuando se realice una búsqueda. En este sentido, tiene un gran protagonismo un término muy utilizado en el campo de internet: se trata del posicionamiento SEO.

Para lograr un buen posicionamiento de la web, los profesionales del sector llevan a cabo un proceso técnico en la estructura e información de la página web, con la finalidad de que sea visible cuando se busquen determinados términos en internet. Este proceso en inglés se denomina “Searh Engine Optimization”, correspondiendo con las siglas SEO, denominación que describe sus peculiaridades dirigidas a ocupar los primeros puestos en los buscadores.

SEM

Otro tipo de posicionamiento en la web es el denominado SEM, que se refiere al grupo de acciones por internet a través de las cuales se promociona un servicio o producto. Esto tiene un coste para el cliente y sus siglas, SEM, hacen alusión al concepto “Search Engine Marketing”, veniendo a ser una herramienta de software dirigida al mercado en internet.

Link Building

En relación también con el posicionamiento SEO se encuentra el término “Link Building”, que consiste en la creación de los enlaces estratégicos necesarios para aumentar la presencia de los términos o marcas deseadas en el resultado del análisis SEO.

Keywords

Entendemos por keyword toda palabra clave de un texto. Se trata de los términos más importantes y los que caracterizan el contenido general de un texto. Su buen uso, con el objetivo de atraer la atención del lector, mejora la presencia de la información deseada en los buscadores.

SMO

Las siglas de SMO corresponden a “Social Media Optimization” y en resumen es el conjunto de iniciativas que tienen como principal objetivo optimizar y dinamizar la presencia de un producto, servicio o marca en las distintas redes sociales, vinculando también los contenidos entre sí.

Analítica Web

Para saber medir y analizar los datos de navegación de un sitio web es preciso recurrir a la analítica web, cuyos resultados permiten saber qué repercusión está teniendo una web y si es necesario realizar cambios para su mejora o para que cumpla los objetivos propuestos.

API

El término API proviene del inglés “Application Programming Interface” y se trata de una interfaz de programación de aplicaciones, muy usada para conectar en internet distintas plataformas con el objetivo de llevar a cabo un trabajo determinado. Se trata de un conjunto de funciones, subrutinas y procedimientos que pueden ser utilizados por otro software.

APP

A cualquier aplicación informática que pueda ser descargada por internet se le denomina APP; de ellas hay miles en la red y ofrecen una función de ayuda para sus usuarios en las distintas tareas que puedan desarrollarse por la red.

Badge

Se trata de un distintivo, calificación o premio que concede una aplicación o red social a un usuario; normalmente se refiere a procesos en los que se lleva a cabo un juego interactivo entre un grupo numeroso de usuarios.

Banner

Los banners son los distintos elementos o gráficos que aparecen en una página web para su uso publicitario o promocional. Suelen aparecer en los bordes de las páginas web, tanto encima como debajo o a lado de los contenidos.

Redactores de contenidos para blogs

Dirigiendo ahora el foco de atención al campo de los redactores y el entorno web en el que se desarrolla este trabajo, es preciso conocer términos muy usados como son blog post, blog rolly y branding.

El blog post es la denominación técnica con la que se identifica el hecho de publicar un texto o artículo dentro de un blog.

El blog roll es un programita o widget que puede incluirse en un blog para poder visualizar todos los blogs que se siguen y, por tanto, recomendar que otros los sigan.

El brainstorming o tormenta de ideas se produce cuando un grupo de personas se reúnen con el objetivo de aportar ideas, nuevas y creativas para cualquier proyecto, así como acciones concretas para ponerlo en marcha.

Y al conjunto de ideas o estrategias que se llevan a la práctica para visibilizar un producto o una marca se le denomina branding, algo que se lleva también a cabo a través de las redes sociales o el marketing online.

Caché

Entendemos por caché un proceso automático de copiado de archivos que permite ver con más rapidez los contenidos de cualquier página web. Si se crea una web tiene que habilitarse la memoria caché para permitir una carga rápida de la web, algo que se produce muy rápido cuando esta plataforma se ha visitado más de una vez

CMS

El CMS es un programa para hacer páginas web, para que posteriormente el usuario común pueda, de una forma sencilla e intuitiva, editar la página en cuestión. También se usa para la gestión, edición y administración de blogs y webs de todo tipo.

Código QR

Es el código obtenido a través de un dispositivo móvil cuando se escanea una imagen que está codificada. Esta imagen aporta información sobre un producto, un servicio, una marca, etc.

Community manager

Identificamos como community manager a la persona que se encarga de dinamizar y gestionar una comunidad online de un sector o grupo comercial determinado.

Entre algunas de sus funciones, el community manager, también conocido por las siglas CM, es el creador de los contenidos y debe velar por la reputación de la marca; a su vez tiene encomendadas otras tareas dirigidas a dar a conocer la empresa o marca de una forma adecuada y rentable para el cliente que lo contrata para promocionar su producto o servicio.

Cookies

La cookie o galleta informática no es más que una pequeña parte de información de un archivo que registra automáticamente el ordenador, generalmente cuando el usuario visita una página web.

Normalmente, las cookies son usadas con fines comerciales, ya que estos fragmentos de información permiten a los webmasters el seguimiento de la actividad de un usuario en concreto, a no ser que las borre de su ordenador.

Dominio

Para tener nombre propio en internet, debe disponerse de lo que se conoce por dominio. Los dominios más comunes son los acabados en “.com, .es, .org”, aunque existen muchos más, según el país u otros criterios. Para obtenerlo, basta con pagar una media de 15 euros a cualquier proveedor que exista en Internet.

Hosting

Una vez seleccionado el nombre de la página, hay que proveerse del suficiente espacio para almacenar toda la información que quiera publicarse, algo que resulta imprescindible, ya que sin la posibilidad de alojar los datos no es posible hacer funcionar una web.

FTP

Se trata de un tipo de archivo, conocido por “File Transfer Protocol” (FTP) cuya función es transferir archivos desde la página web al hosting o viceversa.

Dummie

En el argot informático, debe asimilarse el concepto de “dummie" al de novato o principiante. Existen numerosas publicaciones dirigidas a principiantes que quieran entenderse con las redes sociales.

E-commerce

Cuando se habla de compra y venta de cualquier producto o servicio por internet y el conjunto de acciones realizadas para que esto se produzca, está haciéndose referencia al e-commerce, que significa comercio electrónico.

GIF

El GIF es un tipo de archivo gráfico, principalmente animado y en movimiento. Las siglas de este término provienen del inglés “Graphics Interchange Format”.

Login

Se entiende por “login” todo proceso de registro o acceso a un correo electrónico, a una plataforma web o a cualquier red social.

Page rank

Conocemos como page rank al valor numérico usado por Google para calificar, según su importancia, las distintas plataformas o páginas web.

Plugin

Los plugins son aplicaciones extra que se añaden a los blogs o páginas web nuevas con el objetivo de mejorar sus servicios y sus posibilidades.

Podcast

El podcast es un contenedor para almacenar contenido de audio (mp4, mp3, etc). Normalmente es gratuito y se puede descargar. Es muy usado en webs y blogs de todo tipo.

Spam

Todo lo que se considera “basura”, tanto en el correo electrónico como en cualquier contenido web, recibe el nombre de ”spam” y generalmente va asociado a contenido comercial no deseado.

Target

Cuando se habla de target, se hace referencia al público objetico al que se desea dirigir las miras comerciales para ofrecer un servicio, producto o marca. Es importante conocer bien a este público objetivo con objeto de darle valor dentro de las redes sociales.

Tráfico web

Hay que definir distintos conceptos a la hora de hablar de tráfico web, diferenciando entre número de personas que visitan una página, número real de visitas y número de páginas visitadas, que siempre será mayor.

Tweet

La realidad de redes sociales como Twitter y su impacto mediático y social es indiscutible. Cuando se establece comunicación a través de esta red social es determinante no superar los 140 caracteres, pudiendo incluirse imágenes, enlaces y otros elementos a cada tuit.

Widget

El widget es una pequeña aplicación, fácil de instalar y que puede proporcionar a la página web distintas funcionalidades nuevas.

Wiki

El término en sí proviene del hawaiano y significa rápido, concepto con el que se identifican plataformas de fácil y rápida consulta como, entre otras, Wikipedia.

Responsive

Cuando una página web es “responsive” quiere decir que tiene capacidad para visualizarse correctamente en cualquier dispositivo móvil, sin perder calidad ni resolución final.

En la medida de lo posible, se han escogido algunos términos nuevos que seguro que se ampliarán en este u otros diccionarios de la red.