Curso de HTML y CSS

Anatomía de una etiqueta

Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una «disección» de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.

Este es un texto de ejemplo en el que solamente <div id=»destacado» class=»botón destacado»>esta parte está encerrada en una etiqueta</div> y el resto no.

La etiqueta tiene:

Un nombre (en este caso div).
Los nombres de etiquetas pueden separarse en 2 grandes grupos: los que tienen una clara apariencia predefinida (diferente a «la nada») y los que solo sirven para informar al navegador de qué parte de nuestra web estamos codificando.
En el primer grupo se encuentran (entre otras) todas las etiquetas destinadas a pre-formatear texto, como a, p, h1, h2, h3
En el segundo grupo podríamos incluir un montón de etiquetas html5 destinadas solo a informar al navegador de que el contenido al que estamos dando formato es parte del header, footer, nav, etc. Su uso no es «obligatorio» (podríamos codificar toda una página sin ellas, pero posicionaría peor, dado que que ayudan a los indexadores a entender mejor nuestra página)
De hecho (y aunque no es una práctica recomendada porque los Explorer antiguos no representan visualmente las etiquetas desconocidas) podríamos codificar nuestra página utilizando etiquetas inventadas y cualquier navegador moderno representaría su apariencia correctamente.

Una apertura
Que consiste en el nombre de la etiqueta encerrado entre mayor y menor: <div> y que puede tener distintos atributos que se representan como: <div nombreDelAtributo=”valorDelAtributo”>.

Hay unos cuantos atributos predefinidos.
Los dos más importantes son ID y CLASS

ID
Por convención ID es único, por tanto, no habrá en una web bien codificada dos etiquetas con el mismo ID, ni habrá una etiqueta con más de un id, puesto que no tendría ningún sentido.
Para dar formato a una etiqueta con el id nombreDeID (Por ej: <div id=”nombreDeID”>Texto del título</div>) escribiremos una «regla» en nuestra hoja de estilos que «apunte» a dicha etiqueta utilizando el símbolo numeral, seguido del ID, por ej: #nombreDeID{ }

CLASS
La clase es un atributo genérico, es normal codificar varias etiquetas con la misma clase, e incluso aplicarle más de una clase a una misma etiqueta (separandolas con espacios)
Por ejemplo, podemos destacar todos los textos de una sección con la clase «destacado».

Un texto

otro texto

Para dar formato a una etiqueta con la clase «destacado» escribiremos una «regla» en nuestra hoja de estilos que apunte a dicha etiqueta utilizando el punto, seguido de la clase, por ej: .destacado{ }

Otros atributos
Algunas etiquetas con un nombre específico, tienen atributos predefinidos que extienden su funcionalidad, por ejemplo: la etiqueta a (que se utiliza para señalizar enlaces) tiene el atributo href que indica a donde enlaza esa etiqueta y el atributo target, que indica en qué ventana va a abrirse el enlace señalado.
Otro atributo conocido es el atributo src de la etiqueta img (que marca la ruta que utilizará el navegador para insertar la imagen).

Un cierre
El cierre marca el final de la zona etiquetada. Está compuesto por una barra que precede el nombre de la etiqueta a cerrar y no tiene identificadores, ni clases ni atributos (muy pocas etiquetas pueden expresarse cerrándose y abriendo a la vez, o dejándose sin cerrar y son las que no pueden contener nada dentro, por ejemplo o e input).

Crear la estructura HTML
http://www.idepbarcelona.com/info/estructura-html/

Etiquetas y atributos de vinculación de ficheros (imágenes, js, css y tipografías)
En un ejemplo previo hemos visto que la vinculación de imágenes se hace utilizando una etiqueta concreta (img) a través de su atributo src

La vinculación de SVG es muy similar pero el atributo es diferente (poneos de acuerdo!)

Utilizando el mismo atributo (src), pero para una etiqueta diferente podemos vincular ficheros Javascript a la página HTML

En cuanto a las hojas de estilo, no están incrustadas sino vinculadas, y aunque el concepto es similar, el atributo es el mismo que se utiliza para los enlaces

La tipografía en particular se vincula, conceptualmente, de un modo totalmente diferente. Si bien se asigna como una propiedad más desde cualquier regla CSS, disponer de la tipografía seleccionada para poder utilizarla en nuestra página implica vincularla.

Cuando añadimos tipografía a traves de Google Fonts (o a traves de cualquiera de los otros proveedores de fuentes, incluyendo el haberla generado nosotros mismos con Fontsquirrel, Fontello o similar) lo que hacemos es vincular una hoja de estilos extra a nuestro html, y es esta hoja de estilos la encargada de vincular las tipos que necesitamos.
Todas las vinculaciones (ya sea a fuentes o a imágenes que utilicemos como fondo) que hagamos desde la hoja de estilos tienen una peculiaridad, y es que se hacen en función de la ubicacion del fichero css.
Cuando la página html y el css estan en una misma carpeta este efecto no se aprecia, pero si por ejemplo, los css de nuestra página están en la carpeta «css» y las fuentes de nuestra página están dentro de una carpeta llamada «font» que a su vez está al lado de la carpeta css, la vinculación que hagamos deberá tener en cuenta el orden de los ficheros, y en este caso «salir» de la carpeta css, y entrar en la carpeta font. Por ejemplo: ../font/

@font-face {
font-family: ‘../font/jellyka_western_princessRg’;
src: url(‘../font/jellyka_western_princess-webfont.eot’);
src: url(‘../font/jellyka_western_princess-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../font/jellyka_western_princess-webfont.woff2’) format(‘woff2’),
url(‘../font/jellyka_western_princess-webfont.woff’) format(‘woff’),
url(‘../font/jellyka_western_princess-webfont.ttf’) format(‘truetype’),
url(‘../font/jellyka_western_princess-webfont.svg#jellyka_western_princessRg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Modificar la apariencia de una etiqueta
Modificar la apariencia visual de una etiqueta en particular encierra dos retos: Saber «apuntar» a la etiqueta que queremos modificar y conocer las propiedades debemos utilizar para conseguir la estética que queremos lograr.

Mas allá de un puñado de propiedades básicas que hemos visto (color, background-color, margin, padding, float, border) en los que la unica dificultad residia , si acaso, en usar valores porcentuales (o cálculos) para hacer paginas «flexibles», hay una larga lista de propiedades que podemos utilizar para modificar la apariencia visual de una etiqueta. Para ver unas cuantas más:
http://www.mclibre.org/consultar/htmlcss/css/css_propiedades.html
http://www.virtualnauta.com/css-ejemplos
Además hay una gran cantidad de herramientas visuales útiles para generar propiedades CSS, por ejemplo:
http://css3gen.com/
Con el inspector de elementos es relativamente sencillo deducir e investigar cuáles son las propiedades que debemos aplicar a un elemento para que este se visualice como nosotros pretendemos:
http://www.idepbarcelona.com/info/inspector-de-elementos

Si acaso, la propiedad mas difícil de comprender es la de flotación (pero indispensable para hacer paginas responsivas), porque es la que hace que unos elementos se apoyen contra otros, posicionándose (si caben, y si no hay una orden como clear:both que lo impida) unos al lado de los otros en el orden que la flotación lo indique.

Por lo tanto, sabemos que podemos apuntar a una etiqueta utilizando:
El nombre de la etiqueta
El id de la etiqueta si lo tuviese
La clase de la etiqueta si la tuviese
La ruta de la etiqueta, es decir una suma de todo lo anterior, por ejemplo nav a { /*solo dará formato a los enlaces q están dentro de nav*/

Esto enlaza a la wikipedia

Estilos en cascada, agrupados, herencia, orden e important (new concept!)
Mas allá de «cómo apuntar» a una etiqueta conviene recordar algunas reglas propias del html y el css.
En mi primera instrucción defino que tanto los H1, como los p se verán en 12px y en verde.
Las órdenes aplicadas desde distintas reglas a una misma etiqueta, se suman o se sobreescriben dependiendo del orden en que hayan sido escritas estas reglas.
h1, p{
font-size=»12px»;
color=»green»;
}
p{
color=»red»;
}
Dará como resultado que los párrafos de nuestra web se verán a 12 pixeles y en rojo, sólo porque la orden «rojo» fue dada después. Esto, que es bastante sencillo de entender, se complica cuando la instrucción que está escrita antes posee una ruta mas específica (por ejemplo #idQueContieneMisP p { } es una orden mas «importante» aunque esté escrita antes que la que define a los textos en rojo sólo porque la ruta es más específica).

Para controlar esto sólo hay 2 trucos: el orden (el orden es el bueno) y la etiqueta «important» (important es el diablo, pero cuando lleguen a wordpress lo van a necesitar).
p{
color=»green !important»;
}
Important hace que esta orden sea prioritaria sin importar en qué orden está definida. Esto es peligroso porque las órdenes que escribamos después no la sobreescribirán, y si nuestra hoja css tiene muchos important podemos tener problemas al no seguir una lógica clara.

Estados
Además de los métodos tradicionales de apuntar a una etiqueta, tenemos selectores especiales que permiten seleccionar un estado, un número de nodo, o un nodo con unos valores de atributos específicos.
El primer selector de estado que vimos es también el mas antiguo, y es el que permite seleccionar un elemento, cuando estamos encima.
a:hover{
}
input:focus{
}

El auténtico reto esta en apuntar a una etiqueta cuando esta no tiene una clase o un identificador que podamos utilizar.

Selectores avanzados
Preparándonos para WordPress hicimos especial hincapié en los casos en los que intentaríamos apuntar a una etiqueta que no pueda ser identificada.
http://librosweb.es/css/capitulo_2/selectores_avanzados.html

Media Querys
Una vez hemos controlado cómo dar apariencia a nuestras etiquetas, sólo nos queda ajustar la visualización de nuestra página responsiva utilizando MediaQuerys. (lo que en la práctica es como tener estilos diferentes).
http://www.idepbarcelona.com/info/mediaquery/
http://www.idepbarcelona.com/info/emular-una-web-en-varios-dispositivos/


Víctor Maciel – Tel: +34 686378371 – www.bancodepruebas,de

Proyectos destacados

runhabitat.es

Una web sencilla, que vende paquetes de suscripción a diferentes rutinas deportivas.

De diseño muy cuidado y óptimo rendimiento para que cada paquete se convierta en la landing de su propia campaña.

https://www.runhabitat.es/

Baricentro

Se que esta mal que lo digamos nosotros, pero: ¡nos encanta esta web!

Responsiva, autogestionable y con una versión optimizada para la navegación en teléfonos móviles.

http://www.baricentro.es/

Legalgap

100% de libertad creativa (como en las viejas épocas de Flash) y un «producto» que mola como es una banda de música. ¡Más no se puede pedir!

Por desgracia la banda se disolvió, pero guardamos una copia de la web para la posteridad.

https://www.legalgab.net/old

lafranquicia.es

Se rehizo enteramente manteniendo un diseño anterior, pero optimizando radicalmente su funcionamiento. Para hacerlo se pasó de una web hecha con con editor visual y unos 45 plugins a una nueva que depende solo de 3

https://www.lafranquicia.es/

Rampas.es

Conjunto de 4 webs (1 landing y 3 webs) responsive, con catálogo y tienda online.

Imagen corporativa y rediseño para unificar el conjunto.

http://www.rampas.es/

vi3informatica.es

Una web odiosamente grande, hecha en WordPress con un editor visual de esos de «drag and drop», que son muy fáciles, pero que cuando la desactivas «no queda nada». La optimicé en rendimiento y posicionamiento, «rescatando» el contenido para no tener que volver a hacer el data entry.

http://www.vi3informatica.es/

t4franquicias.com

Una web que depende de la franquicia.es (es un secreto) pero que tiene mucho menos presupuesto. Se optimizó para pasar el pagespeed en verde, pero luego algún capullo se ha dedicado a añadirle plugins

https://www.t4franquicias.com

Com&geinsa

Esta tan fresca tan fresca, que aun no ha salido de «banco de pruebas».
Si veis algo raro… es que la pintura no se ha secado del todo 😛

/comgeinsa/

dglobalpack.com

Preferimos no hacer web baratas sobre temas prefabricados… pero a veces toca y nunca está de más un ejemplo de lo que puede resolverse con un presupuesto MUY ajustado.

http://www.dglobalpack.com/

bgestionglobal.com

Visualmente muy sencilla, esconde complejas funciones -programadas en jQuery- para el calculo de prestamos e hipotecas.

http://www.bgestionglobal.com/

cellerscarol.com

Lo más complejo de esta web es haber modificado el carrito de la compra, para que -por cuestiones de logística- solo permita comprar un minimo de ser botellas (que se pueden escoger individualmente)

https://cellerscarol.com/

Centro canalejas

Muchas veces hacemos landings, pero suelen ser proyectos difíciles de vincular, porque por lo general tienen una duración efímera. Esta nos gustó y la subimos a bancodepruebas.

/centrocanalejas/

chichalimona.com

Un proyecto con anécdota. Produje la web para una pequeño estudio… y cuando el cliente final cambió de proveedor, fue a parar White Rabbit, que también trabaja conmigo frecuentemente!

http://www.chichalimona.com/

accordassist.es

A veces lo mejor que se puede decir de un proyecto, por complicado que sea (y este lo es, porque se trata de un diseño a medida sobre un Woocommerce utilizado como catálogo) es: «el cliente lo quería justo así..»

https://www.accordassist.es/productos/

consultordefranquicias.net

Una web optimizada para el posicionamiento y la valoración positiva de la herramienta Google Page Speed

http://www.consultordefranquicias.net/

ironglobal.es

Un cliente muy grande… que quería algo llamativo y diferente. Diseñado y producido desde cero para ser visto desde el móvil como objetivo principal.

http://www.ironglobal.es/

asho.net

Una web sencilla y muy enconómica, resuelta en un pim-pan con WordPress

http://asho.net/

whiterabbit.es

Lo mejor que puedo decir de este proyecto es: ellos lo querían justo así. Si todos los proyectos que llegan a mis manos me gustaran… no me pagarían por hacerlos

https://whiterabbit.es/

Equilibriumdfs.com

Web minimalista pero compleja de realizar, producida para el gran Quique López

http://equilibriumdfs.com/

Cinesa

Campaña de 7 emails responsivos producidos para Cinesa a través de igriega

/portfolio/cinesa/

platinumhayat.com

Se diseño partiendo de un tema complejo (el accesspress parallax) al que se le añadieron un montón de funcionalidades nuevas.

http://www.platinumhayat.com/

Nafarco.com

Proyecto desarrollado en Drupal. Rediseño, e implementación con comportamiento responsivo.

http://www.nafarco.com/

Sidelcotrading.com

Odio esta web! No quedó mal, pero dio muchisimo trabajo.
Es un catálogo online súper extenso, con muchos tipos de visualizaciones distintas según los productos.

http://www.sidelcotrading.com/

Concursos Caja Rural

Adaptación de un WordPress para que funcione como concurso de fotografía.

http://www.concursoscajarural.com/

kareyanimalflooring.com

Landing de acabado muy cuidado, diseñada por quiquelopez.net
Es responsiva y utiliza efectos de paralax

http://www.kareyanimalflooring.com

Duranhaeussler.com

Web de estética muy cuidada, diseñada por Salvador Huertas

Responsiva, con efectos de Paralax, autogestionable con WordPress

http://www.duranhaeussler.com/

Moto por moto

Mi blog particular de motos

http://www.motopormoto.com/

Reconocimientosmedicosnavarra.com

A riesgo de que un día el cliente entre aquí y lo lea, yo voy a decirlo fuerte y claro:
Un diseño «noventoso», que tuvimos la responsabilidad de maquetar y producir sin cambiar una coma, para que fuese auto-administrable utilizado WordPress

http://www.reconocimientosmedicosnavarra.com/

Williams

Un minisite para Williams diseñado por uno de los mejores: El gran Borja Lizcano (¿te acuerdas del iJam?… pues ese)

/portfolio/williams/aciegas.html

Danonea

Un truño echo para DANONE (lo pongo así… en grande, porque lo importante aquí es el cliente… y no la mierda de minisite que encargó)

/portfolio/danone/index.html

Chrysler New Voyager

Este es el primer trabajo que hice en España para una agencia grande (CP Interactive).
Esta aquí por nostalgia (aunque tampoco está tan mal… pronto pasará a ser «vintage»). No le busquéis otra explicación….

/portfolio/new-voyager/index.html

Customizador de carcazas

Una de las pocas paridas en flash, que todavía se puede usar (pero yo no me fiaría mucho de que la carcasa de iPhone 2G me vaya a llegar, porque esta gente hace tiempo que no actualiza sus modelos)

http://www.musicaskins.com/home/index.php?main_page=index&cPath=15

Banners

Me encantaba hacer banner’s! Lastima que ya no se hagan tantos….
Exprimir la creatividad (y los conocimientos técnicos) para hacer pequeñas piezas de arte en tamaño súper reducido y de solo 40k de peso, es una tarea que solo los mas Freaks del diseño web sabemos apreciar!

/portfolio/banners/index.html

Woocommerce, Prestashop o Magento, que plataforma usar?

Una tienda online puede resolverse de unas 100 (o unas 1000) maneras diferentes.

Voy a dividir las opciones principales en 3 grupos:

La mas simple, pero no necesariamente la mas barata es utilizar una de las tiendas online pre-instaladas:

Por ejemplo: wix o 1and1

Pros:

  • La puedes tener montada mañana, con una inversión inicial cercana a cero.

Contras:

  • Aunque prometan ser gratuitas no lo son. Son gratis un tiempo… o cobran comisión, pero «pre-hecho» y gratis 100% no hay nada.
  • No son escalables ni te ponen fácil la migración a otro sistema porque el negocio de ellos es «retenerte». Difícilmente podrás empezar usando esto «y si va bien» ya harás una tienda «mas adelante»… porque mas adelante no podrás ni aprovechar el posicionamiento que tu tienda haya conseguido.
  • Cualquier desarrollo a «a medida» esta descartado, porque lo que te dan es lo que hay… «y punto».
  • Los métodos de cobro son los que ellos aceptan (todos cobran comisión) y no hay mas.
[...]

[...]restashop-o-magento-que-plataforma-usar/

Personalizar las pestañas de la página de producto de Woocommerce

Muchas veces no necesitamos todas las opciones que nos ofrece Woocommerce en el backend de nuestra página de producto, y puede ser que además necesitemos otras que no están. Editando el archivo functions.php de nuestro tema podemos conseguirlo. En este post aprenderemos a:

– Crear custom fields para cualquier pestaña
– Crear pestañas personalizadas (custom tabs)
– Esconder las pestañas que no nos interesan.

Empecemos pues!

Añadir un custom field

1. Creamos la función que generará nuestros custom fields:

[...]

[...]de-la-pagina-de-producto-de-woocommerce/

Generadores de CSS

Aquí dejo una pequeña recopilación de generadores de CSS, para tenerlos más a mano en el uso diario.

CSS3 Generator (border radius, sombra de caja, sombra de texto, rgba, font face, columnas múltiples, box resize, box sizing, outline, transición, transformación, flexbox, degradado): http://css3generator.com/

Escala de grises: http://labs.voronianski.com/css3-grayscale/

Degradados: http://www.colorzilla.com/gradient-editor/

Border Radius: http://border-radius.com/

Formas:
https://coveloping.com/tools/css-shapes-generator
http://www.samuelrossille.com/css-shape/#1142AAy21z-17z-17z11z0

[...]

/generadores-de-css/

Problemas con Internet Explorer

Muchas veces tenemos problemas para visualizar correctamente nuestra página web en Explorer, o en sus versiones antiguas. Aquí tenemos unos cuantos recursos que nos ayudarán a corregir los problemas de visualización que hayamos detectado:

Si no lee etiquetas HTML5:

 <!-- [if lt IE 9]> <script type="text/javascript"> document.createElement("nav"); document.createElement("header"); document.createElement("main"); document.createElement("footer"); document.createElement("section"); document.createElement("article"); document.createElement("aside"); </script> <![endif]--> 
[...]

[...]de-compatibilidad-con-internet-explorer/

Hacer un multisite

Después de pelearnos mucho con plugins de traducción (qtranslate, ztranslate…) hemos llegado a la conclusión que si queremos tener nuestra web en varios idiomas, la mejor opción es hacer un multisite. Esto nos permitirá tener un WordPress paralelo independiente para cada idioma. Para hacerlo:

1. Desactivar todos los plugins

2. Abrir wp-config.php y añadir

define( 'WP_ALLOW_MULTISITE', true );

justo antes de /* That's all, stop editing! Happy blogging. */.

3. Ir a Herramientas > Configuración de red y crear la red.

[...]

/hacer-un-multisite/

CSS para Internet Explorer

Muchas veces nuestra página web se ve perfecta hasta que PAM! la abres en Explorer y te quieres morir. Para arreglar esas cosas que sólo se «desmontan» en nuestro querido IE podemos fácilmente asignar a nuestra página un css que únicamente se aplique en el caso de que el explorador sea Internet Explorer de X versión (los Explorer más nuevos cada vex se comportan mejor, pero no se puede descartar, por ejemplo, una versión 9).

Por ejemplo, yo quiero afectar a la versión 9 de IE y anteriores:

[...]

/css-para-internet-explorer/

Curso de HTML y CSS

Anatomía de una etiqueta

Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una «disección» de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.

Este es un texto de ejemplo en el que solamente <div id=»destacado» class=»botón destacado»>esta parte está encerrada en una etiqueta</div> y el resto no.

[...]

/curso-de-html-y-css/

Emular una web en varios dispositivos

Para comprovar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil. Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I). Para activar el emulador utilizamos el botón con forma de dispositivo ( mobile). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable «Device», donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada… Además de las opciones que vemos en esta interfaz, podemos acceder a más configuraciones mediante el botón de tres puntos que tenemos a la derecha mobile3 (o entrando al inspector, presionando Esc y escogiendo la opción «Emulation» del menú). Allí podemos configurar opciones como el User Agent, la geolocalización, el acelerómetro… Una herramienta que me gusta mucho y quizás pasa un poco desapercibida es este iconito que podemos encontrar arriba a la izquierda: media. Se trata de un visualizador de las media queries. Si lo activamos nos muestra una barra con los «saltos» que hace las queries del css. Además, la barra será de un color distinto según el tipo de query que sea:

[...]

/emular-una-web-en-varios-dispositivos/