Ignacio Ricci
Diseñador & Front-end developer
Introducción a
HTML/CSS
Gráfico vs. Web: un cambio de Paradigma
-
No hay anchos ni altos fijos (del todo).
- El contenido es siempre cambiante. Puede ser un párrafo
hoy, y 3 mañana. Más teniendo un CMS o similar. - El soporte no es igual para todos los usuarios. No es una
hoja A2, A3 o A4. Cambian los navegadores, los sistemas
operativos y los dispositivos. Desktop, notebook, tablet,
celulares. - Queda en segundo plano el concepto de retórica. El objetivo
de una web es consumir un contenido. Podemos utilizar las
metáforas y recursos que deseemos siempre y cuando no
perjudiquen este objetivo.
HTML
Hyper Text Markup Language
Doctypes
Definen nuestro tipo de HTML
LOS MÁS USADOS:
- XHTML Transitional
- XHTML Strict
- HTML5
Construcción de una etiqueta/tag
<etiqueta> </etiqueta>
Las etiquetas deben abrirse y cerrarse. La primera es la de apertura y la segunda la de cierre.
La única diferencia entre ellas es la barra (/)
Comentarios de HTML
Para realizar un comentario, se agrega <!-- al principio,
y --> al cierre de lo que se desea comentar.
<!-- Comentario -->
Deprecated
Si alguna vez leen que algo es deprecated,
significa que no es recomendable para usar.
Esto no significa que no vaya a funcionar, pero
no es bien visto su uso frente a otros developers.
También indica que probablemente en un futuro desaparezca.
El concepto de deprecated es aplicable a
todos los lenguajes. En el caso de HTML, lo que
deja de ser recomendable es el uso de ciertas etiquetas.
Indentación
Para mantener un código legible y prolijo,
es recomendable indentarlo. Indentar el código
significa espaciar los elementos "hijos" en el documento.
Los tamaños de indentado pueden variar según
cada desarrollador, pero hay dos convenciones
que son las más usadas:
-
2 espacios
-
1 tab
Como "lee" el código un navegador
Un navegador lee el código al igual que nosotros
leemos texto. De izquierda a derecha y de arriba
hacia abajo. Cuanto más líneas de código tenemos,
más costoso es para el navegador.
(Siempre hablando de milésimas de segundo).
Por eso muchas veces verán archivos "minificados"
o de una sola línea, que mejora la velocidad de rendereo.
CSS
Cascading Style Sheets
Cascading?
Cascading significa en cascada. Bastante explícito.
La razón por la cual tienen este nombre, es
porque el órden en CSS en muy importante.
Lo que colocamos debajo tiene más relevancia
que lo que colocamos arriba, y según como
incluímos nuestras hojas de estilos puede
impactar en el resultado también.
Hay 3 formas de
incluir un CSS
- Externo. Con la etiqueta <style> y una hoja externa
- En el documento. Con la etiqueta <style> y el código dentro
- En línea. Con el atributo style="" y el código dentro
De éstas 3 formas, la primera es la más usada
y la más recomendada. No deberían utilizarse
los otros casos salvo en casos particulares.
CSS Resets
Utilizados para "unificar" o "estandarizar" los
estilos default de los navegadores.
Los dos más comunes son:
- Eric Meyer's reset
- Normalize.css
Comentarios en CSS
Para realizar un comentario en CSS, se antepone /* y
*/ al cierre. El principio y el fin están invertidos.
/* Comentario */
Elementos de bloque
vs. elementos de línea
Elementos como encabezados, párrafos y listas son
elementos de bloque. Elementos como links, énfasis y
negrita son elementos de línea.
Es importante tener en cuenta este layout default
de cada etiqueta a la hora de maquetar. Por CSS tenemos
la habilidad de cambiar su layout por default.
Box Model
Contenido
Paths
Es importante entender a la hora de incluir archivos
como funcionan los paths/rutas a un archivo.
archivo.html --> mismo directorio
../html/archivo.html --> subo un directorio
/html/archivo.html --> entro a un directorio
../../../html/archivo.html --> subo 3 directorios
IDs vs. Class
<div class="miclase otraclase" id="unico"></div>
Los ID's son elementos únicos que no se repiten
dentro de la misma página. Su sintaxis de CSS es #id
Las clases son repetibles y acumulables.
Su sintaxis de CSS es .clase
Especificidad de hojas
Especificidad (de mayor a menor)
- Estilos en línea
- Estilos de documento
- Estilos externos
Especificidad de estilos
La especificidad de CSS, es cuantificable,
y es bastante fácil de recordar al ser un sistema de valores
- ID = 0, 1, 0, 0
- Class = 0, 0, 1, 0
- Tag = 0 , 0 , 0 , 1
#header #menu .list --> 0, 2, 1, 0
#header #menu ul --> 0, 2, 0, 1
#header --> 0, 1, 0, 0
Uso de !important
Tiene *en principio* la especificidad máxima.
Sobrepasa la especificidad de la misma hoja,
de los estilos del header y de los estilos en línea.
#header #menu ul --> 0, 2, 0, 1
ul (!important) --> 1, 0, 0, 0
Semántica
En teoría, por el poder de CSS, podríamos utilizar
cualquier etiqueta de HTML para hacer lo que nosotros
quisieramos con ella desde un punto de vista gráfico.
Sin embargo, la existencia de las distintas etiquetas
tiene una razón de ser, que es la semántica.
Es decir, lo que representa cada elemento.
<p> es un párrafo, <h1> un encabezado,
<q> una cita, etc.
Este concepto es importante a la hora
de entender que la web es contenido independiente
de como se presenta a los ojos.
Además, es bueno por dos razones más:
- Asegura un lenguaje común entre todos
los desarrolladores - Accesibilidad. Gente con discapacidades, en particular
personas no-videntes, dependen de que su software
les lea el contenido de una web. Usar elementos
semánticos colabora en que su experiencia sea más
placentera y más eficaz.
Em's vs PX's
En impresión, las fuentes suelen manejarse en puntos (pt).
En la web, hay varias unidades relacionadas al tamaño
de las fuentes. Las dos más usadas son:
- Pixels (.px)
- Em's (.em)
Em es una unidad tipográfica, construida en base
al ancho de la letra m minúscula de la tipografía.
Su uso genera un ritmo más armónico que los pixels.
Sin embargo, su uso es muy distinto, ya que
los pixels son unidades absolutas y los ems
son unidades relativas.
A fines prácticos, si tenemos dos elementos
(un padre y un hijo)...
Si estamos utilizando fuentes en PX's, los tamaños
serán autónomos e independientes.
En el caso de los EM's, el tamaño de la fuente del hijo
estará ligada al tamaño del padre
Encoding
El encoding define que caracteres son soportados
en nuestro HTML. Los dos encodings más comunes son:
ISO-8859-1
UTF-8
La realidad es que lo mejor y lo que es más práctico
es siempre utilizar UTF-8. Puede haber servidores
corriendo en Windows que tengan ISO, pero en el 99% de
los casos no vamos a tener problemas.
Encodings como ISO-8859-1 son problemáticos
a la hora de usar tildes que son muy comunes
en el caso de idiomas como español.
UTF-8 es mucho más extenso en relación
al soporte de caracteres, por eso es el más utilizado
y el más cómodo a la hora de trabajar.
W3C Validator
Es importante escribir un código válido porque
nos asegura un mejor cross-browsing y la
mayor reducción de errores.
Un código válido significa básicamente que
no hemos cerrado mal etiquetas, usado etiquetas
deprecated, etc.
La W3C ofrece un validador online tanto para HTML
como para CSS totalmente gratis.
Links a ambos validadores:
Peso de imágenes
Este es un factor crucial a la hora de optimizar
el peso de un sitio web. El peso total de las imágenes
depende mucho del proyecto y del público.
Por ejemplo, un proyecto para clientes de USA, con
conexiones de alta velocidad puede tener el lujo
de tener un importante uso de imágenes de alta calidad.
No es el caso de nuestro país, y menos en un
ámbito gubernamental, donde la idea es contemplar
a la mayor cantidad de usuarios posibles.
Por suerte, a través del buen uso de CSS y teniendo
en mente las limitaciones del diseño en web, no
es muy complicado estar entre los parámetros
deseables en cuanto a esto.
Es muy difícil definir un estándar para esto, porque
cada sitio es un caso particular, pero una guía
general para esto sería:
0 - 500k para sitios pequeños (en total)
0 - 1mb para sitios medianos (en total)
0 - 2mb para sitios grandes (en total)
Curso introductorio HTML/CSS
By ignacioricci
Curso introductorio HTML/CSS
- 1,151
