Share
¡Lo hicimos! Creamos nuestro primer sitio web desde cero y hablamos sobre algunas piezas esenciales de diseño como espacios en blanco, tipografía y color..
En este último tutorial, repasaremos rápidamente todo lo que hemos aprendido hasta ahora sobre la creación de un sitio web y el diseño, revisaremos las formas de obtener nuestro sitio web en Internet para poder dirigir a nuestros amigos y familiares a una dirección web, y tocar un poco en algunos Recursos útiles para seguir adelante con nuestros estudios..
No olvide hacer cualquier pregunta final en la sección de comentarios al final de esta página.!
Echemos un vistazo a la hoja de ruta de la serie que tomamos para llegar a donde estamos ahora..
Comenzamos esta serie abordando cómo funciona la web. Para que dos computadoras diferentes puedan comunicarse entre sí, ambas deben estar conectadas a Internet a través de un ISP (Proveedor de servicios de Internet).
Para permitir que otras personas revisen nuestro sitio en Internet, estos archivos del sitio se deben transferir (mover) a un servidor; Una computadora especial con acceso directo a internet. Vamos a revisar esto más en una sección a continuación.
Nuestro papel en Internet es el de un diseñador web. Nuestro trabajo es asegurarnos de que un sitio se vea encantador y que nuestros usuarios lo puedan leer y navegar de manera muy fácil..
Con estos objetivos en mente, nos dispusimos a comenzar a construir nuestro sitio Tuts + Town con HTML y CSS después de elaborar algunos fantásticos bocetos en papel. Con el fin de preparar esta parte del proceso, tuvimos que aprender todo sobre la denominación de archivos y la organización..
Ahora sabemos que el archivo HTML principal siempre se llama index.html y si las imágenes se encuentran en su propia carpeta o no afecta a la src atributo en nuestro HTML.
Finalmente, seleccionamos un editor de texto y estábamos preparados oficialmente para comenzar a escribir algunos archivos HTML y CSS!
Para construir nuestro sitio Tuts + Town, primero establecimos nuestra estructura HTML y luego insertamos el contenido.
Esta estructura estaba formada por varios elementos. anidado dentro de una primaria html El elemento y tener esta base en su lugar hizo que la conexión del contenido fuera mucho más sencilla.
Una vez que el contenido estuviera en su lugar, podríamos comenzar a diseñar todo con CSS. Primero, necesitábamos vincular los dos documentos juntos en el HTML cabeza:
En nuestro documento CSS pudimos declarar colores, tamaños, diseño y más en elementos dentro del documento HTML, lo que finalmente lleva al diseño completo del sitio.
Esta sección de la serie terminó con un tutorial sobre los diferentes formatos de imagen disponibles para nosotros. Hablamos sobre incluirlos en nuestro HTML y algunos efectos que podemos aplicar a las imágenes con CSS, como cambiar su opacidad:
Como se mencionó, todas las imágenes utilizadas a lo largo de la serie Tuts + Town son SVG, lo que significa que se pueden cambiar de tamaño sin perder calidad y se pueden editar fácilmente..
Después de crear nuestro sitio, revisamos los conceptos básicos de diseño que ayudaron a formar el aspecto, la sensación y la facilidad de uso del sitio..
El contenido es la parte más importante del diseño web, por lo que después de establecer que nuestro contenido es útil, necesario y está bien organizado, pasamos a lo visual.
La jerarquía visual se estableció para el sitio a través de diferentes tamaños de fuente, colores y espacios en blanco, al igual que el globo de arriba está diseñado para ser el objeto dominante en la imagen.
La tipografía está en todas partes, vemos palabras escritas y es una de las partes más importantes del diseño web. Nuestros usuarios deben poder leer nuestro contenido, pero también debemos asegurarnos de que las fuentes que elegimos coincidan con el tono y la sensación de nuestro contenido y diseño visual..
Esta 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..
Refiriéndonos a las ruedas de colores primarias y secundarias nos ayuda a comprender mejor cómo se crean ciertos colores y por qué algunos colores pueden verse bien juntos, mientras que otros no..
Ahora, veamos cómo haríamos para obtener nuestro sitio en la web!
Como vimos al principio de esta serie, este sitio vive en la zona en nuestras computadoras individuales y no en Internet. En este punto, no podemos dirigir a amigos y familiares a una dirección en la web, por lo que aún no pueden ver nuestro increíble trabajo.
Como comentamos en el tutorial de Introducción, los archivos deben vivir en un servidor para que otros puedan verlos en Internet..
El proceso de obtener un sitio en Internet a menudo puede implicar hacer una compra y tener una dirección de correo electrónico. Si usted es demasiado joven para tener acceso a cualquiera de estos, es mejor tener un adulto con usted en la siguiente sección..
Hay una serie de servicios que ayudarán anfitrión Nuestros archivos para nosotros, haciéndolos accesibles en internet. Para esta serie, nos centraremos en el alojamiento a través de NeoCities y el concepto básico de nombres de dominio..
NeoCities es un fantástico y gratis opción para el alojamiento de archivos en la web; aunque todavía necesitamos una dirección de correo electrónico para registrarse!
Veamos los pasos para que nuestros archivos se alojen aquí:
Aquí hay un vistazo al sitio en NeoCities: tutsplustown.neocities.org
Otro beneficio de este servicio es que no tendremos que pasar por el proceso de compra y configuración del dominio (la dirección personalizada para los sitios), aunque también veremos cómo hacerlo a continuación..
Importante! Es posible usar un nombre de dominio personalizado con NeoCities ingresando a la configuración del sitio después de la configuración inicial y siguiendo las instrucciones allí; aunque esto actualmente requiere una cuenta actualizada por $ 5.00 USD mensuales.
Los dominios son aquellas direcciones personalizadas a las que remitimos a las personas para que puedan visitar un sitio. Este paso no fue necesario cuando alojamos 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 este nombre.
Al igual que con nuestro nombre de usuario de NeoCities, nuestro nombre de dominio también tendrá que ser único; Puede tomar algún tiempo encontrar un nombre que no se haya tomado.
Aquí hay un par de servicios que nos permiten comprar nombres de dominio una vez que creamos una cuenta:
El último paso para configurar un dominio personalizado se puede completar a través del servicio de alojamiento (como Neocities o BitBalloon que se mencionan a continuación) una vez que se transfieran los archivos.
Si decidimos no utilizar NeoCities, hay algunas otras empresas de alojamiento que se destacan por ser especialmente asequibles y fáciles de usar, pero quizás la que más se destaca por estas razones es BitBalloon.
BitBalloon se puede probar de forma gratuita, pero requiere un pago para incluir un dominio personalizado, como NeoCities. La facilidad con la que se pueden arrastrar y colocar archivos en la interfaz hace que esta sea una opción bastante interesante para sitios básicos como Tuts + Town.
Una vez que se transfieren los archivos, podemos completar el proceso de configuración del dominio personalizado a través de las herramientas dentro del tablero de BitBalloon.
Nuestro sitio Tuts + Town tiene su propia dirección de sitio que se obtuvo y configuró de manera similar a la que acabamos de revisar: tutsplustown.com.
Si bien esta serie proporciona una introducción al diseño web, podemos terminar rápidamente queriendo mejorar nuestras habilidades una vez que práctica práctica práctica los temas que revisamos aquí.
El libro "Construye tu propio sitio web, una guía cómica de HTML, CSS y Wordpress" por Nate Cooper proporciona una base sólida para crear un sitio a través de una historia divertida contada en formato cómico..
Shay Howe ha escrito como una serie de tutoriales detallados en HTML y CSS de nivel principiante y avanzado:
El diseño web sensible se refiere al diseño de sitios que tienen en cuenta diferentes tamaños de pantalla. Pasamos mucho tiempo en nuestros teléfonos inteligentes, por ejemplo, y como diseñadores necesitamos asegurarnos de que nuestro sitio funcione en estas pantallas más pequeñas, así como en una pantalla de escritorio de tamaño completo.
Hay un fantástico tutorial para principiantes de Shay Howe sobre el tema..
Utilizamos píxeles a lo largo de esta serie como una unidad de medida en la web. El uso de píxeles está perfectamente bien al comenzar, sin embargo, cuanto más experiencia obtenga, más se dará cuenta de lo limitantes que son. Es una unidad de medida tan inflexible que no funciona bien en un diseño sensible..
En términos de diseño en diferentes tamaños de pantalla, hay varias alternativas que serán más flexibles que los píxeles, como porcentajes y rems.
Si bien discutimos brevemente flexbox en el tutorial de diseño de CSS, hay mucho más que podemos lograr con los diseños que usamos. Hay un par de lugares excelentes para aprender más, como esta Guía completa de Flexbox y un diagrama de hojas de referencia de Flexbox.
En cuanto al diseño en su totalidad y no solo a flexbox, hay un sitio pequeño y ordenado que nos ayuda con lo básico.
Si bien hay mucho más que podemos aprender para fortalecer y hacer crecer nuestras habilidades de diseño web, hemos logrado mucho a lo largo de esta serie y ahora tenemos una mejor comprensión de los conceptos básicos tanto para diseñar como para construir un sitio..
Oficialmente le dimos vida a un sitio web desde bocetos 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 hermosa y fácil de usar para los turistas que estén considerando visitar, por lo que gracias por todo su trabajo.
Accentsconagua