presentación de powerpointmeba.aprendiendomarketingonline.com/materiales/... · language, es...
Post on 12-Aug-2020
9 Views
Preview:
TRANSCRIPT
INTRODUCCIÓN A LA
MAQUETACIÓN WEB(HTML & CSS)
about.me/davideguizabal@davideguizabal
¿Qué perseguimos con estas sesiones?
Qué es una página web
Qué es una página web
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
¿Cómo funciona Internet?
… incluso la más sencilla
HTML
Lenguaje de programación que se utiliza para el desarrollo de páginas de Internet.
Se trata de la sigla que corresponde a HyperText MarkupLanguage, es decir, Lenguaje de Marcas de Hipertexto.
HTML
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado WorldWide Web Consortium, más conocido como W3C.
Comentarios
<!-- Esto es un comentario -->
¿Qué es una marca/etiqueta?
Hola, <strong>¿qué tal?</strong>
¿Qué es una marca/etiqueta?
<p>Hola, <strong>¿qué tal?</strong></p>
Puedo poner una etiqueta dentro de otra (anidamientos).
¿Qué es una marca/etiqueta?
<p>Hola, <strong>¿qué tal?</strong></p>
Toda etiqueta que se abre tiene que cerrarse. Siempre tiene que quedar una dentro de otra.
Bien
<p>Hola, <strong>¿qué tal? </p></strong>
Mal
Anidamiento de las etiquetas
Tipo de documento
<!DOCTYPE html>
html5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
html4
Qué tipo de documento es y cuál es su versión
<head>
Aporta información para conocer mejor la página.
<title>
Titula el contenido que estamos viendo
El usuario no ve en ningún momento lo que contiene el apartado <head> (a excepción de la etiqueta <title>).
El usuario puede ver esta etiqueta en la barra superior de su navegador o bien en los resultados de búsqueda de Google&cía.
<meta>
Información para navegadores, robots de rastreo, etc.
<body>
El contenido “en sí”. Lo que ve el usuario dentro del navegador.
¿Cómo sé que lo hago bien?
Puedes acudir al validador de la W3C:https://validator.w3.org
Nos permitirá conocer si las etiquetas están bien estructuradas y organizadas, si los anidamientos son correctos, si no existen errores
de sintaxis de acuerdo al estándar, etc.
<a>
La parte fundamental de HTML son los enlaces (links).
<p>Puedes descargar mi documento <a>aquí</a>.</p>
Atributos
Muchas de las etiquetas HTML requieren del uso de atributos para poder concretar su comportamiento.
<a href=“documento.pdf”>aquí</a>
Nombre del atributoValor del atributo
<a>
Deberemos de prestar mucha atención al uso de rutas relativas y/o absolutas para evitar enlaces rotos.
<a href=“documento.pdf”>aquí</a>
URL relativa
<a href=“/documento.pdf”>aquí</a>
URL absoluta
<a href=“http://midominio.com/documento.pdf”>aquí</a>
<a>
También podemos enlazar correos electrónicos.
<a href=“mailto:dirección@dominio.com”>aquí</a>
<a>
Debemos prestar atención al título contextual del enlace.
<a title=“Documento PDF (300Kb)”href=“documento.pdf”>aquí</a>
<a>
Para abrir un enlace en una nueva ventana/pestaña…
<a target=“_blank” href=“documento.pdf”>aquí</a>
<img>
No enlazamos el recurso sino que lo incluimos en el contenido.
<img src=“logo.png” />
<img>
En una imagen también podemos utilizar atributos para personalizarla y “mejorar” su apariencia.
<img src=“logo.png” width=“200” height=“75” />
<img>
Los robots de búsqueda, los lectores de pantalla, etc. no son capaces de saber lo que contiene una imagen …
<img src=“logo.png” alt=“Logotipo de mi empresa” />
Debiéramos utilizar siempre que podamos un texto alternativo que describa lo mejor posible el contenido de la
imagen (salvo el elementos decorativos o redundantes).
Cierre de las etiquetas
Etiqueta con contenido
<img src=“logo.png” alt=“Logotipo de mi empresa” />
Etiqueta sin contenido
<p>Este párrafo es muy importante.</p>
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>
Estructuran jerárquicamente un contenido.
<br />
Salto de línea sin generar un párrafo nuevo.
<ul>, <ol>, <li>
Listas ordenadas y sin ordenar.
<ul><li>Ejemplo</li><li>De</li><li>Listado</li><li>Correcto</li>
</ul>
<ol><li>Buen</li><li>Listado</li><li>Ordenado</li>
</ol>
Bien Mal- Ejemplo<br />- De<br< />- Listado<br />- Mal<br />- Trabajado
1. Peor<br />2. Todavía
<ul>, <ol>, <li>
Es recomendable emplear listas para los menús de navegación, los selectores de idioma, navegación por pestañas, etc.
Puedes anidar listas hasta el nivel que necesites.
<strong>, <b>, <em> e <i>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
Fragmento importante
<p><strong>¡Cuidado!</strong> Debes andar sin prisa.</p>
Destacado visualmente, pero sin afectar a significado
<p><b>Es recomendable</b> que andes sin prisa.</p>
Cambio de tono afectando a significado
<p><em>”Andando que es gerundio”</em> me lo repetía mucho.</p>
Términos técnicos, fragmentos en otro idioma, …
<p>Me encanta hacer <i>jogging</i> todas las tardes.</p>
<acronym> y <abbr>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
Abreviatura o acrónimo
<p>Ayer en la <abbr title=“National BasketballAsociation”>NBA</abbr> se marcaron muchos puntos.</p>
<abbr> es la correspondencia en html5 a <acronym>
<strong>, <b>, <em>, <i> y <abbr>
Empleadas para marcar semánticamente el contenido y enfatizarlo visualmente.
El marcado semántico tiene mucho sentido para:
Posicionamiento en buscadoresAccesibilidad
Web semántica
<div>
Etiqueta genérica (contenedor) para enmarcar un bloque de contenido dentro del HTML completo de una página.
<span>
Etiqueta genérica para enmarcar un fragmento de contenido dentro de un párrafo, una lista, etc.
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>
Maquetación de tablas de datos e información.
<table>, <thead>, <tbody>, <tfoot>, <tr>, <th> y <td>
Para juntar filas y columnas y crear tablas más complejas utilizaremos los atributos rowspan y colspan respectivamente.
html4 vs. html5
<header>, <nav>, <section>, <article>, <aside> y <footer>
Estructuración semántica del contenido de una página.
Diseño visual
ObjetivoSeparar los contenidos de la apariencia visual de
los mismos.
Para eso nacen las hojas de estilos en cascada(conocidas como CSS).
Diseño visual
CSS
Una hoja de estilo en cascada o CSS es un lenguaje utilizado para definir y crear la presentación visual de
un documento estructurado (como puede ser por ejemplo un documento HTML).
El W3C es el organismo encargado de concretar la especificación de las hojas de estilo como estándar web.
Reglas CSS
h1 {color: #000;
}
a {background: #ff0000;
}
selector CSS
declaración CSS en formato <propiedad>: <valor>;
Propiedades CSS
Modelo de caja CSS
margin: área invisible que rodea el elemento y permite separarlo de otros elementos.padding: espacio entre el contenido del elemento y sus límites.border: límites del elemento.
Selectores CSS
Etiquetas HTML
h1 {color: #000;
}
a {background: #ff0000;
}
Selectores CSS
Clases
Necesarias cuando no quiero hacer lo mismo con todas las apariciones de una etiqueta HTML concreta. Me permite además agrupar etiquetas por una clase dada.
<a class=“boton”>Leer más</a>
.boton {color: #fff;background: #ffff00;
}
Emplea nombres de clase semánticos y en ningún caso descriptivos
Selectores CSS
Identificadores
Son elementos únicos dentro de un documento HTML.
<p id=“introduccion”>Esta es una introducción al texto que vendrá luego …</p>
#intro {color: #fff;background: #ffff00;
}
Emplea nombres de clase semánticos y en ningún caso descriptivos
Reglas CSS (II)
.boton {color: #000;
}
#pie {color: #000;text-transform: uppercase;
}
- Una regla CSS puede referirse a más de un selector.- Un selector puede aparecer en tantas reglas como sea necesario.
.botón,#pie {
color: #000;}
#pie {text-transform: uppercase;
}
Reglas CSS (III)
h2 {font-family: Verdana;
}
p {font-family: Verdana;
}
.boton {font-family: Verdana;
}
- La herencia del valor ante una propiedad entre elementos y sus contenedores constituye la cascada.
body {font-family: Verdana;
}
Reglas CSS (IV)
.texto {font-family: Verdana;
}
<p class=“texto”>Hola, qué tal</p><p class=“texto”>¿Cómo estás?</p><p class=“texto”>Yo bien.</p>
- Cuando algo se repite, podemos generalizar.
.texto {font-family: Verdana;
}
<div class=“texto”><p>Hola, qué tal</p><p>¿Cómo estás?</p><p>Yo bien.</p>
</div>
Selectores CSS (II)
Posicionamiento
Posicionamiento (II)
Elementos flotantes
https://css-tricks.com/all-about-floats/
Posicionamiento vs. elementos flotantes
https://css-tricks.com/all-about-floats/
top related