¡Qué pasa chavales!
Hoy voy a hablaros de DISEÑO WEB
Vídeos del capítulo 7 – Curso de cómo crear una página web
En este capítulo 7.0 del curso vimos los conceptos básicos para entender el html y el css y cómo funcionan.
En este capítulo 7.1 vimos cómo encontrar y modificar detalles del diseño que sólo pueden ser modificados con CSS.
Capítulo 7.2, por fin nos ponemos con las media queries, pequeños códigos en el CSS para que tu web sea responsive y mobile first.
Recursos del vídeo 7.1:
- 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. ¡Vamos allá!
Esta es la teoría que debes saber para entender el diseño web.
Lenguajes de maquetación: HTML y CSS
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 de la máquina del 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 HTML.
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.
Nos vamos a centrar en los lenguajes de maquetación (al menos en este capítulo del curso, todo llegará, suscríbete).
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. En el final del vídeo y lo veréis jeje.
Cómo cambiar el diseño de algo en una web editando el CSS
En el vídeo 7.1 de este capítulo del curso, (que por cierto, me quedó fatal de calidad técnica…) explico cómo podemos cambiar esas cosillas del diseño de un tema de WordPress que no se pueden cambiar con las opciones que te da el tema.
Para ello hago uso de la inspección de elementos de Google Chrome, que se abre haciendo clic derecho y seleccionando inspeccionar o pulsando ctrl+shift+i.
Con la ayuda de buscar en San Google y toqueteando poco a poco, podrás cambiar lo que desees. No digo más porque en este caso el vídeo es la mejor forma de entenderlo.
Cómo hacer una web responsive con CSS
¡El vídeo más esperado ya está aquí! el capítulo 7.2 del curso, en el que veremos cómo usar las media queries.
Las media queries son unos códigos CSS que se llaman así porque son queries de tipo media, y se escriben así: @media, seguidas de diversos atributos y unas llaves.
Dentro de esas llaves pondremos el código CSS que sólo se ejecutará si se cumplen las condiciones de esa media querie.
Se ve mucho mejor con ejemplos, pero no nos podemos saltar la teoría.
Diseño mobile first
Esto del mobile first significa que debemos diseñar pensando en primer lugar en las pantallas de los smartphone, pues en la actualidad la mayor parte de los usuarios se conectan desde estos dispositivos. Es más, hoy en día Google tiene en cuenta primero la versión móvil de tu web, y en base a su comportamiento ya juzga el resto de tu web. Así que es importante también de cara al SEO.
A efectos prácticos quiere decir que la base del CSS, lo que se cargará siempre por defecto sin necesidad de ninguna condición impuesta por una media querie, deben ser aquellas propiedades que hacen que se vea perfecto en un móvil, además teniendo en cuenta que en una pantalla táctil, los efectos al pasar el ratón por encima no tienen ningún sentido y sólo ralentizarían la carga.
Por lo tanto, hacer una web responsive empieza antes de las media queries, empieza por hacer una versión para móvil sin animaciones que cargue por defecto. A partir de ahí empezaremos con las condiciones para pantallas más grandes.
Las media queries
Esto es una media querie:
@media only all and (max-width: 767px) and (min-width: 481px) { }
Y consta de las siguientes partes:
- @media: abre las condiciones que le vamos a dar que irán una tras otra hasta las llaves.
- only: es para que si el navegador no consigue cargarlo no lo fuerce y se quede colgado, sirve para no generar errores en navegadores antiguos, podríamos obviarlo.
- all: significa para todo tipo de dispositivo, podríamos escoger entre varios tipos (o types) print (area de impresión), screen (pantalla), speech (versión narrada), all significa cualquiera.
- and: es un booleano, se utiliza para añadir más propiedades (o features), que son las que vienen después.
- (max-width: 767px): es una propiedad (feature) que significa que se tiene que cumplir que el ancho máximo del dispositivo será 767 píxeles, para cualquier ancho superior, no se aplica.
- (min-width: 481px): otra propiedad, en este caso se tiene que cumplir que el ancho mínimo sea 481 píxeles, para un ancho menor, no se aplicará lo que esté entre las llaves.
- { }: llaves, todo el CSS que haya dentro sólo se ejecutará si las condiciones anteriores se cumplen.
Para ver todas las características o propiedades (features), mira la documentación de W3 school.
Y estas son las secciones que yo suelo utilizar, aunque las voy cambiando en función del diseño de cada web:
/* smartphone (general)*/
Aquí pongo el CSS que saldrá por defecto, sin usar media queries, sin animaciones.
/* Smartphone (pequeño) */
@media only all and (max-width: 317px) {
Aquí para pantallas más pequeñas de lo normal, puedes no usarlo.
}
/* Tablet */
@media only all and (max-width: 767px) and (min-width: 481px){
El CSS para pantallas que son ya grandecitas, pero no son táctiles, por lo que todavía no hay animaciones.
}
/* Desktop */
@media only all and (min-width: 767px){
Animaciones aquí, aquí ya no te cortes, este usuario tiene un pantallote, y puedes meterle animaciones y lo que quieras.
}
EN PROXIMOS VIDEOS!
En el próximo capítulo de diseño web, veremos cómo utilizar las animaciones, tanto las que son simples cambios de CSS al hacer hover, como usando las keyframes queries, que sirven para indicar a un elemento el diseño que queremos que muestre en un momento determinado, y variándolo crear efectos súper molones.
¿No quieres perdértelo? SUSCRIBETE a mi canal!!!!
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!
Hola, estoy probando esto de los TSA, como algo extra y sobre todo afición, me había dado por vencido porque lo de los frames era un horror y descubrí tu excel y me encanto, todo perfecto, cambie el archivo en el apartado de productos, porque solo se hacia la descripción en h3 y no me gustaba el resultado, así que le añadí una columna mas, para separar título y descripción. No se como enviarte una imagen de como queda, así que en la web «conlogos.top» lo puedes ver.
gracias por tu ayuda.
un saludo
Me alegro que te sirviera tu página está muy bien, sigue así!
Un saludo
Espero que saques una tabla css con elementos para un slider, un llamador de atención y cosas asi para una web normal. Principalmente para no usar elementor jaja ¡ Saludos Tio grande !
Una de las cosas que tengo pendiente es precisamente eso! hacer tablas excel de elementos molones sólo usando html y css, pero no sliders! Está demostrado estadísticamente que perjudican más de lo que ayudan.
Un saludo!
Hola de nuevo David, muchas gracias por todos los vídeos que subes, me está sirviendo de gran ayuda, primero con el tema de la velocidad web (ahora me va de lujo la web), después con el tema de los backlinks que en ello estoy, y seguimos con tus tutoriales. En este caso te escribo porque no he visto ningún vídeo aún, donde hables sobre el PHP. El caso es que mi versión de PHP es la 5.5 la que tengo heredada en mi servidor. Como sabes, WP ya requiere alguna versión superior para poderlo actualizar. Al cambiar de versión PHP la página no funciona y aparece un error 505, tanto si cambio a una versión superior como si cambio a la 5.4 (lo hice para probar). Podrías ayudarme con el tema este? muchas gracias de ante mano, buena noche David! He llegado tarde al grupo de telegram 🙁
Hola David! Enhorabuena por el artículo, y los videos que estás compartiendo. Estoy tratando de establecer mejores formas en cuanto al contenido y la presentacion. Suelo usar builders visuales, pero hay ocasiones ej que hay que bajar a los lenguajes para conseguir el resultado buscado.