Pablo Chiappetti

Diseñador y Desarrollador Web



Introducción a

Diseño Web

Gráfico vs. Web: un cambio de Paradigma


  • No hay anchos ni altos fijos (del todo).
  • El contenido puede variar.
    Un texto de un párrafo, mañana puede tener tres.
  • 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.
  • Velocidad en los dispositivos



HTML

Hyper Text Markup Language


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


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. 




CSS

Cascading Style Sheets


Cascading?


Cascading significa en cascada. Bastante explícito.
La razón por la cual tienen este nombre, es
porque el orden 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


  1. Externo. Con la etiqueta <style> y una hoja externa
  2. En el documento. Con la etiqueta <style> y el código dentro
  3. 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.


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


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


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.

Introducción a HTML/CSS

By Pablo Chiappetti

Source: ignacioricci

Introducción a HTML/CSS

  • 880

More from Pablo Chiappetti