comunidades

Programar una página web con HTML5 y CSS

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas.

Cómo programar una web en html5 y css

Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva.

Crear un dinamismo con CSS

Pues sí querido lector (como diría el gran Dean), así es, podemos hacer cosas con el CSS3 que nos ayuda a crear esa pequeña sensación de dinamismo en la hace ver que la pagina no es un simple texto, dos fotos y unos colores, si no que puedas verla que tú “interactúas” o intervienen en ella.

Es cierto que no vas a poder hacer milagros, pero también es cierto que con la parte básica que vamos a ver tampoco te puedes quejar y no estaría mal que en los comentarios contaras como si es el DIOS de las PÁGINAS WEB básicas.

Esta idea la cogí de uno de los grandes que me ayudó mucho cuando iba a la uni y ahora para recordar muchas cosas que por la falta de uso se me olvida, y es por eso que también tengo que decir, me ayuda estos post, por que quiero que aprendáis y yo poder recordar y aprender algunas cosas.

Empezamos con la parte de HTML5

Como sabéis debemos crear el texto de nuestra web y esto es sencillo solo necesitamos nuestro HTML y un enlace e nuestra carpeta style.css y ya tenemos hecho nuestra parte de texto con las imágenes de la web.

<!DOCTYPE html> <html lang="es" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="windows-1252" /> <meta name="description" content="Web de prueba para imágenes con efectos" /> <meta name="keywords" content="HTML5, CSS3 JavaScript" /> <title>EL ejercicio de Javi Lázaro para HTML5 y CSS3</title> <link href="style1.css" rel="stylesheet" /> </head> <body> <header> <h1> JaviLázaro. Los ejercicios con Mis imagenes</h1> <br /> <h2>Estas son las únicas que no tenían derechos de autor</h2> </header> <section> <figure> <img src="C:\Users\Megaport\prueba1\imagen\bombilla-consumo-materialled.jpg" alt="Bombilla de bajo consumo de Materialled" width="150" height="150" /> <figcaption> Foto 1: Bombillas Materialled </figcaption> </figure> <figure> <img src="C:\Users\Megaport\prueba1\imagen\bombilla-negra-materialled.jpg" alt="Bombilla de luz negra de Materialled" width="150" height="150" /> <figcaption> Foto 2: Bombilla Materialled </figcaption> </figure> <figure> <img src="C:\Users\Megaport\prueba1\imagen\calles-materialled.jpg" alt="Calles iluminadas de Materialled" width="150" height="150" /> <figcaption> Foto 3: calles Materialled </figcaption> </figure> <figure> <img src="C:\Users\Megaport\prueba1\imagen\homer.jpg" alt="Homer Simpson Mr. X" width="150" height="150" /> <figcaption> Foto 4: yo mismo </figcaption> </figure> </section> <footer> <p><small>Copyright de www.javilazaro.es y bueno al final lo copiarás si quieres asi que porfa un <a href="https://www.javilazaro.es"> enlace a mi página</a> </small></p> </footer> </body> </html>

Creo que de aquí ya no tenemos mucho que explicar por qué lo tenéis en la parte de programar con HTML y CSS.

Lo nuevo del CSS3

Aquí sí que hemos añadido un par de cosas pero que son muy buenas para poder con menos programación hacer cosas “chachis piruli”.

Antes de CSS3 todo esto había que hacerlo con JavaScript y la verdad que es más “complicado” y a su vez hacer que tengas más programación en tu web haciendo esta “más lenta” y dependiendo de ás lenguajes.

ï¿html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } q:before, q:after { content: ; } fin del reseteo de la hoja de estilos body { font-size:62.5%; } h1 { font: normal 2.4em Verdana, Geneva, sans-serif; background:-webkit-linear-gradient(top, blue, aqua); width:35%; border-radius:10px; margin:15px, auto; text-align:center; padding:15px; color:#666; box-shadow: blue 5px 5px 10px; text-shadow:#FFF 2px 2px 5px; } h2 { font: bold 1.8em Verdana, Geneva, sans-serif; margin:5px; padding:5px, 10px, 5px, 8px; color:#000; } section{ width:92%; border-top:1px dashed #999; margin:auto; } figure{ float:left; margin:auto; } figure img { border-radius: 15px; padding: 4px; background: #666; -webkit-transition: -webkit-transform 0.5s ease-in-out 0.1s; margin: 10px; } figure img:hover { -webkit-transform: scale(1.2) } figcaption { font-family: Verdana, Geneva, sans-serif; font-size:1.5; text-align:center; margin:10px; } footer{ clear:both; padding-top:110px; } footer:past{ font:1.6em Georgia, "Times News Roman" Times, Serif; color:#666; margin:10px 8px; }

Vamos a comenzar ahora como diría Jack el destripador trozo por trozo para que lo entendamos mejor.

ï¿html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } td, th, caption { font-weight: normal; text-align: left; } img, fieldset { border: 0; } ol { padding-left: 1.4em; list-style: decimal; } ul { padding-left: 1.4em; list-style: square; } q:before, q:after { content: ; } fin del reseteo de la hoja de estilos

Este mamotreto es solo copiar y pegar, y es única y exclusivamente para poner a cero las diferentes partes, vamos un reseteo como pone en nuestro programa y se utiliza por que tú quizás y esperemos hayas programado mucho y estos datos se han podido quedar guardados, ya bien sea por que lo susas mucho o por que tu editor de codigo lo guarda, pues de esta manera lo pone en modo de fábrica.

Antes de CSS3 todo esto había que hacerlo con JavaScript y la verdad que es más “complicado” y a su vez hacer que tengas más programación en tu web haciendo esta “más lenta” y dependiendo de ás lenguajes

Mia como siemprebody { font-size:62.5%; }

La parte del Body, es toda modificación que vamos a hacer al body a través de nuestra página de CSS, no me voy a enrollar mucho por que se supone que esto lo habéis visto en mi anterior post, REPITO.

h1 { font: normal 2.4em Verdana, Geneva, sans-serif; background:-webkit-linear-gradient(top, blue, aqua); width:35%; border-radius:10px; margin:15px, auto; text-align:center; padding:15px; color:#666; box-shadow: blue 5px 5px 10px; text-shadow:#FFF 2px 2px 5px;

H1 muy importante en nuestros post y páginas web, podemos ver como le hemos metido unos fondos y como le hemos hecho que el color sea gradiente, (para los que no sabéis es que pase de manera escalada de un color, en este caso, a otro).

Podemos también ver que con la opción border-radius redondeamos las esquinas del recuadro que rodea nuestro título, cuantos más píxeles, mayor será el circulo que crean.

Y text-shadow no hace falta ser un filólogo en lengua inglesa que más que menos sabemos que es la sombra de las letras al igual que box.shadow es la sombra de la caja.

figure{ float:left; margin:auto; } figure img { border-radius: 15px; padding: 4px; background: #666; -webkit-transition: -webkit-transform 0.5s ease-in-out 0.1s; margin: 10px; } figure img:hover { -webkit-transform: scale(1.2) } figcaption { font-family: Verdana, Geneva, sans-serif; font-size:1.5; text-align:center; margin:10px; }

Bien aquí es donde está el meollo de la cuestión, las imágenes, si donde vemos como suben y bajan cuando pasas el ratón.

Empezamos con figure, ¿qué es figure y para qué sirve en CSS3?.

figure:

Nos indica que en ese “cajón” habrá una foto o ilustración.

webkit-transition:

Esta parte es la que indicamos primero con el webkit que solo se verá en Google Chrome, y me dirás ¿y por qué? y yo respondo, porque es mi programa y se ve donde quiera.

También puedes hacerlo para mozilla, excel, Opera… o todos juntos, pero yo no me quería estar a tanto por que no hay necesidad, eso sí, si el dia de mañana eres programador de webs o desarrollador de webs si hay necesidad.

-webkit-transform 0.5s ease-in-out 0.1s;

Pues como decía antes el webkit para Chrome y luego dice que en 0,5 hace el efecto de acercarse y luego tarda 0,1 para alejarse.

Tenemos más efectos los cuales como consejo te digo que es tontería aprenderlos de memoria el código, lo mejor es o tenerlos apuntado o buscarlo por internet por que ese trozo de disco duro de tu cabeza lo necesitarás para fechas de cumpleaños, aniversarios, sobre todo aniversarios, que lo voy a marcar que no se olvide y temas mas importantes

figure img:hover

Aqui con hover le a Chrome que solo tiene el efecto cuando pasa el ratón sobre la imagen, nada mas que eso.

-webkit-transform: scale(1.2)

Es el trabajo que va a realizar y es una ampliación de la imagen.

Imagen del símbolo de CSS3 que utilizamos para crear un zoom
CSS3


Conclusión

Como podemos ver con unas líneas somos capaces de hacer unas funciones dinámicas en nuestra páginas sin necesidad de muchas complicación

Si quieres crear tu página con tu toque personal debe empezar con estos métodos de CSS y HTML que con los avances que tienen van dando esa posibilidad de hacer más con menos lenguajes.

Es por esto lector y futuro desarrollador o ya desarrollador que cada vez necesitaremos “menos lenguajes” para hacer los mismo trabajos.

Si tienes alguna idea de página que podamos hacer o en la que necesites ayuda no dudes en escribir y decir que te parece.

¿Y tú qué efectos das a tus imágenes con CSS3?

Venga escribe tus efectos y cómo lo haces y si está bien hacemos una réplica a lo que tengas o ponemos un enlace a tu página.



Fuente: este post proviene de javilazaro, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Curso de SEMrush y BackLinks

Seguimos con nuestro curso de SEMrush y vamos con el tercer bloque que creo que también tiene su chicha además es muy importante de tener en cuenta además que hay muchos trucos que veremos como podemo ...

Investigación de la competencia en SEMrush

Volvemos a nuestro curso de SEMrush y esta vez si hay video y empezamos dando caña como al primer módulo de la parte SEO, muy importante en el que quiero dejarlo lo más claro posible y explicando algú ...

Curso gratis de SEMrush [ 2019 ]

Parece que llevo tiempo sin escribir por aquí y debéis perdonarme pero estoy hasta arriba para prepararos aún más contenido y sobre todo más PRO, por eso vengo hoy con un curso gratis de SEMrush y lo ...

Enlazado interno y errores que se cometen

¿Hey, que tal lector? (siempre quise empezar así) soy Javi Lázaro vuestro seo de Guadalajara aunque otros me llaman Pichu ;p. Vengo a hablaros sobre el enlace interno en el que ya se habló aquí hace u ...

Recomendamos

Relacionado

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

guías y tutoriales informática blog ...

Tutorial para tunear Linkwithin

Muy buenas tardes mundo. Como veis, sigo con la dinámica de publicar tarde, qué le voy a hacer, con esto de la primavera ando un poco ploff, así que, creo que todas las entradas van a salir a esta hora. Hoy, vengo con un tutorial, sí, me he animado y que espero que os funcione a las mil maravillas, de momento, a mi me va bien. No es que sea yo una apasionada de Linkwithin, pero, cuando no hay otra ...

informática android

Whatsapp Web versión online disponible para PC y Mac

Desde mucho tiempo atrás se rumoreaba la disponibilidad de Whatsapp via online para aquellos que querían acceder desde el navegador web de sus equipos de escritorio, notebook o Mac. Esta semana (la tercera de enero) se lanzó oficialmente la versión web de Whatsapp la cual puede ser activada en dispositivos móviles Android, Blackberry (también BB10), Windows Phone y Nokia s60. Si quieres entrar y p ...

internet

Cómo hacer que tu site sea compatible en todos los ordenadores.

A veces ocurre que debido a la configuración de nuestra plantilla en Blogger, nuestro blog o sitio web se puede ver en algunos navegadores y en otros no. Sucedió hace algunas semanas que uno de nuestros sitios web, se podía ver en todos los navegadores excepto en Firefox. Al intentar cargar la página en dicho navegador, cargaba y luego la página se quedaba en blanco. Buscando información pudimos ...

Blogging PLANTILLAS BLOGGER DIY ...

Como poner la biografía de bloggers invitados

¿Eres de los que tienes bloggers invitados que de vez en cuando postean en tu blog? Si estas asintiendo con la cabeza entonces sabrás la importancia que tiene para ese blogger sentirse como en casa, hay que hacerle sentir que es importante para ti y para tu publico, que no le quieres perder y que a su vez el se sienta cómodo, único e irreemplazable, pues el aparte de darte un post, ha hecho un tra ...

Cómo personalizar el contador de visitas blogger

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...

Sitios Web

¿Cuánto Cuesta una Página Web? Precios y Recomendaciones

¿Cuánto cuesta hacer una página web? Esta pregunta me la han realizado muchas veces y la responderé lo más sencillo posible. Seguramente deseas crear tu página web, pero no sabes cuánto debes pagar por ella, pero con base en mi experiencia te puedo decir que te estás haciendo la pregunta equivocada. Definir el precio de una página web no es la primera pregunta, antes debes definir qué tipo de siti ...

BLOGGER jimdo marketing digital ...

Cómo afecta al email marketing y al blog el RGPD?

El email marketing está afectado al igual que tu blog por el RGPD, es decir el reglamento general de protección de datos, que durante el 2018 entró en vigor en la Unión Europea. RGPD para cumplimiento legal de tu blog y el email marketing El RGPD está provocando que los datos de los usuarios sean protegidos dentro de la navegación como en formularios para suscripción, descarga u otras acciones en ...