() translation by (you can also view the original English article)
¡Lo logramos! Creamos nuestro primer sitio web desde cero y hablamos sobre algunas cosas esenciales del diseño como espacio en blanco, tipografía y color.
En éste tutorial final rápidamente repasaremos todo lo que hemos aprendido hasta ahora sobre crear un sitio web y diseñar, revisar las formas de poner nuestro sitio web en internet para que podamos dirigir a nuestros amigos y familiares a una dirección web, y abordamos un poco sobre algunos recursos útiles para avanzar nuestros estudios.
No olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de ésta página.
Recapitulando
Veamos el mapa de ruta de la serie que tomamos para llegar hasta donde nos encontramos.
Bases y Preparación
Comenzamos ésta serie abordando cómo funciona la web. Para que dos diferentes computadoras se comuniquen ambas deben estar conectadas a la internet a través de un ISP (Proveedor de Servicios de Internet).
Para permitir que otras personas vean nuestro sitio en la internet los archivos de éste sitio deben ser transferidos (movidos) a un servidor; una computadora especial con acceso directo a internet. Revisaremos ésto en una sección posterior.
Nuestro rol en la internet es el de un diseñador web. Es nuestro trabajo asegurar que un sitio se ve magnífico y es super fácil para nuestros usuarios leer y navegar.
Con éstas metas en mente nos preparamos para empezar a crear nuestro sitio Tuts+ Town con HTML y CSS después de realizar algunos bosquejos en papel. Para prepararnos para ésta parte del proceso tuvimos que aprender todo sobre nombrar y organizar archivos.
Ahora sabemos que el archivo principal HTML siempre se llamó index.html y si las imágenes se localizan o no en su propio directorio impacta el atributo src en nuestro HTML.
Finalmente, seleccionamos un editor de texto y ¡estábamos oficialmente preparados para comenzar a escribir algunos archivos HTML y CSS!
Elaborando un sitio web con HTML & CSS
Para crear nuestro sitio Tuts+Town primero establecimos nuestra estructura HTML y luego pusimos el contenido.
Ésta estructura fue elaborada de varios elementos anidados dentro de un elemento html primario y teniendo ésta base pusimos el contenido mucho más fácil.
Una vez que el contenido estaba en su lugar pudimos comenzar a dar estilo a todo con CSS. Primero, necesitábamos enlazar los dos documentos juntos en el head de HTML:
1 |
<head>
|
2 |
<link type="text/css" rel="stylesheet" href="tutstown.css" /> |
3 |
</head>
|
En nuestro documento CSS pudimos declarar colores, tamaños, maquetado, y más en elementos dentro del documento HTML, eventualmente encaminándonos a terminar el diseño del sitio.
Imágenes
Ésta sección de la serie finaliza con un tutorial que aborda los diferentes formatos de imágenes disponibles. Hablamos sobre incluirlos en nuestro HTML y algunos efectos pueden aplicarse a imágenes con CSS, como cambiar la opacidad:
Como se mencionó, todas las imágenes usadas en la serie Tuts+ Town son SVGs, lo que significa que pueden ser redimensionadas sin perder calidad y ser fácilmente editadas.
Bases del Diseño
Después de que creamos nuestro sitio revisamos los conceptos básicos del diseño que ayudaron a conformar el aspecto, el sentido y la usabilidad del sitio.
El contenido es la parte más importante del diseño web, así que después de establecer que nuestro contenido es útil, necesario y bien organizado pasamos a las características visuales.
La jerarquía visual fue establecida para el sitio a través de varios tamaños de fuente, y espacios en blanco, así como el globo observado arriba está diseñado para ser el objeto dominante en la imagen.
Tipografía
La tipografía está en todos lados, vemos palabras escritas y es una de las partes más importantes del diseño web. Nuestros usuarios necesitan poder leer nuestro contenido pero también necesitamos asegurarnos que la(s) fuente(s) que elegimos coinciden con el tono y el sentido de nuestro contenido y diseño visual.
Color
Ésta sección de la serie concluyó con un tutorial sobre teoría del color, el significado de ciertos colores, diferentes sistemas de color para la web, y cómo seleccionar una paleta exitosa.
Tomando como referencia los colores primarios y secundarios del círculo cromático nos ayuda a entender mejor cómo ciertos colores son creados y por qué algunos colores pueden verse bien juntos mientras que otros no.
Ahora, ¡veamos como pondríamos nuestro sitio en la web!
Colocando los Archivos en la Web
Como discutimos al inicio de ésta serie, éste sitio vive localmente en nuestras computadoras individuales y no en la internet. En éste punto no podemos dirigir a amigos y familiares a una dirección en la web, así que no pueden todavía ver nuestro fabuloso trabajo.
Como discutimos en el tutorial de Introducción, los archivos necesitan vivir en un servidor para que otros los vean en la internet.
Apunte Rápido para Avanzar
El proceso de poner un sitio en la internet puede frecuentemente involucrar una compra y tener una dirección de internet. Si eres demasiado joven para tener acceso a cualquiera de las opciones es mejor tener a un adulto contigo para la siguiente sección.
Alojamiento
Hay un gran número de servicios que ayudarán a alojar nuestros archivos por nosotros, haciéndolos accesibles en la internet. Para ésta serie vamos a enfocarnos en el alojamiento por medio de NeoCities y el concepto básico de nombres de dominio.
NeoCities
NeoCities es una opción fantástica y gratuita para alojar archivos en la web; aunque ¡aún necesitamos una dirección de correo electrónico para registrarnos!
Veamos los pasos para tener nuestros archivos alojados aquí:
- Para registrarnos necesitamos seleccionar un nombre de usuario (nombre del sitio) e ingresar un correo electrónico. En éste punto vamos a querer nombrar el sitio algo diferente de lo que ha sido creado abajo, pues toda dirección del sitio tiene que ser única. Por ejemplo, en lugar de tutsplustown como un nombre de usuario pudieras elegir algo más que esté disponible o agregas tu nombre, janetutsplustown (de nuevo, solamente si éste está disponible y no está tomado por otros miembro de NeoCities. El sitio vivirá en (nombre de usuario).neocities.org
- Una vez que estamos registrados podemos seleccionar el botón grande rojo "Edite Site" en la esquina superior derecha de la pantalla.
- Posteriormente seremos llevados a un escritorio de archivos donde podemos agregar archivos y directorios. Vamos a querer subir dos archivos: los archivos HTML y el CSS para el sitio y luego creamos un directorio: imágenes. Dentro de imágenes agregaremos los cuatro archivos de imágenes.
- Una vez que los archivos son transferidos ¡nuestro sitio ha sido oficialmente alojado con NeoCities! Habrá un enlace a la dirección del sitio en la parte superior de la página.
Aquí está un aspecto del sitio en NeoCities: tutsplustown.neocities.org
Otro beneficio de éste servicio es que no necesitaremos ir a través del proceso de compra y configuración del dominio (la dirección personalizada para sitios), aunque también abordaremos como hacer esto más adelante.
¡Importante! Es posible usar un nombre de dominio personalizado con NeoCities al ir a la configuración del sitio después de la creación y siguiendo las instrucciones ahí; aunque ésto realmente requiere una cuenta de un nivel superior con una mensualidad de $5.00 USD.
Dominios
Los dominios son esas direcciones personalizadas que indicamos a las personas para que puedan visitar la página. Éste paso no fue necesario cuando albergamos los archivos de nuestro sitio en NeoCities porque creó una dirección especial de NeoCities para nosotros. Sin embargo, si buscamos tener un nombre de dominio verdaderamente personalizado (como tutsplustown.com por ejemplo) tendremos que comprar éste nombre.
Al igual que nuestro nombre de usuario en NeoCities, nuestro nombre de dominio tendrá que ser único también; puede tomar cierto tiempo encontrar un nombre que todavía no esté escogido.
Aquí un par de servicios que nos permite comprar nombres de dominio una vez que creamos una cuenta:
El paso final para crear un dominio personalizado puede completarse a través del servicio de alojamiento (como NeoCities o BitBalloon mencionado abajo) una vez que los archivos son transferidos.
Más Opciones de Alojamiento
Si elegimos no utilizar NeoCities hay otras compañías de alojamiento que destacan plor ser especialmente accesibles y más fáciles de usar, pero quizá la que está a la vanguardia por éstas razones es BitBalloon.
BitBalloon es gratuito para probar pero requiere un pago para incluir un dominio personalizado, casi igual que NeoCities. La facilidad con la que los archivos pueden ser arrastrados y soltados en la interfaz hace de ésta una muy excelente opción para sitios básicos como Tuts+ Town.
Una vez que los archivos son transferidos podemos completar el proceso de creación de dominio personalizado a través de las herramientas del escritorio de BitBalloon.
Nuestro Dominio de Tuts+ Town
Nuestro sitio Tuts+ Town tiene su propia dirección de sitio que fue obtenida y creada de forma similar a la acabamos de ver: tutsplustown.com.
¿Qué Sigue?
Mientras que ésta serie proporciona una introducción al diseño web podemos rápidamente terminar deseando incrementar nuestras habilidades una vez que practiquemos, practiquemos, practiquemos los tópicos que revisamos aquí.
Más HTML & CSS
El libro "Crea Tu Propio Sitio Web, Una Guía Cómica para HTML, CSS y WordPress" de Nate Cooper proporciona una sólida base para crear un sitio a través de una historia divertida contada en un formato cómico.
Shay Howe ha escrito series de tutoriales más detallados tanto para un nivel de principiante como avanzado de HTML y CSS:
Diseño Responsivo
Diseño Web Responsivo se refiere a diseñar sitios que toman en cuenta diferentes tamaños de pantalla. Pasamos mucho tiempo en nuestros teléfonos inteligentes, por ejemplo, y como diseñadores necesitamos asegurarnos que nuestro sitio funciona en éstas pantallas más pequeñas así como en una pantalla de computadora de escritorio.
Hay un fantástico tutorial para principiantes de Shay Howe sobre el tópico.
Unidades de Medida
Utilizamos pixeles a través de ésta serie como unidad de medida en la web. Usar pixeles está perfecto cuando se inicia, sin embargo, mientras más experiencia tienes, más te darás cuenta que tan limitados son. Es una unidad de medida tan inflexible que no se ejecuta bien en diseño responsivo.
En términos de diseño en diferentes tamaños de pantalla hay varias alternativas que son más flexibles que los pixeles, tales como porcentajes y rems.
Maquetado
Mientras discutimos brevemente flexbox en el tutorial de Maquetado CSS hay mucho más que podemos lograr en maquetados usándolo. Hay un par de lugares fabulosos para aprender más, como éste Guia Completa para Flexbox y un Diagrama de Hoja de Referencia de Flexbox.
Respecto al maquetado en genral y no solo flexbox, hay un pequeño sitio magnífico que nos ayuda a entender las bases.
¡Adiós!
Mientras que hay mucho más que podemos aprender para fortalecer e incrementar nuestras habilidades en el diseño, hemos logrado mucho a través de ésta serie y ahora tenemos un mucho mejor entendimiento de las bases tanto sobre diseño como de la creación de un sitio.
Oficialmente convertimos un bosquejo de sitio web en papel a un sitio real con su propia dirección web; ¡todo en el día de un diseñador web!
Nuestro sitio web Tuts+ Town servirá como una guía bonita y fácil de usar para potenciales turistas, asi que gracias por todo tu arduo trabajo.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
