Share
Bienvenido a la segunda lección de nuestra serie Diseño web para niños.!
En esta lección aprenderemos todo sobre algunas cosas que debemos hacer y las herramientas que necesitamos antes de comenzar a escribir el código para nuestro sitio web Tuts + Town; Estamos llegando allí, lo prometo! Además, no olvide hacer preguntas en el área de comentarios al final de esta página..
Lo primero es lo primero, echemos un vistazo más de cerca a lo que vamos a crear juntos!
Es muy útil hacer un bosquejo de las ideas que tenemos en la cabeza antes de comenzar a construirlas. Es un ejercicio que nos puede ahorrar mucho tiempo cuando llegamos a la parte de codificación..
Tal vez, ¿qué hay en nuestras cabezas que no se ve bien una vez que está en el papel? Tal vez surgen nuevos problemas y preguntas en nuestro bosquejo? Tal vez nuestro diseño es demasiado ocupado? Muchos de estos problemas se mostrarán en nuestros bocetos..
Sus DE ACUERDO Para no gustar nuestros bocetos al principio, ¡eso es exactamente lo que queremos que suceda! Queremos que todo esto se resuelva en papel primero..
Necesitamos un sitio web para que los turistas visiten y aprendan sobre las tiendas y negocios que ofrece nuestra ciudad. Agruparemos estos negocios de una manera que tenga sentido, como "hoteles" dentro de un grupo y "restaurantes" en otro. Queremos tener enlaces a los sitios web de la empresa, para que nuestros visitantes puedan hacer clic en ellos para obtener más detalles..
También hay algunas imágenes que utilizaremos para dar una sensación de bienvenida a la ciudad..
Aquí hay un vistazo al boceto que llevó a la vista previa del sitio completamente diseñada y coloreada:
Este es el sitio exacto que vamos a crear desde cero! Con buena pinta.
Para escribir código HTML (todas esas cosas de lenguaje secreto de las que hablamos en la primera lección) necesitamos un editor de texto para escribirlo en.
Es mejor no usar algo como Microsoft Word para esto, como un adecuado código editor de texto hará nuestro trabajo mucho más fácil. UNA editor de código entenderemos lo que estamos escribiendo y haremos que todos los códigos tengan los colores correctos, mientras que Microsoft Word es mejor para escribir informes escolares, por ejemplo.
Hay varios buenos editores de código gratuitos que puedes descargar de la web. Si no está seguro de cómo descargar algo, o no está seguro si debería, siempre es mejor preguntar a un adulto..
Bluefish es ideal para computadoras que ejecutan Windows, mientras que Atom será una buena opción para una Mac.
Iremos a lo que significa este texto en el próximo curso, pero aquí hay un vistazo a lo que puede esperar a estar escribiendo..
Como ya hemos hablado un poco, un sitio web es solo un montón de archivos. Estos archivos deben estar todos en la misma carpeta para que el navegador los obtenga..
El sitio web de Tuts + Town tendrá un archivo HTML (guardado con un .html extensión de archivo al final), un archivo CSS (guardado con un .extensión de archivo css al final), y cuatro imágenes que se guardarán en una carpeta llamada "imágenes". La carpeta de imágenes vivirá en la misma carpeta principal que los archivos HTML y CSS.
UNA extensión de archivo es el grupo de letras que vienen después del punto en el nombre de un archivo, que nos dice qué tipo de archivo es:
Como se mencionó anteriormente, nuestras imágenes se guardarán en una carpeta llamada "imágenes" dentro nuestra carpeta principal del sitio, así:
En la imagen de arriba tenemos una imagen llamada town.svg (la .svg la extensión es solo un tipo de imagen) que hemos colocado en una carpeta adicional llamada "imágenes". Hacer esto ayuda a mantener las cosas ordenadas:
Ambas formas de hacer las cosas son correctas, pero usaremos carpetas de extras, como la imagen de la derecha.
Veremos nuestro trabajo justo en el navegador, como la que está utilizando ahora para ver esta página de Tuts +!
Hay varios navegadores disponibles para descarga gratuita si aún no tiene uno, como Google Chrome y Firefox. Si está utilizando una computadora Mac, ya tendrá instalado Safari.!
Vamos a construir nuestro sitio web directamente en nuestras computadoras y no La Internet. Si recuerda en nuestra primera lección, explicamos que no podemos ver un sitio web en Internet si no está en un servidor..
La imagen de abajo muestra cómo se vería un sitio web terminado al ser visto localmente (no en Internet) en un navegador. En lugar de ver una dirección web como www.tutsplus.com, vemos el sitio local Dirección, que se ve un poco diferente:
En esta lección analizamos algunas cosas importantes que nos ayudarán a prepararnos para escribir el código de nuestro sitio web. Vimos cómo preparar archivos y algunas herramientas como editor de texto y un navegador.
En nuestra próxima lección, ¡saltaremos directamente a la parte de codificación de nuestro sitio web! Organizaremos (lo sé, ¡mucha organización!) Y agregaremos algo de código a nuestro archivo HTML. Aquí es donde comienza la diversión.!
Te veo por la ciudad!
Accentsconagua