Diseño Web para Niños: Bienvenidos a la Ciudad Tuts+!

Bienvenidos a la Ciudad Tuts+, donde todo el mundo ama el diseño web! En estas series aprenderemos todo acerca de diseñar y construir un sitio web. Para ayudarnos, vamos a crear un sitio web juntos.

Estas lecciones (o tutoriales) te darán una guía paso a paso para traer a la vida a un website. Todos los archivos de los ejercicios estarán incluídos al final de cada lección, así puedes comparar tu trabajo a medida que progresas.

Entonces, por favor ven, ponte cómodo y vamos a crear algo para la gente de la Ciudad Tuts+!

Cómo funciona la Web?

Vamos a dar un paso atrás y pensar cómo funciona la web.

Cuando dos computadoras se conectan a Internet (lo que se muestra como una línea amarilla en el dibujo de abajo) pueden hablar entre sí.

Un servidor (la caja azul) es una computadora especial que contiene los archivos de la página web. Tu computadora en casa o en la escuela no es un servidor, porque no está conectada directamente a Internet. Nos conectamos a través de un Proveedor de Servicios de Internet (ISP son las siglas en inglés).

El contenido de un sitio (todo sobre lo que habla el sitio web) está organizado con un sistema especial de reglas que las computadoras entienden; casi como hablando en secreto, lenguaje codificado, pero nosotros también sabremos el secreto pronto!

En esta imagen, el browser (navegador) está pidiendo ver www.tutsplus.com al servidor donde residen los archivos del sitio. El servidor está enviando los archivos de vuelta y el browser los traduce para mostrar la página en la pantalla. Y esto pasa muy rápido!

Es todo acerca de comunicar y compartir información.

Por todo esto, un sitio que escribes localmente (en tu computadora) no puede ser visto por otra gente en otra computadora, hasta que muevas los archivos a un servidor. Veremos esto en profundidad más adelante.

El Trabajo de un Diseñador Web

El trabajo de un diseñador web es muy importante. Todas las cosas que forman parte de la imagen de abajo están pasando por una razón: para ver un sitio web. A trabajo del diseñador web es decidir como este sitio se va a ver y va a funcionar y otras cosas, como asegurarse de que el sitio es usable por usuarios con discapacidades (de la misma forma en que eres un usuario de Tuts+ en este momento).

Nuestro Proyecto

En esta serie vamos a crear un sitio web para Ciudad Tuts+ La Ciudad necesita un lugar donde los turistas puedan obtener información útil sobre la ciudad antes de su visita.

Aquí hay una vista previa del sitio web:

Este sitio web incluirá todos los puntos de diseño web que aprenderemos. Va a ser un primer proyecto de diseño web muy ordenado para ti!

Bosquejando y construyendo

Ahora hablemos un poco sobre lo que tenemos que hacer aquí.

Primero, vamos a dibujar nuestro sitio y luego incluiremos lo que queremos tener en la página en un archivo especial. También agregaremos links donde los usuarios serán llevados a otros lugares, como los sitios web de compras.

Estilando

Después de dibujar y escribir el archivo especial para nuestro sitio web necesitaremos hacerlo ver bien. Esta es la sección donde el color y las ideas de estructura (decidir dónde todo esto va a estar en la pantalla) cobran vida.

Cómo podemos hacer nuestro sitio fácil de usar? Que sensación queremos que den nuestros colores? Dónde deberían estar ubicadas las cosas en la pantalla de un teléfono? Y qué hay de la pantalla de una computadora? Qué tipografía lucirá mejor? Estas son todas las cosas sobre las que tenemos que pensar, pero no te preocupes, es un proceso realmente divertido y estas preguntas vendrán naturalmente a medida que vayas diseñando sitios.

Mapa de la Serie

Abajo hay un mapa completo del viaje que estaremos haciendo para crear nuestro sitio web. Cada bloque tiene una introducción al tema y luego está dividido en piezas menores.

Introducción

Puedes ver por la estrella rosa de que estamos leyendo la Intro en este momento. Ahora tenemos una idea básica de cómo la web funciona, el trabajo de un diseñador web, y hemos echado un vistazo al proyecto que estaremos diseñando y construyendo juntos.

Construir un Sitio web

La siguiente parte es donde pensaremos las ideas y empezaremos a bosquejar. Bosquejar es una forma realmente divertida de plasmar tus pensamientos en un diseño antes de empezar a codear.  Puede ser realmente un ahorro de tiempo y ayudar a mantenernos en línea.

Luego hablaremos de los archivos y las herramientas que necesitamos para empezar con la parte del código de nuestro sitio web.

HTML

HyperText Markup Language (HTML) es ese lenguaje secreto (pero no por mucho tiempo más!) utilizado para organizar el archivo de texto que mencionamos antes. Este lenguaje ayuda a nuestros navegadores a entender y mostrar los archivos de los sitios web.

Todo en nuestro sitio web, y todos los sitios web, se componen de elementos HTML. Los elementos son partes de este lenguaje que tienen un significado y ayudan a describir todo lo que ponemos en la página.

No te preocupes todavía acerca de lo que este código en realidad significa, mientras que sepas que todo sitio web está hecho a partir de un documento escrito.

CSS

Hojas de estilo de Cascada, CSS (por sus siglas en inglés), nos permiten definir los estilos (colores, tipografías, la sensación general) de nuestro sitio web, haciéndolo lo más atractivo y fácil de usar posible para nuestros usuarios,

Estructura en CSS

El CSS también puede ayudarnos a acomodar las piezas en la página.

Imágenes

En esta parte del viaje vamos a hablar rápidamente acerca del tipo de imágenes que serán incluidas en nuestro sitio y cómo hacer algo para ponerles estilo. Va a haber cuatro imágenes para agregar, qué piensas de ellas?

Básicos de Diseño

En esta parte vamos a ver los "bloques de construcción" del diseño web. Nos queremos asegurar de construir algo que la gente use, y pueda usar fácilmente, tanto como estar seguros de que luce bien.

Tipografía

La Tipografía es el arte de acomodar tipos y un gran seguimiento para nuestra nueva lección de diseño, ya que puede fácilmente sumar o restar en el suceso de nuestro sitio web.

El primer ejemplo de tipografía en nuestro sitio web puede ser encontrado arriba de todo:

Color

El color es muy importante y muy divertido. El color puede hacer un sitio lindo, y también tener significado, de eso hablaremos aquí.

Fin de la Serie

Vamos a finalizar esta serie de lecciones aprendiendo cómo poner los archivos de tu sitio web en una de esas computadoras especiales, un servidor, así todos tus amigos y familiares lo pueden ver en Internet. También hablaremos acerca de dónde puedes llevar tus estudios con tu nuevo título de "Diseñador web para la Ciudad Tuts+"

Pero no nos preocupemos demasiado por eso por ahora, recién llegamos aquí!

Nos vemos pronto!

En la próxima lección saltaremos directamente a aprender cómo nos preparamos para construir un sitio web con HTML. No puedo esperar, nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!