Programación 4
<clase3>
Lic. Mariano Ingerto
marianoingerto@[Link]
HTML + CSS
HTML CSS
<contenidos> apariencia {}
2
La importancia del estilo
Con “Inspeccionar” puedo ver el
código HTMl y CSS en el navegador
[Link]/215/
Elementos de la Experiencia de Usuario
Un mapade sitio (oárbol de sitio
o mapaweb) es unalista de las
páginasde un sitio web
Mapa de sitio accesiblespor parte de los
buscadores y los usuarios.
Puede ser tanto un documento
en cualquier formato usado
comon herramienta de
planificación para el diseño de
una web como una página que
lista las páginasde una web (ya
realizada), organizadas
comúnmente de forma
jerárquica. Esto ayuda a los
visitantes y a los bots de los
motores de búsqueda a hallar las
páginas de un sitio web.
Herramientas de generación Online
Prototipo de baja fidelidad o
Wireframes también llamado wireframe es
una representación esquemática
del contenido que tendrá la
interfaz .
Sirve para representar las
decisiones estructurales de
diseño, es decir los elementos
principales que formarán parte
de cada pantalla sin ahondar en
detalles estéticos o funcionales.
Maquetado
Wireframes
Wireframes
Herramientas de generación Online
Maquetación antigua
Definición y uso:
La etiqueta <div> define una división
o una sección en un documento
HTML.
Etiqueta <DIV>
El elemento <div> en general se usa
Fue la etiqueta más usada para como contenedor de otros
maquetar en HTML elementos HTML para la estructura
de diseño con CSS.
Es un elemento de bloque.
Maquetación Semántica
<HEADER>
Un grupo de navegación o contenido introductorio. Un
elemento header normalmente contiene una sección de
encabezado (un elemento h1-h6), pero puede contener otro
tipo de elementos, como una tabla de contenidos, un
formulario de búsqueda o cualquier lago importante.
En la mayoría de los sitios web, la cabecera contiene los
primeros elementos de la página. Tradicionalmente el título de
la web, su logo, enlaces para volver al inicio... De la manera
más simple, nuestra cabecera quedaría de esta forma:
<header>
<a href=“[Link]"><img src=[Link] alt="home"></a>
<h1>Title</h1>
</header>
<NAV>
Según la especificación, un elemento <nav> representa una
sección de una página que enlaza con otras páginas o partes de la
misma página: una sección con enlaces de navegación.
El elemento <nav> ha sido diseñado para identificar la navegación
de un sitio web.
La navegación se define como un conjunto de enlaces que hacen
referencia a las secciones de una página o un sitio, pero no todos
los enlaces son candidatos de pertenecer a un elemento <nav>,
una lista de enlaces a patrocinadores o los resultados de una
búsqueda, no forman parte de la navegación principal, sino que
corresponden con el contenido de la página.
Es posible que tengamos una navegación principal en la
cabecera de la página, una tabla de contenidos o enlaces en el
pie de la página, que apuntan a contenidos secundarios. Todos
ellos son candidatos a pertenecer a un elemento <nav>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
<FOOTER>
Según la especificación, un elemento <footer> tradicionalmente
contiene información acerca de su sección, como quién escribió
el contenido, enloces relacionados, copyright y similores.
Al igual que ocurre con el elemento <nav> , podemos tener
tantos elementos <footer> como sea necesario. Lo normal es
que nuestro sitio web disponga de al menos un pie principal, que
contiene los avisos legales (privacidad, condiciones del servicio,
copyright...), mapa del sitio web, accesibilidad, contacto y otros
muchos enlaces que pueden ir incluidos en un elemento <nav>
<footer>
<p>Posted by: <span>George Washington</span></p>
<p><time datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<ARTICLE>
Representa un contenido completo, contenido en un documento,
página, aplicación o sitio web, que es, en principio, independiente y
tiene sentido por si mismo.
Puede ser un post de un foro, un artículo de un periódico o revista,
una entrada de un blog, un comentario de un usuario, un widget o
cualquier otro elemento independiente.
Cuando los artículos están anidados, los artículos interiores
representan contenido que en principio está relacionado con el
artículo que los contiene.
Por ejemplo, una entrada de un blog puede aceptar comentarios de
usuarios, que están incluidos dentro del contenido principal y
relacionados con el mismo.
<SECTION>
A diferencia del elemento <article>, este elemento es utilizado
para dividir el documento (o artículos) en diferentes áreas, o
como su propio nombre indica, en secciones.
Según la especificación, un elemento <section> representa lo
siguiente:
Representa una sección genérica de un documento o
aplicación.
Una sección, en este contexto, es un grupo temático de
contenido, que generalmente incluye una cabecera.
<article>
<h1>Rules for Munchkins</h1>
<section>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so
no selling bricks as "souvenirs"</p>
</section>
<section>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their
"I’m a friend of Dorothy!" t-shirt when
representing the cl ub</p>
</section>
<p><strong>Vital caveat about the information
above: does not apply on the first Thursday
of the month.</strong></p>
</article>
<ASIDE>
Según la especificación, un elemento <aside> representa una
sección de una página que consiste en contenido
tangencialmente relacionado con el contenido alrededor del
elemento, y puede considerarse separado de este contenido.
Estas secciones son normalmente representadas como
elementos laterales en medios impresos.
Este elemento puede utilizarse contener citas, anuncios,
grupos de elementos de navegación y cualquier otro contenido
separado del contenido principal de la pagina.
Dentro de un artículo, por ejemplo, puede ser utilizado para
mostrar contenido relacionado como citas u otros artículos
relacionados.
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<p>TUTORIALES JAVA, HTML, JUEGOS ANDROID, SQL. </p>
</section>
<aside>
<a href=“[Link]”>English Version</a>
</aside>
header nav
section
divs
footer
<header>
<section>
<img>
<div> <div> <div>
<footer>
Layout de 3 Columnas
<article>
<div></div>
<div></div>
<div></div>
</article>
<div> <div> <div>
Elemento de Línea o Bloque
El HTML clasifica a todos sus elementos en dos
grupos:
• Elementos de bloque ("block • Elementos en línea ("inline
elements" en inglés) siempre elements" en inglés) no
empiezan en una nueva línea y empiezan necesariamente en
ocupan todo el ancho disponible nueva línea y sólo ocupan el
hasta el final de la línea. espacio necesario para mostrar
sus contenidos
<body> <img>
<div> <a>
<h1>, <h2>, <h3> <strong>
<p> <em>
Elemento Bloque
Casi todas las etiquetas de HTML son elementos de
bloque.
No importa el valor del ancho que tengan, ocupan
todo el ancho de la caja que la contiene.
<body>
#section
<div> .article
<h1>
<h2>
<h3> .article
<p>
Elemento en Línea
Los elementos en línea normalmente sólo pueden
contener texto y otros elementos en línea.
Se visualizan sin comenzar en una nueva línea.
<img>
#section
<a>
<strong>
<em>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Intercambio de Propiedades
El valor por defecto para la mayoría de los elementos
de HTML es block (de bloque).
Esto hace que el elemento ocupe físicamente el 100%
de la caja que lo contiene.
Pocos elementos son elementos inline (en línea). Es
decir que pueden convivir en una misma línea con
otro elemento HTML.
Uso de Imagen
Puede ir insertada para que se mueva con el contenido,
o puede ir como fondo de un elemento de HTML.
La etiqueta <img> se utiliza para
incrustar una imagen.
No se insertan técnicamente en un
HTML, sino que están vinculados al
archivo.
La etiqueta <img> crea un espacio de
para la imagen referencia.
Imagen Insertada <img> es una etiqueta vacía, solo
contiene atributos y no tiene una
<img src="url" etiqueta de cierre.
alt="textoalternativo"
> Los atributos obligatorios son:
src: especifica la ruta a la imagen
Se define en el HTML
alt: especifica un texto alternativo
para la imagen
<header>
<section>
<img>
<img src="url">
<div> <div> <div>
<footer>
Programación 4
</clase3 >
Lic. Mariano Ingerto
marianoingerto@gmail.
