javilazaro Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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

Blog diseño web Diseño web madrid ...

Cómo hacer una página web

¿Cómo hacer una página web? Las páginas web, se basan en patrones básicos para iniciar, primero hay que planificar como va estructurada la página, esto a través del lenguaje de etiquetas (HTML5), darle la pinta a la página basada en hojas de estilos (CSS3) como inicio, algo simple. Esto no es solo elementos con tags de HTML5, ni con atributos de las CSS3, pero es lo básico, de esta manera debes op ...

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 ...

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 ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

internet avanzado blog ...

Tutorial Blogger: imagen detrás del menú en Blogger

Uno de los tutoriales más visitados del blog es: Cómo personalizar el menú de páginas de blogger Puedes leerlo aquí: Repasar el Tutorial En ese tutorial vemos como personalizar el código que nos da blogger paso a paso, analizamos cada fragmento y vamos poniendo los colores y tipos de letra a juego con el resto del diseño. Y una de las dudas que me han preguntado tanto en el blog como por email es: ...

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

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 ...

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 ...

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 ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...