Dise√Īo web – Introducci√≥n a HTML y CSS

¡Qué pasa chavales!

Hoy voy a hablaros de DISE√ĎO WEB

Vídeo capítulo 7 del Curso de cómo crear una página web

En este capítulo del curso vimos los conceptos básicos para entender el html y el css y cómo funcionan.

En este cap√≠tulo vimos como encontrar y modificar detalles del dise√Īo que s√≥lo pueden ser modificados con CSS.

Cosas de este vídeo:

  • Funci√≥n para eliminar “funciona con generatepress” (s√≥lo funciona para este tema):
// quitar copyright
add_filter( 'generate_copyright','tu_custom_copyright' ); function tu_custom_copyright() { ?> © 2018 TUDOMINIO <?php }
// fin quitar copyright
  • C√≥digo para hacer clusters con HTML y CSS en la nueva pesta√Īa “Clusters” de la chorritabla: Descargar la chorritabla

Introducci√≥n al dise√Īo web

Cuando queremos hacer una p√°gina web, uno de los principales problemas que todo el mundo se encuentra es el dise√Īo, la apariencia de la web.

Algunos temas y plugins dejan personalizar bastante la web sin apenas conocimientos técnicos, a cambio de una velocidad de carga que podría ser menor.

En los TSA , por ejemplo, no existe una plantilla que venga predise√Īada para t√ļ mismo hacer de forma f√°cil los grids de productos y personalizar tu dise√Īo‚Ķ por eso es que muchos me contact√°is queriendo modificar la apariencia del ChorriTsa.

Pues est√°is de suerte!

Con este cap√≠tulo 7 del curso de wordpress, vamos a ver la introducci√≥n al dise√Īo web. M√°s adelante sacar√© los cap√≠tulos 7.1, 7.2, etc hasta haber explicado este tema en profundidad.

Entonces, vamos all√°.

Esta es la teor√≠a que debes saber para entender el dise√Īo web.

Lenguajes de maquetación

En la creación de páginas web, hay 4 lenguajes esenciales. 2 son de programación, y 2 de maquetación

  • Programaci√≥n:
    • PHP: del lado del servidor, WordPress est√° programado en PHP.
    • Javascript: del lado del cliente, utiliza los recursos ordenador de un visitante de tu web para hacer algo.
  • Maquetaci√≥n:
    • HTML: lenguaje de etiquetado, le dice al navegador qu√© es cada cosa.
    • CSS: lenguaje de maquetado, le dice al navegador qu√© estilo y qu√© propiedades tiene cada etiqueta.

Nosotros nos vamos a centrar en la parte que no necesita tanto esfuerzo, y que te permite hacer que tu p√°gina web sea bonita y responsive, adem√°s de ayudar a la carga r√°pida de la p√°gina.

Que son los lenguajes de maquetación.

HTML y CSS

Ya habíamos hablado algo de las etiquetas html para escritura de textos, podéis ver el vídeo 5 del curso sobre cómo escribir textos seo

E incluso había hablado algo de el CSS en mis primeros vídeos sobre tsa plus.

Pero vamos desde el principio

El lenguaje html es un lenguaje de etiquetado, sirve para darle informaci√≥n al navegador (a Chrome, Mozilla, Internet Explorer‚Ķ) sobre qu√© es cada una de las cosas que t√ļ le env√≠as al usuario.

En una página web cualquiera, si pulsamos F12, si con el clic derecho le damos a inspeccionar elemento o a ver código fuente de la página, nos encontraremos con todo eso que el servidor en el que se aloja nuestra web le está mandando al navegador de nuestros visitantes para que vean nuestra web en sus monitores.

Esta información está estructurada de la siguiente forma:

Head: aquí tenemos información de nuestra web que es necesaria por el navegador para entender lo que tu le muestras, y que no contiene nada gráfico que el usuario final vaya a ver. Por ejemplo las meta title, que le sirven a google para saber qué título tiene esa página en su buscador, o para poner los scripts de Analytics o search console.

Body: Aquí está el resto del contenido, todo lo que sí necesita el navegador para mostrar al usuario.

A su vez hay 3 partes diferenciadas dentro del body, estos son el header, el content y el footer.

Cabe comentar, que a veces para acelerar la carga de la página, se deja en el footer información que en origen debería estar en el header, pero que no interesa que cargue antes que la página, sino al final, para no entorpecer la experiencia del usuario.

Además, desde el inspector de elementos o F12, a la derecha o debajo de la pantalla, veremos el código CSS que se aplica a esos elementos HTML.

Y ya casi estamos en la chicha!

El CSS es lo que hace que una etiqueta HTML se muestre de una forma u otra al usuario final.

Es decir, que el c√≥digo css de una etiqueta en concreto como puede ser la etiqueta <p> de p√°rrafo, le dice al navegador c√≥mo mostrar el contenido de esa etiqueta. El tama√Īo de la fuente, si est√° m√°s o menos negrita, la altura de la l√≠nea, la fuente en s√≠, el color‚Ķ

LA CHICHA

Adem√°s de las etiquetas de texto que vimos en el cap√≠tulo n√ļmero 5 del curso, para disponer, organizar dise√Īar la parte visual de una web, tenemos otras etiquetas, las m√°s comunes por supuesto son <div> e <img> aunque hay muchas otras, desde tablas hasta botones pasando por iframe, audio, video, etc. Os dejo un enlace a las etiquetas todas.

Vamos a construir de cero nuestra grid de categorías de un TSA. Por poner un ejemplo.

Id al final del vídeo y lo veréis jeje.

EN PROXIMOS VIDEOS!

En el pr√≥ximo cap√≠tulo de dise√Īo web, veremos c√≥mo utilizar las media queries, para hacer webs responsive que se adapten a los dispositivos, tanto pantallas como m√≥viles, de los usuarios.

SUSCRIBETE a mi canal!!!!

 

 

Deja un comentario