Anuncio

¿Siempre has querido hacer un sitio web? Tal vez hayas leído algo de nuestro HTML (comprensión de HTML 5 pasos para comprender el código HTML básico 5 pasos para entender el código HTML básico, más información) y tutoriales de CSS 5 pasos para aprender CSS y convertirse en un hechicero CSS kick-ass 5 pasos para bebés Aprendiendo CSS y Convertirse en un hechicero CSS de Kick-Ass CSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más, pero no sabe cómo usar esos idiomas en un proyecto más grande.

Hoy te guiaré por el proceso de crear un sitio web completo desde cero. No se preocupe si esto parece una tarea difícil, lo guiaré a través de él en cada paso del camino.

Producirá este sitio web utilizando HTML, CSS y JavaScript con un toque de jQuery (guía de jQuery). Una guía básica de JQuery para programadores de Javascript. Si usted es un programador de Javascript, esta guía de JQuery le ayudará. empiezas a codificar como un ninja. Leer más). No hará nada realmente sangriento, por lo que este código debería funcionar bastante bien en la mayoría de los navegadores modernos.

Si no está seguro de cualquier CSS, eche un vistazo a la guía de CSS en W3Schools.com.

El diseño

Aquí está el diseño de este sitio web. Eche un vistazo a una imagen de alta resolución si desea una mejor vista, o mejor aún, descargue el proyecto completo aquí.

Diseñé este sitio web para una empresa ficticia en Adobe Photoshop CC 2017. Si está interesado, asegúrese de obtener el archivo .PSD de la descarga del paquete. Esto es lo que obtienes en el archivo de photoshop:

Dentro de la PSD, encontrará todas las capas agrupadas, nombradas y codificadas por colores:

Necesitará algunas fuentes instaladas para que las cosas se vean correctas. El primero es Font Awesome, utilizado para todos los iconos. Las otras dos fuentes son PT Serif y Myriad Pro (incluidas con Photoshop). Si no está seguro de cómo instalar las fuentes, lea nuestra guía Cómo instalar las fuentes en Windows, Mac y Linux. Cómo instalar las fuentes en Windows, Mac y Linux Lea más.

No se preocupe si no tiene Photoshop, no lo necesita para continuar.

Código inicial

Ahora que el diseño es claro, ¡comencemos a codificar! Crea un nuevo archivo en tu editor de texto favorito (estoy usando Sublime Text 3). Guarde esto como index.html . Puede llamar a esto como lo desee, la razón por la que muchas páginas se llaman índice se debe a la forma en que funcionan los servidores web. La configuración predeterminada para la mayoría de los servidores es servir la página index.html si no se especifica ninguna página.

Si no desea conocer los detalles, obtenga el código completo de la descarga.

Aquí está el código que necesita:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Esto hace varias cosas:

• Define el HTML mínimo requerido.
• Define un título de página de "Noise Media"
• Incluye jQuery alojado en Google CDN (¿qué es un CDN? ¿Qué son CDN y por qué el almacenamiento ya no es un problema? ¿Qué CDN son y por qué el almacenamiento ya no es un problema? Los CDN hacen que Internet sea rápido y los sitios web asequibles incluso cuando se escala a millones de usuarios. El ancho de banda cuesta dinero, aquellos de nosotros con contratos limitados lo sabemos muy bien. No solo tú ... Leer más).
• Incluye Font Awesome alojado en Google CDN.
• Define una etiqueta de estilo para escribir su CSS.
• Define una etiqueta de script para escribir tu JavaScript.

Guarde su archivo nuevamente y ábralo en su navegador web. Probablemente no notará mucho, y ciertamente no se verá como un sitio web por el momento.

Observe cómo el título de la página es Noise Media . Esto está definido por el texto dentro de la etiqueta del título . Esto tiene que estar dentro de las etiquetas de cabeza .

El encabezado

Vamos a crear el encabezado. Esto es lo que parece:

Comencemos con esa pequeña parte gris en la parte superior. Es un gris claro con un ligero gris oscuro debajo. Aquí hay un acercamiento:

Agregue este HTML dentro de la etiqueta del cuerpo en la parte superior:

Mientras estés aquí, analicemos esto. Un div es como un contenedor para poner otras cosas. Esta "otra cosa" puede ser más contenedores, texto, imágenes, cualquier cosa realmente. Existen algunas restricciones sobre qué se puede incluir en ciertas etiquetas, pero los divs son bastante genéricos. Tiene una identificación de barra superior . Esto se usará para darle estilo con CSS, y apuntarlo con JavaScript si es necesario. Asegúrate de que solo tienes un elemento con una ID en particular: deben ser únicos. Si quieres que varios elementos tengan el mismo nombre, utiliza una clase en su lugar, ¡para eso están diseñados! Aquí está el CSS que necesita para diseñarlo (ponerlo en la parte superior dentro de su etiqueta de estilo ):

 html, body { margin: 0; padding: 0; font-family: 'Helvetica', 'Arial'; /* initial fonts */ } #top-bar { width: 100%; background: #F1F1F1; /* light gray */ border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */ height: 25px; } 

Observe cómo se utiliza el signo de almohadilla (#, hashtag, signo de libra) antes del nombre. Esto significa que el elemento es una ID. Si estuvieras utilizando una clase, utilizarías un punto (.) Completo en su lugar. Las etiquetas html y body tienen su relleno y margen establecido en cero. Esto evita cualquier problema de espaciado no deseado.

Es hora de pasar al logo y barra de navegación. Antes de comenzar, necesita un contenedor para colocar este contenido. Hagamos de esto una clase (para que pueda volver a usarla más adelante), y como este no es un sitio web receptivo, hágalo con 900 píxeles de ancho.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: auto; } 

Puede ser difícil saber qué está pasando hasta que termine el código, por lo que puede ser útil agregar un fondo de color (temporal) para ver lo que está sucediendo:

 background: red; 

Es hora de crear el logotipo ahora. Font Awesome es necesario para el icono en sí. Font Awesome es un conjunto de íconos empaquetados como fuente de vectores, ¡increíble! El código inicial anterior ya configuró Font Awesome, ¡así que está todo listo!

Agregue este HTML dentro de la división de envoltura normal :

  
 Ruido de los medios 

CSS:

 .logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 21px 0 0 25px; } 

No se preocupe porque las otras fuentes no coincidan con el diseño; lo arreglará más adelante. Si desea utilizar iconos diferentes, diríjase a la página de iconos de fuente impresionante y luego cambie el volumen de salida de fa al nombre del icono que desea usar.

Al pasar a la barra de navegación, usará una lista desordenada ( UL ) para esto. Agregue este HTML después del logo-contenedor (pero aún dentro del contenedor normal ):

Casa
Acerca de
Comentarios
Contacto

El href se usa para vincular a otras páginas. Este sitio web tutorial no tiene otras páginas, pero puede poner el nombre y la ruta del archivo (si es necesario) aquí, por ejemplo, reviews.html . Asegúrate de poner esto dentro de las dos comillas dobles.

Aquí está el CSS:

 #navbar { list-style-type: none; /* remove bullet points */ margin: 29px 0 0 0; padding: 0; float: right; font-size: 16pt; } #navbar li { display: inline; /* make items horizontal */ } #navbar li a:link, #navbar li a:visited, #navbar li a:active { text-decoration: none; /* remove underline */ color: #000000; padding: 0 16px 0 10px; /* space links apart */ margin: 0; border-right: 2px solid #B4B4B4; /* divider */ } #navbar li a:link.last-link { /* remove divider */ border-right: 0px; } #navbar li a:hover { /* change color on hover (mouseover) */ color: #EB6361; } 

Este CSS comienza con una lista desordenada . Luego elimina los puntos con list-style-type: none; . Los enlaces están separados un poco, y se les da un color cuando colocas el mouse sobre ellos. El pequeño divisor gris es un borde derecho en cada elemento, que luego se elimina para el último elemento utilizando la última clase de enlace . Esto es lo que parece:

Todo lo que queda para esta sección es el resaltado de color rojo horizontal. Añada este HTML después de la envoltura normal :

Y aquí está el CSS:

 #top-color-splash { width: 100%; height: 4px; background: #EB6361; } 

Esa es la sección superior hecha. Esto es lo que parece: bastante similar al diseño ¿no?

Área de contenido principal

Ahora es el momento de avanzar en el área de contenido principal, la llamada "arriba del pliegue". Así es como se ve esta parte:

Esta es una parte bastante simple, un texto de la izquierda con una imagen a la derecha. Esta área estará vagamente dividida en tercios, aproximadamente aproximándose a la Proporción Áurea Usando la Proporción Áurea en Fotografía para una Mejor Composición Usando la Proporción Áurea en Fotografía para una Mejor Composición. ¿Luchas con la composición de la foto? Aquí hay dos técnicas basadas en la Proporción áurea que mejorarán drásticamente tus tomas con poco esfuerzo de tu parte. Lee mas .

Necesitará la imagen de muestra para esta parte. Está incluido en la descarga. Esta imagen es de 670 píxeles de ancho, y es de nuestra Panasonic Lumix DMC-G80 / G85 Revisión Panasonic Lumix DMC-G80 / G85 Revisión Panasonic Lumix DMC-G80 / G85 Revisión La Lumix G85 es la última cámara sin espejo de Panasonic, y tiene un gran impacto el departamento de video, con salida HDMI y grabación 4K, ¡todo por $ 1000! Lee mas .

Agregue el HTML después del elemento top-colour-splash :

¡Bienvenido! 
Noise Media es una compañía tecnológica especializada en revisiones tecnológicas.
Somos muy buenos en lo que hacemos, pero lamentablemente, no somos una empresa real.
Asegúrese de visitar makeuseof.com para obtener el tutorial completo sobre cómo construir este sitio web.
Alternativamente, revisa nuestra revisión de la Panasonic G80 que se muestra a la derecha.

Observe cómo ha regresado el elemento contenedor normal (esa es la alegría de usar clases). Es posible que se pregunte por qué la etiqueta de imagen ( img ) no se cierra. Esta es una etiqueta de cierre automático. La barra inclinada ( /> ) indica esto, ya que no siempre tiene sentido cerrar una etiqueta.

CSS:

 .one-third { width: 40%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ margin-top: 20px; } .two-third { width: 60%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ padding-left: 40px; text-align: right; margin-top: 20px; } .featured-image { max-width: 500px; /* reduce image size while maintaining aspect ratio */ } .no-margin-top { margin-top: 0; /* remove margin on things like headers */ } 

El atributo más importante aquí es el tamaño de caja: border-box; . Esto asegura que los elementos siempre tendrán un ancho de 40% o 60%. El valor predeterminado (sin este atributo) es el ancho especificado más cualquier relleno, márgenes y bordes. La clase de imagen (imagen destacada ) tiene un ancho máximo de 500 px . Si solo especifica una dimensión (un ancho o una altura) y deja la otra en blanco, css cambiará el tamaño de la imagen mientras mantiene su relación de aspecto.

Área de cotización

Vamos a crear el área de cotización. Esto es lo que parece:

Esta es otra área simple. Contiene un fondo gris oscuro, con texto blanco centrado.

Agregue este HTML después de la envoltura normal anterior:

"Makeuseof es el mejor sitio web" 
Joe Coburn 

Y luego este CSS:

 #quote-area { background: #363636; color: #FFFFFF; text-align: center; padding: 15px 0; } h3 { font-weight: normal; font-size: 20pt; margin-top: 0px; } h4 { font-weight: normal; font-size: 16pt; margin-bottom: 0; } 

No están pasando muchas cosas aquí. El tamaño es el ajuste principal necesario: tamaño de letra, espaciado, etc. Así es como se ve todo ahora: ¡empieza a parecerse a un sitio web!

Área de icono

Sigamos presionando, está casi terminado. Esta es la siguiente área que necesita crear:

Esta parte utilizará varias clases. Los tres iconos son en su mayoría iguales, a excepción del contenido, por lo que tiene sentido utilizar clases en lugar de identificadores. Agregue este HTML después del área de cotización previa:

  
 Youtube 
¡Visite nuestro canal de YouTube para obtener más reseñas técnicas, tutoriales y obsequios!
 Comentarios 
Si planea comprar un nuevo gadget, consulte aquí primero. Le daremos revisiones detalladas de los últimos dispositivos.
 Guías de compra 
En Buying Guides nos esforzamos por ofrecer a los lectores las herramientas para obtener las mejores cosas por la menor cantidad de dinero.

Estos tres iconos también son Font-Awesome. El HTML está utilizando nuevamente la clase de envoltorio normal . Aquí está el CSS:

 .icon-outer { box-sizing: border-box; /* ensure padding and borders do not increase the size */ float: left; width: 33.33%; padding: 25px; margin: 0; text-align: center; } .icon-circle { background: #EEEEEE; color: #B4B4B4; width: 200px; height: 200px; border-radius: 200px; /* make rounded corners */ margin: 0 auto; border: 2px solid #D6D6D6; box-sizing: border-box; /* ensure padding and borders do not increase the size */ font-size: 75pt; padding: 30px 0 0 0; cursor: pointer; } .icon-circle:hover { /* change color on hover (mouseover) */ color: #FFFFFF; background: #EB6361; } h5 { margin: 15px 0 10px 0; font-size: 20pt; } 

Hay algunas cosas nuevas pasando en el CSS. Las esquinas redondeadas se establecen por radio de borde: 200px; . Establecer este valor igual al ancho da como resultado un círculo perfecto. Puede reducir esto si prefiere más cuadrados con esquinas redondeadas. Observe cómo las acciones de flotación se aplican a los divs: no está restringido solo a los enlaces. Así es como se ve esta sección ahora:

El pie de página

¡Lo último que debe hacer es el pie de página! Esto es realmente simple, ya que es solo un área gris sin texto. Agregue este HTML después de la envoltura normal de las áreas del icono:

Aquí está el CSS:

 #footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 150px; } 

Ver - cosas realmente simples.

Agregue un poco de pizzazz

Eso es todo, ¡la codificación está hecha! Puede dejar las cosas como están, es una página web terminada. Sin embargo, puede haber notado que no se ve exactamente como el diseño. La razón principal de esto es las fuentes utilizadas. Vamos a resolver eso.

La fuente utilizada para la mayoría de los títulos es Myriad Pro . Esto viene con Adobe Create Cloud, pero no está disponible como una fuente web. La fuente utilizada actualmente en la página web es Helvetica . Esto se ve bien, así que puedes dejarlo como está, sin embargo PT Sans está disponible como una fuente web. La fuente utilizada para todo el texto es PT Serif, que está disponible como una fuente web.

Los Webfonts son un proceso simple. Al igual que cargar una fuente nueva en su computadora, las páginas web pueden cargar fuentes a pedido. Una de las mejores formas de hacerlo es a través de Google Fonts.

Agregue este CSS para cambiar a las mejores fuentes:

 @import url('https://fonts.googleapis.com/css?family=PT+Sans'); @import url('https://fonts.googleapis.com/css?family=PT+Serif'); h1, h2, h4, h5, h6 { font-family: 'PT Sans', 'Helvetica', 'Arial'; } 

Ahora modifique sus elementos html y body para usar las nuevas fuentes:

 font-family: 'PT Serif', 'Helvetica', 'Arial'; 

Observe cómo el elemento h3 no está incluido en la lista: esto será PT-Serif en lugar de PT-Sans .

Como último detalle, usemos JavaScript para desplazarnos por tres imágenes destacadas diferentes. Necesitará Image_2 e Image_3 para esta parte, y nuevamente, es opcional. El sitio web es completamente funcional en este punto sin esta característica. Esto es lo que se verá (acelerado):

Modifique su HTML para incluir tres imágenes destacadas. Observe cómo dos de estos tienen una clase de CSS oculta . A cada imagen se le ha dado una identificación para que el JavaScript pueda dirigirse a cada una de ellas de manera independiente.

Aquí está el CSS necesario para ocultar las imágenes destacadas adicionales:

 .hidden { display: none; } 

Ahora que se ocupan de HTML y CSS, cambiemos a JavaScript. Es útil comprender el modelo de objetos de documento JavaScript y el desarrollo web: usar el modelo de objetos de documento JavaScript y el desarrollo web: usar el modelo de objetos de documento Este artículo le presentará el esqueleto del documento con el que trabaja JavaScript. Al tener un conocimiento práctico de este modelo de objeto de documento abstracto, puede escribir JavaScript que funcione en cualquier página web. Lea más (DOM) para esta parte, pero no es un requisito.

Encuentre el área de script en la parte inferior de la página:

 /* JavaScript goes here, at the bottom of the page */ 

Agregue el siguiente JavaScript dentro de la etiqueta de script :

 /* JavaScript goes here, at the bottom of the page */ $(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1; } } }); 

Están sucediendo algunas cosas aquí. El código está dentro de $ (document) .ready () . Esto significa que se ejecutará una vez que su navegador haya terminado de renderizar la página; esta es una buena práctica. La función setInterval () se utiliza para llamar a la función changeImage () regularmente en un intervalo predefinido en milisegundos (1000 milisegundos = 1 segundo). Esto se almacena en la variable de tiempo . Puede aumentar o disminuir esto para acelerar o ralentizar el desplazamiento. Finalmente, se utiliza una declaración de caso simple para mostrar diferentes imágenes y realizar un seguimiento de la imagen que se muestra actualmente.

Desafío de codificación

¡Eso es! Espero que hayas aprendido mucho durante el proceso. Si te apetece un desafío y quieres poner a prueba tus nuevas habilidades encontradas, ¿por qué no intentas implementar estas modificaciones?

Agregue un pie de página: agregue texto en el pie de página (sugerencia: puede reutilizar las clases de envoltura normal y de un tercio / dos tercios ).
Mejore el desplazamiento de la imagen: modifique el JavaScript para animar los cambios de la imagen (sugerencia: mire jQuery fadein y animé).
Implementar varias comillas: modifique las comillas para cambiar entre una y varias (sugerencia: observe el código de desplazamiento de la imagen para un punto de inicio).
Configurar un servidor: configurar un servidor y enviar datos entre la página web y el servidor (sugerencia: lea nuestra guía de JSON y Python) Cómo obtener Python y JavaScript para comunicarse con JSON Cómo obtener Python y JavaScript para comunicarse usando JSON Hoy voy a le mostraré cómo usar JSON para enviar datos de JavaScript a Python. Voy a tratar sobre cómo configurar un servidor web, junto con todo el código que necesita. Lea más).

¿Has aprendido nuevas habilidades hoy? ¿Cómo te fue con los desafíos de codificación? ¿Qué modificaciones hizo para que este sitio web sea suyo? Háganos saber en los comentarios a continuación, nos encantaría saber!