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

 

 

2 comentarios en “Dise√Īo web – Introducci√≥n a HTML y CSS”

  1. Hola david, antes de nada gracias, muchisisimas gracias, eres mi luz y todo mi universo y voy a explicarte porque, vale? Espero que tengas tiempo de leerme porque ya no se que hacer con mi existenciaūüėā. Veras, tengo 36 a√Īos recien cumplidos, un hijo de 6, una casa de soltero otra que termino en unos a√Īitos de pagarle al banco, todo esto trabajando muy muy sacrificado, soy de canarias viviendo en madrid, ahora trabajando en una ett, no hay otra cosa mejor para mi con mi formacion academica, soy un oficial de segunda en arba√Īileria y siempre fuy de los muy buenos, eso ya se extingio hace a√Īos con la caida de la construccion, me he resiclado muchisimas veces, me estudie grado medio en cocina y gracias a eso trabaje a√Īos en pasteleria y en cocina, chasco tras chasco, hice grado medio en auxiliar de enfermeria y lo mismo, trabajando en residencias de ansianos y hospitales aprovando un ope nadamas terminar la formacion pero sin plaza por no tener experienci aun, el caso que no quiero dar mil vueltas para contarte la chicha, es que nesecito y deseo con toda mi fuerza y toda la fe que consigo reunir, crear mi web, ( En realidad vender en amazon) con marca propia pero primero mientras fraguo bien mi marca ir creando tsas y estudiando bien mi enfoque a mi marca, tengo ya bosetos del logo, nombre del/ de los dominios pero sin comprar aun,( se que no estan don libres porque cada poco lo compruevo) tengo panico a que alguien con muchos conocimientos, como podrias ser tu mismo se me adelante, porque ahora mi unico activo son mis ideas. De todo eso, empezando de super cero, siempre me gustaron los ordenadores las consalas etc pero a nivel de usuario basico, tengo super cero conocimientos de programar cero de cero y tus videos “la verdad sea dicha”* haces que sea todo tan super facil y sensillo…. pero yoūüėĪ, a la hora de contratar el vps me entra un pavor una angustia, un desasosiego una pena, me siento un inutil, y la verdad en esto lo soy, yo no tengo ninguna prisa en tener la Web, la verdad es que el gusanillo me pico porque quiero crear mi marca y vender en amazon, pero cada vez me encuentro mas precionado por mi mismo porque no se segir todos los pasos PARA tener mi vps seguro o incluso para empezar por donde sea de una vez/ llevo meeeeSes y meses tomando apuntes cogiendo conseptos, ahora me sorprende lo que se, pero en realidad no tengo ni idea en esto de empezar a hacer algo serio y solido en el mundo online, pero ideas y tener muy claro lo qur quiero, Eso si, lo tengo claro y la meta final y a muy largo plazo es mi marca espandiendose por toda europa, con categorias de productos muy variados todos bien organizados por areas, empezaria por la linea home, tocaria nichos como ba√Īo, en 3 tipos de gamas…ūü§óūüôĄyo estoy dispuesto a firmar que te lleves hasta el treinta por ciento de todos mis beneficios (Despues de impuestos) El tiempo que estimes oportuno para que la ayuda que me prestes tenga para ti suficientes veneficios. Para que veas que es sierto que no hay nadien mas verde que yo, ( PERO TAMPOCO MAS DISPUESTO Y DESICIDO)no tengo ni redes,
    (Bueno solo el tipico Facebook de tonteo que no esta enfocado a ser profecional, tambien un gmail, pues lo tipico de usuario comun,) mi intencion es comenzar pero ya no se cual es el principio de los principios, que devo hacer primero, no quiero pasos de ciego, inverti, no mucho en temas de piramidal como Amway,4life, y todo Persiguiendo la famosa livertad financiera que tanto ans√≠o, libro tales como el secreto, y si tengo la suerte de que estas leyendo esto te habras partido de risa, pues no es raro, todos lo hacen cuando les cuento todo lo que me he creido esas chorradas de gurus que me han vendido el dinero facil y yo cayendo una y otra vez en esas trampas, se que lo de vender en amazon las TSAs la WEB ,La Marca personal… si que es real y meresera cada minito dedicado y en sudor de mi esfuerzo, y se que lo mejor es a largo plazo cuando con el trabajo continuo y el aprendizaje proactivo se vallan viendo asomar la cabeza a los frutos sembrados, no como por ejemplo ANUMTIOMATIC, NO SE SI LO CONOCISTES, consegui llegar a muchisima gente creyendo que eso era real y finalmente tuve que dar la cara a mas de 80 personas que eso de anuntiomatic no nos pagaria ni un centimo y pedir disculpas por hacer que perdieran todo su tiempo y esfuerzo, menos mal qui no hubo que invertir nada de dinero porque sino yo ya no estaria aqui me hubiesen linchado. Este es el ejemplo de que yo me propongo algo y soy muy perseverante, consegi muchisimos afiliados pero todo fue una estafa rarisima en la que solo nos robaron tiempo y mogollon de clic en anuncios, haci de iluso soy, pero como eso me daba herramientas faciles me enfoque de lleno. ufff para que fue eso, he salido varias veces muy herido de tanticima dedicacion para no obtener nada de nada, en este caso de vender se que no es inbertir nada en nadien sino en mi futuro y que nadien me va ha vender humo, pues lo tengo super claro como se que para amazon es importante tener web, pues quiero crear web, para eso nesecito hosting, pues vps, tambien nesecito dominio, el caso es que tengo vistos todos tus videos, los de romu, los de todos los ceos resumidos de pu√Īo y letra no me quiero saltar nada, y llego al punto que no se si se coje vesta con WordPress o Ubuntu o queeeee, al final meses de estudio y de horas y horas de videos de todos los youtuvers avidos y por haber y todos avanzan y yo sigo estudiando la manera de empezaaaaar. Soy un burro redomado que solo quiere comenzar poquito a poco, mucho dinero no tengo, pero se que tu con mis 600 euros harias un imperio de webs , ( AYUDAME PORFI) tampoco mucho trabajo, (TE RECOMPENSARE) por eso sobretodo quiero empezar esto con pie firme y hacer algo muy solido, ahora estoy armandome de un micro, iluminacion y no se ni cuantas cosas mas, para empezar un canal en youtuve e ir fraguando como hormiguita recolectora,, porque sin web no poedo avanzar en amazon afiliados , #Se√Īor Dios David Cuesta#, entiendes algo de lo que te digo? Nesesito tu mas sincero consejo, seguiria a pie de la letra todo lo que me digas, es que no quiero meterme a contratar vps con vesta u cualquier otra cosa que sea fenomenal para la realizacion de mi objrtivo… porque no tendria ni pajorera idea por millones de veces que vea los tutoriales que encuentre si no se ni sacarle el minimo partido y potencial, David si te has leido todo esto, dos cosas, te animo mucho a seguir el camino que estas emprendiendo, con o sin tu ayuda directa seguire apoyando tu canar y nutriendome de todo el contenido gratuito que ofreces, ya que para mi es de gran valor y que voy muy en serio con los venevicios compartidos de los que te he hablado, pero no me he cogido ni cursos ni nada porque no se enfocan en lecciones para un nivel tan basico como el mio que hasta me faltan pasos en los paso a paso mas basicos que me encuentro en red, la verdad es que no me importara estar a√Īos hasta conseguir crear de la nada y posicionar una web, sudare cada di para dar con las craves, ya me he armado de libros que he descargado en mega sobre lenguaje html SSD tengo un WordPress.com porque sin hostin ni dominio creo que no puedo tener al fin y de momento el .org, de todas formas ya me es dificil el .com me imajino el mio de mi propiedad sera una locura a diario pero mi clave esta en querer hacerlo y en creer que lo puedo hacer. Un fuerte abrazo hay donde estes. Y mucho animo en tus proyectos, confio plenamente dn que conseguiras ser muy grande, mas aun de lo que ahor eres, por lo menos para mi.ūü§Įūüßź

    • Wow, no te pases que no soy ning√ļn dios. No puedo aceptar tu dinero por ayudarte, y por ahora que a√ļn no estoy sepultado de dudas (aunque casi), haz una cosa. Desc√°rgate en tu movil la aplicaci√≥n Telegram, y cuando la instales y configures (creo que te pide tu n√ļmero de tel√©fono), busca al usuario @Chorricuesta, soy yo, as√≠ podemos hablar m√°s directamente y podemos ver tu caso m√°s en profundidad. Un saludo!

Deja un comentario