Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Preparándonos para Construir un Sitio Web

Scroll to top
Read Time: 4 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

Bienvenido a la segunda lección de nuestra serie Diseño Web para Niños!

En esta lección vamos a aprender todo sobre ciertas cosas que necesitamos hacer y las herramientas que necesitamos antes de empezar a escribir el código para nuestro sitio web de Ciudad Tuts+; vamos a llegar a eso, lo prometo! También, no olvides hacer cualquier pregunta en el área de comentarios al final de esta página.

Sin embargo, primero lo primero, vamos a ver más de cerca exactamente que vamos a estar creando juntos!

Bosquejando

Es muy útil bosquejar cualquier idea que tengamos en nuestras cabezas antes de empezar a construirlas. Es un ejercicio que nos puede salvar mucho tiempo cuando lleguemos a la parte de codear.

Quizás lo que tenemos en mente no luce bien una vez que está en el papel? Quizás aparecen nuevos problemas y preguntas a partir del bosquejo? Quizás nuestro diseño simplemente es demasiado recargado? Muchos de esos problemas aparecerán por si mismos en nuestros bosquejos.

Está bien que no te gusten nuestros dibujos al principio, eso es exactamente lo que queremos que ocurra! Queremos que esto funcione en papel primero.

Bosquejando el sitio web de Ciudad Tuts+

Necesitamos un sitio web para que los turistas lo visiten y aprendan acerca de los negocios que ofrece nuestra ciudad. Agruparemos los negocios de una forma que tenga sentido, como "hoteles" en un grupo y "restaurantes" en otro. Vamos a querer tener links a los sitios web de los negocios, así nuestros usuarios pueden hacer click para obtener más detalles.

También hay algunas imágenes que usaremos para dar una sensación de bienvenida a la ciudad.

Aquí hay un vistazo del bosquejo que llevará a la vista previa del sitio totalmente diseñada y coloreada:

Este es exactamente el sitio que estaremos creando de la nada! Luce bien.

Editores

Para escribir código HTML (ese lenguaje secreto del que hablamos en la primera lección) necesitamos un editor de texto en el que escribir.

Lo mejor es no usar algo como Microsoft Word para esto, ya que un editor de texto de código hará el trabajo mucho más fácil. Un editor de código comprenderá que lo que estamos escribiendo y hará que el código tenga los colores correctos, mientras que Microsoft Word es mejor para escribir reportes de la escuela, por ejemplo.

Hay varios editores buenos, gratuitos que puedes bajar desde la web. Si no estás seguro de cómo bajar algo, o no estás seguro si deberías, siempre es mejor preguntarle a un adulto.

Bluefish es genial para computadoras corriendo Windows, mientras que Atom será bueno en una Mac.

Saltaremos a lo que este texto significa en el siguiente curso, pero es una vista previa de lo que puedes esperar escribir.

Archivos, archivos, archivos

Como ya hablamos un poco anteriormente, un sitio web es solo un montón de archivos. Estos archivos deben estar todos en la misma carpeta para que el navegador pueda obtenerlos.

El sitio web de Ciudad Tuts+ va a tener un archivo HTML (guardado con una extensión de archivo .html al final), un archivo CSS (guardado con una extensión .css al final), y cuatro imágenes que estarán guardadas en una carpeta llamada "images". La carpeta de imágenes va a estar en la misma carpeta principal que los archivos HTML y CSS.

Una extensión de archivo es el grupo de letras que están después del punto en el nombre de un archivo, nos dicen qué tipo de archivo es:

Como lo mencionábamos, nuestras imágenes estarán guardadas en una carpeta llamada "images" dentro de nuestra carpeta principal del sitio, así:

En la imagen de arriba tenemos una imagen llamada town.svg (la extensión .svg es un tipo de imagen) que hemos puesto en una carpeta extra llamada "images". Hacer esto ayuda a mantener las cosas ordenadas:

Las dos maneras de hacer las cosas es correcta, pero usaremos las carpetas extra, como en la imagen de la derecha.

Navegadores

Veremos nuestro trabajo directamente en el navegador, como el que estás usando para ver esta página de Tuts+!

Hay varios navegadores disponibles para bajar gratuitamente, si no tienes uno, como Google Chrome y Firefox. Si estás usando una computadora Mac ya tendrás instalado Safari, bien!

No en la Web, Todavía

Vamos a construir nuestro sitio web directamente en nuestras computadoras y no en Internet. Si recuerdas la primera lección, explicamos que no podemos ver un sitio web en Internet si no está en un servidor.

La imagen de abajo muestra como lucirá el sitio web siendo visto localmente (no en Internet) en un navegador. En lugar de ver una dirección web como www.tutsplus.com, vamos a ver la dirección local del sitio, que luce un poco diferente:

Bien hecho!

En esta lección vimos algunas cosas importantes que nos ayudarán a estar listos para escribir el código de nuestro sitio web. Vimos cómo preparar los archivos y algunas herramientas como un editor de texto y un navegador.

En nuestra siguiente lección saltaremos directamente a la parte de codear de nuestro sitio web! Organizaremos (lo se, mucha organización!) y agregaremos algo de código a nuestro archivo HTML. Aquí es donde la diversión comienza!

Nos vemos por la ciudad!

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.