![[Megapost]Crea tu página web profesional en minutos!Parte 2](https://storage.posteamelo.com/assets-adonis/assets/2015/06/07/934-mh-slbO82tO.webp "[Megapost]Crea tu página web profesional en minutos!Parte 2")
Hola, si no viste la parte 1 de este tutorial, podés verlo acá:
ESPERA A QUE CARGUE EL POST, GRACIAS!
Hola de nuevo! Mil gracias a todos por sus comentarios, recomendaciones, y puntos
En este segundo post, vamos a agregar cosas llamativas a nuestra web, como un SlideShow de portada, un formulario para contactar con el dueño del website y algunas cosas más...
Antes de crear el Slideshow y el formulario, vamos a agregar las páginas de nuestra web (en mi caso: HTML5, CCS3, JAVASCRIPT y JQUERY). Creamos un .html para cada uno ( html5.html - css3.html - javascript.html - jquery.html) Luego, copiamos el código de index.html (o index.php) y lo copiamos en todos.
Y les debería quedar así:
Bien ahora vamos a pegar el contenido de index.html (ó index.php) y lo vamos a pegar en los cuatro .html que acabamos de crear (y lo guardamos de nuevo a cada uno).
El <div id="menu"></div> debe quedar así, coincidiendo con los nombres que les asignaron a los otros .html
Bien y por último vamos a copiar y pegar el contenido de style.css. Para ello, vamos a crear la etiqueta <style type="text/css"></style> dentro de <head></head>, y pegaremos el estilo ahí adentro y lo guardamos, de esta forma:
Perfecto! Ya tenemos nuestras páginas creadas, ahora, si abrimos el index.html en internet, el menú va a ser útil, pruebenlo
Bueno, esto fue un pequeño tutorial de como anexar las páginas. Ustedes pueden editar el código del css que está entre el <style type="text/css"></style> para cambiar el aspecto de cada página. Ahora seguimos con el primer tutorial "semi-avanzado" para agregar a nuestro sitio web.
[/align]
Aquí va un ejemplo del Slider de portada que queremos hacer:
PASO Nº 1:
Elegimos 6 fotografías de un mismo tamaño. Yo usaré fotos de 1280px de largo y 150px de ancho. Yo ya las elegí:
Las subimos a un hosting de imágenes (prefentemente: )
PASO Nº 2:
Abrimos el archivo index.html (o index.php, como les haya quedado) y creamos una lista ordenada:
¿Que es <ul class="slideshow">
Bueno, ya conocíamos el <div id=""></div>. estas "id=""", "class=""" Se llaman atributos, y van siempre dentro de la etiqueta de apertura (<div>, la etiqueta de cierre sería </div>). El class="" sirve para asignar un estilo css a varios elementos (o sea que puedo utilizar class="X" en varias etiquetas a la vez), mientras que id="" sirve para asignar un estilo a un elemento único. Bien, ahora que sabemos que son y sus diferencias, continuemos con el tutorial.
PASO Nº3:
Ya acabamos con la parte de html (fue cortita) jeje. Ahora nos adentramos totalmente al css.
Comenzaremos escribiendo esta línea para sacarle los estilos a la lista que habíamos creado:
Luego, en la siguiente linea pondremos las características del span del Slideshow:
.slideshow li span {width:100%;height:150px;position:absolute;top:0px;left:0px;color:transparent;background-size:cover;background-position: 50% 50%;background-repeat:none;opacity:0;z-index:-1;-webkit-backface-visibility: hidden;-webkit-animation: imageAnimation 36s linear infinite 0s;-moz-animation: imageAnimation 36s linear infinite 0s;-o-animation: imageAnimation 36s linear infinite 0s;-ms-animation: imageAnimation 36s linear infinite 0s;animation: imageAnimation 36s linear infinite 0s; }
Pueden copiarlo y pegarlo, ya que no me detendré a explicar esto que es muy complejo para los recién iniciados en el tema
Bueno, les explico brevemente que es este choclo de palabras y números.
width:100%; Representa al ancho de la pantalla (y del slideshow), ustedes pueden cambiarlo a 1280px o a porcentajes menores para ajustarlo al lugar que quieran (las imágenes deben tener el mismo ancho).
height:150px; Es la altura del slideshow, pueden cambiarlo (las imágenes deben tener la misma altura)
background-repeat:none; Para que no se repitan las imágenes
El resto tiene un significado más técnico del cual no voy a hablar, para no hacerles barullo
Ahora vamos a centrarnos en las imágenes, vamos a poner sus links en los códigos y darle el tiempo de animación a cada una:
.slideshow li:nth-child(1) span{background-image:url('LINK-IMAGEN-1')}
.slideshow li:nth-child(2) span{background-image:url('LINK-IMAGEN-2');-webkit-animation-delay:6s;-moz-animation-delay:6s;-o-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s;}
.slideshow li:nth-child(3) span{background-image:url('LINK-IMAGEN-3');-webkit-animation-delay:12s;-moz-animation-delay:12s;-o-animation-delay:12s;-ms-animation-delay:12s;animation-delay:12s;}
.slideshow li:nth-child(4) span{background-image:url('LINK-IMAGEN-4');-webkit-animation-delay:18s;-moz-animation-delay:18s;-o-animation-delay:18s;-ms-animation-delay:18s;animation-delay:18s;}
.slideshow li:nth-child(5) span{background-image:url('LINK-IMAGEN-5');-webkit-animation-delay:24s;-moz-animation-delay:24s;-o-animation-delay:24s;-ms-animation-delay:24s;animation-delay:24s;}
.slideshow li:nth-child(6) span{background-image:url('LINK-IMAGEN-6');-webkit-animation-delay:30s;-moz-animation-delay:30s;-o-animation-delay:30s;-ms-animation-delay:30s;animation-delay:30s;}
.slideshow li:nth-child(2) div{-webkit-animation-delay:6s;-moz-animation-delay:6s;-o-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s;}
.slideshow li:nth-child(3) div{-webkit-animation-delay:12s;-moz-animation-delay:12s;-o-animation-delay:12s;-ms-animation-delay:12s;animation-delay: 12s;}
.slideshow li:nth-child(4) div{-webkit-animation-delay:18s;-moz-animation-delay:18s;-o-animation-delay:18s;-ms-animation-delay:18s;animation-delay:18s;}
.slideshow li:nth-child(5) div{-webkit-animation-delay:24s;-moz-animation-delay:24s;-o-animation-delay:24s;-ms-animation-delay:24s;animation-delay:24s;}
.slideshow li:nth-child(6) div{-webkit-animation-delay:30s;-moz-animation-delay:30s;-o-animation-delay:30s;-ms-animation-delay:30s;animation-delay:30s;}
Bueno, como verán el .slideshow li:nth-child contiene un selector Jquery (un lenguaje que también se utiliza para el diseño web), donde puse LINK-IMAGEN-(NÚMERO) deben poner los links de las imágenes que previamente debieron subir a un hosting de imágenes (vuelvo a recomendar, ). Los -webkit, -moz y -o son los que le dan el retraso a las imágenes para que cambien.
No modifiquen nada más que los links en este código, de otra manera no les va a funcionar.
PASO Nº4:
Ahora, como último paso, vamos a agregar los tipos de animaciones a las transiciones (cuando pasan las imágenes), de esta forma:
Como verán, hay porcentajes, estos representan el tiempo que dura la imagen en pantalla y como deben ser las entradas y salidas del mismo. Opacity:0;, es transparencia 0, mientras que Opacity:1; es visible 100%. Otra vez les recuerdo que presten total atención al copiado, ya que un mínimo error puede causar que no funcione o funcione mal.
PD: Recuerden que su foto de portada (la que hicimos en el primer tutorial) deben borrarle el fondo y guardarla como archivo de imagen .png para que se vea el Slideshow atrás.
Bueno, les gustó el primer tutorial? Espero que si
En este 2do tutorial, vamos a aprender como crear un formulario de contacto para que los visitantes de tu web puedan contactar con vos de una manera rápida y sensilla. Acá dejo un ejemplo de lo que vamos a hacer:
Primero, vamos a modificar el contenido de <div id="contenido"></div>, para crear dos columnas. Una para el formulario, y otra para los textos e imágenes que habíamos creado previamente. De esta forma:
Bien, ahora vamos a hacer el formulario dentro de <div id="col1"></div>. Les voy a mostrar una imagen del código ya creado y les explicaré que es cada cosa:
<form action="contacto.php" method="post"></form> Es la etiqueta correspondiente al formulario. action="contacto.php" señala el archivo que es el encargado de enviar el e-mail.
method="post" viene a ser la forma en la cual es enviado el mensaje.
<label for="nombre">Nombre:</label> Label significa etiqueta. Es lo que se muestra arriba de cada caja donde escribimos.
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" /> Es el recuadro donde se escribe. type="text" indica al input que lo que debe ir ahí adentro es texto, placeholder="Nombre y Apellido" indica dentro del recuadro que debemos escribir ahí adentro, y required="" hace que sea obligatorio completar el casillero para enviar el mensaje.
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea> es el recuadro donde va el mensaje. <textarea> se utiliza cuando, por lo general, se escribe mucho.
Ahora pasamos a style.css, donde vamos a poner esto:
Bien, la mayoría de los elementos de acá ya los mencionamos, pero todavía hay algunos que no. Por ejemplo este: letter-spacing:1px; No tiene mucha importancia, tan solo es el encargado de la separación de las letras. Y también este: border:1px solid #fff; Crea los bordes a las cajas del formulario (la línea blanca). Acá dice que tiene 1px de ancho, es sólida (pueden probar poniendo "dashed"
y de color blanco.
Luego vamos a crear el archivo contacto.php (el encargado de enviar el mensaje), de esta forma:
Después, vamos a copiar este código, que comprueba que lo que se haya escrito en la casilla E-mail, sea verdaderamente un E-mail:
Si no se dieron cuenta, esto: ('/^[A-Za-z0-9-_.+%]+@[A-Za-z0-9-.]+.[A-Za-z]{2,4}$/', $correo) son los caracteres que permite el cuadrado reemplazando esto: [tu-usuario]@[servidor].[com(.es, etc)]
Ahora vamos a poner la segunda parte, que se encarga del orden de como debe ser este enviado, a que e-mail, asunto, etc.
Y por último, si el mensaje es validado para su envio, con este último código, nos llevará de vuelta a la página principal de nuestra web:
Los textos azul oscuro son comentarios que la web pasa desapercibidos, así que pueden borrarlos o dejarlos (es recomendable).
Ya tenemos nuestro formulario completo (para que funcione debemos guardar todos los .html, y subirlos al host.) También guardar el style.css y el contacto.php y mandarlos al host.
Esto fue el tutorial de hoy, espero que sus páginas ya vallan tomando mucho color y nos vemos en el próximo post! Saludos y Suerteee!
Recuerda seguirme para mas tutoriales sobre páginas web!
Recomienda este post, Gracias!
Recomienda este post, Gracias!
Acá les dejo el link a la actualización de esta web: http://ayudaweb2.site40.net/
Hola, si no viste la parte 1 de este tutorial, podés verlo acá: