Diseño web para niños ¡Bienvenido a Tuts + Town!

¡Bienvenido a Tuts + Town, donde todo el mundo ama el diseño web! En esta serie aprenderemos todo sobre el diseño y la construcción de un sitio web. Para ayudarnos, vamos a hacer un sitio web juntos..

Estas lecciones (o tutoriales) Le dará una guía paso a paso para darle vida a un sitio web. Todos los archivos de ejercicios se incluirán al final de cada lección, para que pueda comparar su propio trabajo a medida que avanza..

Entonces, venga, póngase cómodo y creemos algo para la gente de Tuts + Town!

¿Cómo funciona la web??

Demos un paso atrás y pensemos en cómo funciona la web..

Cuando dos computadoras están conectadas a Internet (que se muestra como una línea amarilla en la imagen a continuación) pueden hablar entre sí.

Un servidor (el cuadro azul) es una computadora especial que contiene archivos de páginas web. Su computadora en el hogar o la escuela no es un servidor, ya que no está conectada directamente a Internet. Nos conectamos a internet a través de un Proveedor de servicios de Internet (ISP).

El contenido de un sitio (todas las cosas de las que habla un sitio web) está organizado dentro de un conjunto especial de reglas que las computadoras entienden; algo así como hablar en un lenguaje secreto y codificado, excepto que pronto también conoceremos este pequeño secreto!

Cómo tu computadora se conecta a la web

En esta foto el navegador está solicitando ver www.tutsplus.com desde el servidor donde se encuentran los archivos del sitio. El servidor está devolviendo los archivos y el navegador los está traduciendo para mostrar una página en la pantalla. Y esto pasa muy con rapidez!

Se trata de comunicación y compartir información.

Por todo esto, un sitio que escribes. en la zona (en su computadora) no puede ser vista por otras personas en una computadora diferente, hasta que mueva los archivos a un servidor. Veremos esto correctamente más adelante.

El trabajo de un diseñador web

El trabajo de un diseñador web es muy importante. Todas las cosas que tienen lugar en la imagen de arriba están sucediendo por una razón: para ver un sitio web. El trabajo de un diseñador web es decidir cómo se ve y funciona este sitio web, e incluso otras cosas, como asegurarse de que el sitio web se pueda usar para visitantes discapacitados (de la misma manera que usted es un usuario). visitante a Tuts + ahora mismo).

El trabajo de un diseñador web

Nuestro proyecto

En esta serie crearemos un sitio web para Tuts + Town. La ciudad necesita un lugar donde los turistas puedan obtener información útil sobre la ciudad antes de visitarla..

Aquí hay una vista previa de la página web: 

Lo que construiremos

Este sitio web incluirá todos los puntos de diseño web sobre los que aprenderemos. Será un excelente primer proyecto de diseño web para ti.!

Dibujando y construyendo

Ahora hablemos un poco sobre lo que necesitamos para llegar.

Primero, dibujaremos nuestro sitio y luego incluiremos lo que queremos tener en la página en un archivo especial. También agregaremos enlaces aquí para que los visitantes sean llevados a otros lugares, como los sitios web de las tiendas..

Dibujar es importante!

Estilo

Después de que redactemos y escribamos el archivo especial para nuestro sitio web, necesitaremos que se vea bien. Esta es la sección donde todas nuestras ideas de color y diseño (decidir dónde vivirán todas estas cosas en la pantalla) cobrarán vida..

¿Cómo podemos hacer que nuestro sitio sea fácil de usar? Qué sensación ¿Queremos que nuestros colores den? ¿Dónde se debe colocar todo en la pantalla de un teléfono inteligente? ¿Qué pasa con una pantalla de computadora completa? Qué fuente se verá mejor? Estas son todas las cosas en las que tendremos que pensar, pero no se preocupe, es un proceso muy divertido y estas preguntas le llegarán naturalmente mientras más sitios web diseñe..

Mapa de la serie

A continuación se muestra una completa mapa vial Para el viaje que vamos a tomar para crear nuestro sitio web. Cada bloque tiene una introducción al tema y luego se divide en partes más pequeñas. 

Nuestra hoja de ruta

Introducción

Puedes ver por la estrella rosa que estamos leyendo el Introducción En el momento. Ahora tenemos una idea básica de cómo funciona la web, el trabajo de un diseñador web, y hemos tomado un pico en el proyecto que estaremos diseñando. y construyendo juntos.

Construyendo un sitio web

La siguiente parte es donde pensamos en ideas y comenzamos a dibujar. Dibujar es una forma realmente divertida de expresar sus ideas sobre un diseño antes de comenzar a codificar. Puede ser un ahorro de tiempo real y ayudarnos a mantenernos en el buen camino..

Luego hablaremos sobre los archivos y las herramientas que necesitamos para comenzar con el codificación parte de nuestro sitio web.

HTML

Lenguaje de marcado de hipertexto (HTML) es ese lenguaje secreto (¡pero no por mucho tiempo!) Que se utiliza para organizar nuestro archivo de texto del que hemos hablado brevemente anteriormente. Este idioma ayuda a nuestros navegadores a comprender y mostrar los archivos del sitio web..

Todo en nuestro sitio web, y todos los sitios web para el caso, vivirán dentro de HTML elementos. Los elementos son bits de este lenguaje que tienen una sentido y ayudar describir Todo lo que ponemos en la página..

No se preocupe por lo que realmente significa este código en este momento, siempre y cuando sepa que cada sitio web está hecho a partir de un documento escrito..

CSS

Hojas de estilo en cascada, CSS, nos permite establecer el estilo (colores, fuentes, sensación general) de nuestro sitio web, lo que lo hace tan atractivo y fácil de usar para sus visitantes como sea posible.

Cómo se ve CSS

Diseño CSS

CSS también puede ayudarnos a poner todas nuestras piezas en la página..

Imágenes

En esta parte del viaje, hablaremos rápidamente sobre el tipo de imagen que se incluirá en nuestro sitio y cómo aplicarle un estilo. Se agregarán cuatro imágenes preciosas, ¿qué piensas de ellas??

Conceptos básicos de diseño

En esta parte veremos los “bloques de construcción” del diseño web. Queremos asegurarnos de que hagamos algo que la gente usará y que pueda usar fácilmente, así como asegurarnos de que se vea bien.

Tipografía

Tipografía es el arte de organizar el tipo y un excelente seguimiento de nuestra nueva lección de diseño, ya que puede contribuir en gran medida al éxito de nuestro sitio web..

El primer ejemplo de tipografía en nuestro sitio se puede encontrar en la parte superior:

Color

El color es muy importante y muy divertido. El color puede hacer un sitio bonito, así como tener sentido, de lo que hablaremos todo aquí.

Fin de la serie

Terminaremos esta serie de lecciones aprendiendo cómo obtener los archivos de su sitio web en una de esas computadoras especiales, un servidor, para que todos tus amigos y familiares puedan verlo en internet. También hablaremos sobre dónde puede realizar sus estudios con su nuevo título como "Diseñador web para Tuts + Town".

Pero no nos preocupemos demasiado por eso, solo hemos llegado hasta aquí.!

Te veo pronto!

En la próxima lección, aprenderemos cómo nos preparamos para crear un sitio web con HTML. No puedo esperar, nos vemos por la ciudad!