Ahora también distribuidor oficial BQ

Aplicaciones Web (II)

HTML5 CSS3 JSNavegación HTML

Un menú es una lista de enlaces. Se recomienda usar las marcas de lista <ul>, <li>, y el enlace <a>, que es lo establecido por las normas de accesibilidad.


 

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Menú</title>
 </head>
 <body>
 <nav>
 <ul>
 <li><a href="index.html">Inicio</a></li>
 <li><a href="news.html">Noticias</a></li>
 <li><a href="contact.html">Contacto</a></li>
 <li><a href="about.html">Quienes somos</a></li>
 </ul>
 </nav>
 </body>
 </html>

 

Menú vertical

Ver: 07a_menu02.html

Los valores CSS por defecto de la lista y del enlace, deben ser ajustados a nuestras necesidades.
Ejemplo de menú vertical: myspacehttps://myspace.com/

Menú horizontal

Ver: 07b_menu02b.html

Ejemplo de menú horizontal: BBChttp://www.bbc.com/

Menús Firefox OS

Los menús recomendados para las aplicaciones en Firefox OS consistirán en listas verticales, con botones para cada opción de acuerdo con la guía de estilo para los mismos.

Listas según la guía de estilo Firefox OS:
https://www.mozilla.org/en-US/styleguide/products/firefox-os/lists/

Firefox OS App Buttons:
https://www.mozilla.org/en-US/styleguide/products/firefox-os/buttons/

Iconos para aplicaciones Firefox OS

Un icono para una aplicación Firefox OS es una imagen de píxeles 60×60 píxels en formato PNG de 24 bits.
https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/

Hay otros tamaños necesarios para otros dispositivos:
16px, 32px, 48px, 60px, 128px, 256px.

Recursos navegación CSS

Cristalab: Menús verticales
http://www.cristalab.com/curso-html/menus-verticales/

CSS Blog: Crear un menú horizontal simple con CSS
http://www.cssblog.es/crear-un-menu-horizontal-simple-con-css/

w3schools: menú horizontal
http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

 

HTML5 CSS3 JS

Texto CSS

Ahora veremos las marcas que permiten definir las propiedades y aspectos visuales de una fuente.

font-family es la propiedad que permite definir la fuente para un elemento.

p {
    font-family: "Times New Roman”, Georgia, serif;
}

Algunas fuentes de uso común son:

Times New Roman, Bodoni, Garamond, Gorgia – Serif
Trebuchet, Arial, Helvetica, Verdana, Futura – San Serif

http://www.w3.org/TR/CSS2/fonts.html

Las propuestas de familia tipográfica terminan con una familia genérica alternativa.

Valores de las familias genéricas son:

  • ‘serif’      (Ej.: Times)
  • ‘sans-serif’ (Ej.: Helvetica)
  • ‘cursive’    (Ej.: Zapf-Chancery)
  • ‘fantasy’    (Ej.: Western)
  • ‘monospace’  (Ej.: Courier)

http://www.w3.org/TR/CSS2/fonts.html#generic-font-families

Familia tipográfica

Es una serie de tipos clasificables, por su peso (Extralight, Light, Regular, Semibold, Bold, Black), inclinación, proporción, espaciado (Condensed, Normal, Semiexpanded, Expanded, Ultraexpanded), ausencia o presencia de serifas… En tipografía digital, en los formatos actuales, una serie completa esta incluida en un único archivo, que contiene los tipos independientes.

 

font-weight

Especifica el peso de la letra, según los siguientes valores.

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

 

font-strech

Especifica el ancho de la fuente, la mayoría de los navegadores no soportan esta propiedad

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch

 

font-style

Especifica el estilo de la fuente. Normal, condensada…

normal | italic | oblique | inherit

https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

 

font-size

Especifica el tamaño de la fuente

<absolute-size> | <relative-size> | <length> | <percentage> | inherit

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

El tamaño predeterminado para el texto es de 16px (16px = 1em).

<absolutebsize>
Los valores posibles son:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]

<relative-size>
Un valor relativo al heredado, mayor o menor:
[ larger | smaller ]

<length> es un valor absoluto del tamaño generalmente en px

<percentage> representa un valor en función al valor heredado

 

font-variant

Especifica la variante de la fuente. Es la versión versalita de una fuente.

normal | small-caps | all-small-caps

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

 

line-height

Define el interlineado del texto

normal | <número> | <medida> | <porcentaje> | inherit

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height

El número que multiplicado el tamaño de la fuente establece el alto de la línea
Medida, es la altura de la línea como un valor fijo en px, pt …
El porcentaje del alto de la línea en función del tamaño de la fuente

 

Formatos @font-face


 

String              Font Format                    Common extensions
 "woff"              WOFF (Web Open Font Format)     .woff
 "truetype"          TrueType                        .ttf
 "opentype"          OpenType                        .ttf, .otf
 "embedded-opentype" Embedded Opentype               .eot
 "svg"               SVG Font                        .svg, .svgz

Compatibilidad

http://caniuse.com/fontface

Depende del navegador y del sistema operativo, actualmente es compatible en la mayoría de navegadores y SO actualizados.

WOFF  Web Open Font Format
El Web Open Font Format (WOFF) es un formato de tipo de letra para usarse en páginas web. Fue desarrollado por la Fundación Mozilla, Opera Software y Microsoft, y está en el proceso de normalización por el W3C y convertirse en un estándar.

EOT Embedded OpenType
Embedded OpenType ( EOT ) estas fuentes son una forma compacta de OpenType para su uso como fuentes incrustadas en las páginas web y a su vez protegen los derechos de autor.

SVG Scalable Vector Graphics
SVG es una especificación para describir gráficos vectoriales bidimensionales, estático o animado y fue creado como alternativa de formato abierto a Flash. se emplea como formato tipográfico en la web para dispositivos iOS (iPad, iPhone y iPod)

TrueType
TrueType es un formato estándar de tipos de letra escalables desarrollado inicialmente por Apple a finales de la década de los ochenta. Es compatible con Firefox 3.5+ , Safari 3.1+, Chrome 4+ y Opera 10+.

Convertir fuentes
http://www.fontsquirrel.com/tools/webfont-generator

 

@font-face

Permite vincular fuentes sin necesidad de que el cliente las tenga instaladas en su ordenador.

font-family
Valor: <family-name>

src
Valor: [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [,
<string>]*)] | <font-face-name> ]*

@font-face {
    font-family: FiraMono;
    src: url(FiraMono-Regular.woff) format("woff"),
    url(FiraMono-Regular.eot) format("embedded-opentype");
}
p {
    font-family: FiraMono, serif;
}

http://www.w3.org/TR/css3-fonts/#font-face-rule

 

Tipografía Firefox OS

Fira Sans para Firefox OS
Firefox OS utiliza Fira Sans, una fuente tipográfica específica en diferentes cuerpos y pesos. Diseñada por Erik Spiekermann y Ralph de Carois para Firefox OS.

Descargar la fuente y conocer las recomendaciones de uso en:
http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/

 

@fontbface embedding

Es posible el uso de fuentes alojadas en servidores externos

Google Fonts
En la cabecera

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>

En el estilo

p {
    font-family: 'Caesar Dressing', cursive;
}

http://webfonts.info/webfonts-in-action

 

Recursos CSS

W3C: CSS Fonts Module Level 3
http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/

MDN: @font-face
https://developer.mozilla.org/es/docs/CSS/@font-face

FONT SQUIREL
http://www.fontsquirrel.com/fontface/generator

Google FONT
http://www.google.com/webfonts

Typekit
https://typekit.com/

Red Team Design: Google Font API and Typekit solutions VS @font-face
http://www.red-team-design.com/google-font-api-and-typekit-solutions-vs-font-face

 

HTML5 CSS3 JSEstructura CSS

Imágenes HTML

Las imágenes se vinculan en una página HTML con la etiqueta <img> con los atributos

src = URL
alt = texto alternativo de la imagen
width = ancho
height = alto

DIV

La etiqueta <div> ofrece a los diseñadores la flexibilidad y el control sobre la posición cuando se combina con las propiedades CSS.

Una etiqueta div puede tener, instrucciones de formato (de la familia de fuente, color, bordes, etc), atributos de altura y anchura, posicionamiento.

Tamaño
Hay que tener cuidado al emplear el tamaño, el contenido según el navegador puede desbordar el tamaño de un div. Evitar definir altos si no son necesarios.

div{
    width: 400px;
    height: 200px;
}

DISPLAY

La propiedad display, permite establecer el tipo de caja de un elemento. Los valores más utilizados son: inline, block y none.

Ver: 10a_display.html

Padding, margin y border

Ver: 10b_div01.html

Comprobar con el modelo de caja de las herramientas del inspector de Firefox cada valor.

Background

Ver: 10c_div02.html

Comprobar el uso de cada imagen:
back_mantel.png
dh.png
dh_2.png
dh_3.png
ac.jpg

http://www.css3files.com/background/

Background CSS3

Ver: 10d_div03.html

Comprobar el uso de cada imagen:
f01.png
f02.png
f03.png

div {
  background:
    url(texto/f01.png) left bottom repeat-x,
    url(texto/f02.png) left bottom no-repeat,
    url(texto/f03.png) left top repeat-x;
  background-color:  a4d3ff;
}

CSS3 permite añadir bordes y bordes redondeados

Ver: 10d_div04.html

 

A    border-radius: 24px; 
B    border-top-left-radius: 24px; 
C    border-radius: 24px 0; 
D    border-radius: 36px 12px; 

E    border-top-right-radius: 50px 30px;
F    border-bottom-right-radius: 50px 30px;
G    border-radius: 50%; 
H    border-radius: 50% 50% 0 0; 
 
I    border-radius: 0 20px 20px 0; 
J    border-radius: 20px 0 0 20px; 
K    border-radius:  0 50% 0 50%;
L    border-top-left-radius: 50% 20%; 
     border-top-right-radius: 50% 20%; 
     border-bottom-left-radius: 50% 20%; 
     border-bottom-right-radius: 50% 20%;

 

http://www.cssma8c.com/es/border-radius

CSS3 permite añadir sombras

Ver: 10f_div05.html

 A {box-shadow: -5px -5px         #888;}
 B {box-shadow: -5px -5px 5px     #888;}
 C {box-shadow: -5px -5px 0   5px #888;}
 D {box-shadow: -5px -5px 5px 5px #888;}
 E {box-shadow: 0    0    5px     #888;}
 F {box-shadow: 0    0    5px 5px #888;}
 G {box-shadow: inset -5px -5px          #888;}
 H {box-shadow: inset -5px -5px 5px      #888;}
 I {box-shadow: inset -5px -5px 0    5px #888;}
 J {box-shadow: inset -5px -5px 5px  5px #888;}
 K {box-shadow: inner 0    0    5px      #888;}
 L {box-shadow: inset 0    0    5px  5px #888;}

 

http://dev.w3.org/csswg/css-backgrounds/

Recursos

CSS3 Generator
http://css3generator.com/
CSS3 Gradient Generator
http://gradients.glrzad.com/
{CSS} Portal – on line generator
http://www.cssportal.com/css3-rounded-corner/
CSS3 MAKER:
http://www.css3maker.com
CSS3.com
http://www.css3.com/

Estructura CSS3

CSS3 permite posicionar los div en la página: float

Ver: 11a_div01.html

<style type="text/css">

  div {
    float: left;
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid  666;
}

</style>

 

Con float el div “flota” a una posición relativa.

Ver: 11b_div02.html

Con clear se rompe el esquema  del float.

Ver: 11c_div03.html

Uso de float y un div clear que rompe el esquema del float.

Ver: 11d_div04.html11e_div05.html11f_div06.html

CSS3 permite posicionar los div en la página, mediante posición absoluta, relativa o fija.

Con posición absoluta el div sale del flujo del contenido.

Ver: 11g_div07.html

Con posición fija el div no cambia de posición en el escalado del navegador o el scroll en la página.

Ver: 11h_div08.html – 11i_div09.html

 

Cajas flexibles

Las cajas-flexibles, se consiguen con un nuevo valor de la propiedad display, (display: flex;) de la caja padre.

Ver: 11k_div11.html

La orientación se define con flex-direction y puede ser horizontal o vertical, según sea fila o columna.
Los elementos flexibles tienen diferentes formas de alinearse y distribuirse justify-content y align-items.

Cada uno de los elementos puede ordenarse o los diferentes modos crecer o reducirse para ocupar el espacio.

La nueva propiedad de cajas-flexibles, es la forma más sencilla de controlar el aspecto de las cajas div.

Referencias:

MDN-Usando las cajas flexibles CSS
https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles
CSS-TRICKS A Complete Guide to Flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

HTML5 CSS3 JS

Diseño adaptativo para PC, Móvil y Tableta

Diseño Web adaptable

El diseño adaptable (responsive) busca uniformizar el acceso desde cualquier dispositivo, ya sea PC, móvil, tableta, smartTV, … optimizando la experiencia de usuario en cada uno de ellos

El diseño adaptable utiliza una única definición HTML de interfaz o página que se adapta al dispositivo con diferentes ficheros CSS

Utilizamos el atributo media de <link … media=”screen” src=”screen.css”> para seleccionar el fichero CSS específico de cada dispositivo

Algunas referencias
Tutorial: http://www.alistapart.com/articles/responsive-web-design/
Ejemplos: http://css-tricks.com/resolution-specific-stylesheets/

El atributo media de <link ..>

El atributo media de la marca <link> de CSS3 detecta el dispositivo utilizado

http://www.w3schools.com/tags/att_link_media.asp

El atributo media condiciona la carga del fichero de estilos al dispositivo utilizado
Smartphone con pantalla menor de 480 px
media=”only screen and (max-device-width: 480)”
Pantalla ancha con el navegador en una ventana de anchura mayor a 600 px
media= “only screen and (max-width: 600) and (min-device-width: 481)”

Hay otras formas de adaptación
Antes se consultaba con Javascript. “screen.availHeight“, “screen.availWidth
CSS3 también permite incluir media-queries en los comandos CSS

Ver: 12a_responsive

style.css

style.css + wide.css

style.css + smartphone.css

Usando la etiqueta meta viewport

La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como  width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS en una escala de 100%. La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

Integración de objetos y de multimedia en páginas HTML5

Integrar objetos y recursos externos

HTML permite insertar recursos externos en una página Web con
<img …>: imágenes
Formato de puntos: JPEG, GIF, PNG, … (resolución fija)
Formato vectorial: SVG, … (escalables sin perdida de calidad)

<video …>, <audio …>: video y audio
No existe acuerdo sobre los formatos a utilizar!!!

<iframe …>: páginas Web y otros objetos
Crea un nuevo marco de navegación Web anidado seguro

<object …>: objetos. plugins, imágenes
Es el mas genérico.

<embed …>: aplicación exterior, normalmente no-HTML
Marca heredada del pasado (Flash), se introdujo como un elemento no estándar

Permiten integrar (hacer mash-ups) contenidos con gran facilidad
http://www.sitepoint.com/add-svg-to-web-page/
https://groups.google.com/forum/#!topic/epub-widgets-discuss/JWGV_RPe4H4
http://www.w3.org/TR/html5/embedded-content-0.html

Audio y Video en HTML5

Las marcas audio y video de HTML5
Permiten incluir audio y video en páginas Web
http://www.w3schools.com/html/html5_video.asp

Ver: 13a_video.htm

Video: formatos
Contenedor OGG
Video: Theora (VP7), Audio: Vorbis
Calidad menor

Contenedor MP4
Video: H264, Audio: ACC
Existen Patentes

Contenedor WebM
Video: VP8, Audio: Vorbis

Ver: 13b_video_webm_mp4.htm

¿Que marca usar?

<object>: es la mas general de todas. Puede integrar una imagen, un marco de navegación anidado o un recurso procesado por un plugin.

Permite paso de parámetros e interacción con el objeto integrado
Tipo mime identifica tipo de objeto: <object type=”image/svg+xml” … >

<iframe>: es la mas segura.

Crea una caja de arena (sandbox) y restringe accesos al mismo origen.
Protege de acciones hostiles del objeto importado

<embed>: marca no estándar heredada de tiempos del Flash.

Aunque ha sido incluida en HTML5, su uso no es muy popular.

<object>, <iframe> y <embed> pueden usarse con imágenes, video, …

El ejemplo siguiente muestra su equivalencia, incluyendo
2 marcos de navegación anidados, uno con <object> y otro con <iframe>
2 videos, uno con <video> y otro con <iframe>
2 imagenes, un SVG animado con <object> y un PNG de baja resolución con <img>

Ver: 57-galeria.htm

Galería con Flexbox

Flexbox adapta los bloques a la caja con
display: flex;        // Crece horizontalmente (flex-direction:row)
flex-wrap: wrap;    // Inserta hasta final y pasa a línea siguiente.

coloca cada bloque vertical a la derecha del anterior si cabe y al llegar al final pasa a la línea siguiente. Utilizan valores por defecto (flex-grow:0, flex-shrink:1, flex-basis:auto).

Cada bloque vertical puede contener a su vez dos bloques horizontales.

HTML – HTML5 Quick Guide

http://media.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

 

Comments are closed.