HTML%

Estructura%

Estructura%HTML%
Los%elementos%html%pueden%visualizarse%como%bloque%o%como%en%lnea.%
%%%
Los%elementos%bloques%block%ocupan%todo%el%ancho%de%la%pgina%y%fuerzan%a%una%
%%
nueva%lnea%antes%y%despus.%
%
%
<article> <aside> <canvas> <div> <footer> <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section>
<ul>
hBps://developer.mozilla.org/enEUS/docs/HTML/BlockElevel_elements%

Los%elementos%en%lnea%inline%slo%ocupan%el%ancho%necesario%y%no%fuerzan%
nuevas%lneas.%%%
%
<em> <a> <br> <img> <span> <button> <input> <select>
<textarea>
%
%
% hBps://developer.mozilla.org/enEUS/docs/HTML/Inline_elements%
%

Estructura%HTML%
%%%
DIV,

%%
El%elemento%<div>%es%un%elemento%de%bloque%que%se%emplea%
%
contener%en%su%interior%otros%elementos%HTML.%
%
%El%elemento%<div>,no%Lene%ningn%signicado,%es%semnLcamente%
neutro.%%
%
Empleando%CSS,%el%elemento%<div>,se%puede%uLlizar%para%
estructurar%el%documento%en%grandes%bloques%de%contenido.%
%
El%div%es%la%propuesta%para%susLtuir%a%los%elementos%<table>,para%el%
diseo.%El%propsito%del%elemento%<table>,es%para%mostrar%datos%
tabulados.%
%
%

<div>%
<div>%dene%bloque%un%genrico%empleado%para%formatear%con%CSS.%
%%%
%%%%%%%%%%%%%<div,id="caja"
class="cabecera">,.,</div>%
%%
%%
Atributo%ID:%idenLca%unvocamente%un%elemento%HTML%en%una%
pgina.%Un%elemento%HTML%solo%debe%tener%un%atributo%ID%y%este%
debe%ser%nico%en%la%pgina.%El%selector%CSS%%#caja,se%reere%al%
elemento%con%atributo%id="caja,%como%en%#caja,{color:blue},,
%
Atributo%CLASS:%dene%una%clase%de%elementos%HTML.%Un%elemento%
puede%tener%varios%atributos%CLASS.,El%selector%CSS%.cabecera,se%
reere%a%todos%los%elemento%de%la%clase%cabecera%(que%llevan%el%
atributo%class="cabecera"),%como%en%.cabecera,{color:red},,
,
,
%
%

Estructura%HTML%
%%%
SPAN,

%%
El%elemento%HTML,<span>,es%un%elemento%en%lnea%que%se%emplea%
%
como%un%contenedor%de%texto.%
%
El%elemento%<span>,no%Lene%ningn%signicado%especial,%es%
semnLcamente%neutro.%.%
%
Cuando%se%uLliza%junto%con,CSS,%el%elemento%<span>,se%puede%
uLlizar%para%establecer%los%atributos%de%esLlo%para%las%partes%del%
texto%mediante%un%idenLcador%ID%o%una%clase%class.%
%
%
%
%
%

CSS%
Los%elementos%<DIV>%y%<SPAN>%se%emplean%para%denir%normas%de%
%%%
esLlo%ms%especcas.%%
%%
El%atributo,id,se%emplea%para%idenLcar%un%elemento%nico.%
%
El%atributo%class%cuando%hay%ms%de%un%elemento%que%manLenen%
una%relacin%signicaLva,%puede%ser%comparLr%el%esLlo.%
%
%
%
%
%

Estructura%HTML%
En%HTML5,%los%bloques%,son%susLtuidos%por%bloques%semnLcos%que%
%%%
muestran%signicado%por%si%mismos.%
%%
%%
<header>%
% <nav>%
%
<secLon>%
<aside>%
%
<arLcle>%
%
%
%

<footer>%

Estructura%HTML%
Una%pgina%de%este%Lpo%realizada%con%<div>,quedara%de%la%
%%%
siguiente%manera.
%
%%

Es%habitual%una%caja%contenedor%para%impedir%que%ocupe%toda%la%pgina%cuando%la%ventana%
%
de%la%navegador%es%muy%grande%o%controlar%la%disposicin%de%los%elementos%cuando%es%muy%
pequea.%

%
%
%
%
%
%

+,CSS,

Estructura%HTML%
Una%pgina%de%este%Lpo%realizada%con%los%nuevos%bloques%
%%%
semnLcos%del%HTML5%quedara.%
%%
%%
%
%
%

+,CSS,

Estructura%HTML%
La%estructura%HTML,,debe%realizarse%en%el%senLdo%lgico%de%lectura%
%%%
del%documento,%cuando%la%pgina%se%vea%sin%aplicar%los%esLlos%no%
%%
%
pierda%su%signicado.%
%
%
%
%
%
%
%
%

Herencia%CSS%
Para%entender%como%funcionan%los%selectores%y%la%herencia%CSS%es%
%%%
necesario%entender%qu%es%el%rbol%del%documento.%
%%
%%
%
%
%

Herencia%CSS%
el%rbol%del%documento%del%ejemplo%anterior:%
%%%
%%%
%%
html%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%

arLcle%

li%

li%

li%

a%

a%

a%

footer%

Herencia%CSS%
Ancestor%es%un%elemento%conectado%pero%ms%arriba%en%la%
%%%
estructura%del%documento%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Ancestor%

header%

nav%

arLcle%

h1%

ul%

descendientes%

li%

li%

li,

a%

a%

a%

footer%

Herencia%CSS%
Descendientes%son%los%elementos%conectados%pero%ms%abajo%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Ancestor%

header%

nav%

arLcle%

h1%

ul%

descendientes%

li%

li%

li,

a%

a%

a%

footer%

Herencia%CSS%
Parent%es%el%elemento%conectado%y%directamente%sobre%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%

descendientes%

arLcle%
Parent%

li%

li%

li,

a%

a%

a%

footer%

Herencia%CSS%
Child%es%el%elemento%conectado%y%directamente%debajo%de%un%
%%%
elemento%en%la%estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%

Child%

header%

nav%

arLcle%

h1%

ul%
li%

li%

li%

a%

a%

a%

footer%

Herencia%CSS%
Siblings,son%los%elementos%que%comparten%un%mismo%padre%en%la%
%%%
estructura%del%documento.%
%%
%%
html%
%
%
%
%

head%

body%

Ltle%

div%.caja%
header%

nav%

h1%

ul%

Siblings%

li%

li%

arLcle%
Parent%
li,

footer%

Herencia%CSS%
Si%denimos%un%esLlo%en%el%body,%todos%los%elementos%situados%
%%%
debajo%en%el%rbol%del%documento,%heredan%esa%propiedad.%
%%
%%
%
%
%
%
%
%
%
%
%

CSS%
Prioridad%

Selectores%CSS%
El%selector%aplica%a%todos%los%elementos%HTML%de%la%pgina%con%esa%
%%%
eLqueta%(p).%
%%
%%
%
El%selector,mlQple%de%CSS,%incluye%varios%selectores%separados%por%
coma%(,),%aplicando%el%esLlo%a%cualquier%elemento%con%alguna%de%las%
marcas%incluidas:%h1,,h2,,h3.%
%
%
El%selector%puede%incluir%eLquetas%separadas,solo,por,espacios.%El%
selector%aplicar%solo%a%elementos%con%la%lLma%marca%(ul),%con%los%
anteriores%como%ancestros,%es%decir%.caja%deber%ser%ancestro%de%
nav%y%nav%deber%ser%ancestro%de%ul.%
,,
%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%0%ID%
%
C%=%0%clases%
D%=%1%elemento%
%
%
%
%

Puntuacin%=%0,0,0,1%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesivamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%0%ID%
%
C%=%0%clases%
D%=%2%marcas%
%
%
%
%

Puntuacin%=%0,0,0,2%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesivamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%1%ID%
%
C%=%1%clase%
D%=%1%elemento%
%
%
%
%

Puntuacin%=%0,1,1,1%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesivamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%
%

Prioridad%CSS%
Cuando%dos%declaraciones%afectan%a%un%mismo%elemento.%cual%de%
%%%
ellas%se%interpreta%en%el%navegador%como%ms%importante?%
%%
%%
%
A%=%0%esLlos%en%lnea%
%
B%=%1%ID%
%
C%=%0%clases%
D%=%2%marcas%
%
%
%
%

Puntuacin%=%0,1,0,2%
%

Hay%que%calcular%la%tupla%(A,%B,%C,%D)%ganadora%de%
todas%las%reglas%CSS%que%compiten.%A%Lene%
mximo%peso%y%D%mnimo.%Si%hay%empate%en%A,%se%
mira%B%y%as%sucesivamente.%
%
A%=%esLlo%en%lnea%
B%=%nmero%de%IDs%
C%=%nmero%de%clases%
D%=%nmero%de%marcas%HTML%

Prioridad%CSS%
La%ganadora%es,%#caja%.cabecera%h1%=%0,1,1,1
%
%%%
% %%
%%

Ganadora:%
%
A%=%0%esLlos%en%lnea%
B%=%1%ID%
C%=%1%clase%
D%=%1%elemento%
Puntuacin%=%0,1,1,1%

Prioridad%CSS%
Cuando%dos%declaraciones%Lenen%el%mismo%valor:%
%%%
Ser%la%lLma%especicada%
%%
%%
%
%
%
%

Selectores%CSS%
Selector%universal,
%%%
*,%%
%
Afecta%a%todos%los%elementos.%
%
%
%
%
%
%

Reglas%CSS%
Modicacin%de%esLlos,%por%el%usuario%en%el%navegador:%Lpogradas%
%%%
%%%
%%
%
%

Prioridad%CSS%
Reglas%adicionales%de%prioridad%de%las%declaraciones%CSS%ordenadas%
%%%
de%menor%a%mayor:%
%%
%%
,CSS%por,defecto,del,Navegador%(navegador)%
%CSS%en%preferencias,de,usuario,del,navegador%(usuario),
%CSS%en%pgina,HTML,o,script,CSS%(diseador),
,CSS%en%pgina,HTML,o,script,CSS%con%!important%(diseador),%p.%e.%
body,{color:blue,!important;},%
%CSS%en%preferencias,de,usuario,del,navegador%con%!important%
(usuario),%p.%e.%body,{color:blue,!important;},%
%
%
%
%

Recursos%CSS%
Kseso,CSS:,CSS%bsico:%Cascada,%especicidad%y%herencia%
%%%
hBp://ksesocss.blogspot.com/2012/05/cssEbasicoEcascadaEespecicidadEy.html%
%%
%%
Dev.Opera:,Recorriendo%el%rbol%DOM%
hBp://dev.opera.com/arLcles/view/traversingEtheEdomEes/%
%
LIBROS,WEB:,rbol%de%nodo%
hBp://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html%
%
UOC:,Herencia%y%cascada%
hBp://mosaic.uoc.edu/ac/le/es/m6/ud2/%
%
LIBROSWEB:,Colisiones%de%esLlos%
hBp://librosweb.es/css/capitulo_2/colisiones_de_esLlos.html%
%
CSS:,Specity%Wars%
hBp://www.stuandnonsense.co.uk/archives/css_specicity_wars.html%
%
%

Recursos%HTML%
Bruce,Lawson:,HTML5%arLcles%and%secLons:%whats%the%dierence?%
%%%
hBp://www.brucelawson.co.uk/2010/html5EarLclesEandEsecLonsE
%%
%
whatsEtheEdierence/%
%
html5,Doctor:,The%arLcle%element%
hBp://html5doctor.com/theEarLcleEelement/%
%
HTM5,paso,a,paso:,div,%secLon%y%arLcle%
hBp://html5pasoapaso.blogspot.com.es/2011/08/divEsecLonEyE
arLcle.html%
%
ondho:,HTML5%(discusiones%entre%arLcle%y%secLon)%
hBp://www.ondho.com/html5EdiscusionesEentreEarLcleEyEsecLon/%
%
%
%

HTML/CSS%
Navegacin%

Navegacin%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.%%
%
%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%HTML%
Men%verLcal,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%CSS%
Los%valores%CSS%por%defecto%de%la%lista%y%del%enlace,%deben%ser%
%%%
ajustados%a%nuestras%necesidades.,
%%
%
%
%
%
%
%
%
%
%
%
%
%

Ejemplo%men%verLcal%
myspace%

Navegacin%HTML%
Men%horizontal,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Navegacin%CSS%
CSS%men%horizontal.,
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%

% Ejemplo%men%horizontal%
BBC%

Mens%Firefox%OS%
Los%mens%recomendados%para%las%aplicaciones%en%Firefox%OS%%
%%%
%%

%%
%
%
%
%
%
%
%
%
%
%
%

Firefox%OS%App%BuBons:%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/buBons/%
%

Iconos%para%aplicaciones%Firefox%OS%
Un%icono%para%una%aplicacin%Firefox%OS%es%una%imagen%de%pxeles%
%%%
60x60%pxels%en%formato%PNG%de%24%bits.%
%%

%
%
%
%
%
%
%
%
%
%
%
%

Hay%otras%tamaos%%
necesarios%para%otros%
disposiLvos:%
16px,%32px,%48px,%
60px,%128px,%256px.%

Guas%de%diseo%de%mozilla,,para%descargar%las%planLllas%de%los%iconos%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/icons/%

Recursos%navegacin%CSS%
Cristalab:,Mens%verLcales%
%%%
hBp://www.cristalab.com/cursoEhtml/menusEverLcales/%
%%
%%
CSS,Blog:,Crear%un%men%horizontal%simple%con%CSS%
hBp://www.cssblog.es/crearEunEmenuEhorizontalEsimpleEconEcss/%
%
w3schools:,men%horizontal%
hBp://www.w3schools.com/css/tryit.asp?lename=trycss_oat5%
%
%
%
%
%
%
%

HTML/CSS%
Texto%

Texto%CSS%
Las%marcas%que%permiten%denir%las%propiedades%y%aspectos%
%%%
visuales%de%una%fuente.%
%%
%
fontbfamily%es%la%propiedad%que%permite%denir%la%fuente%para%un%
elemento.%
P {
font-family: "Times New Roman, Georgia,
Serif; }
%
%
%
%
%
%

hBp://www.w3.org/TR/CSS2/fonts.html%%

Texto%CSS%
Las%propuestas%de%familia%Lpogrca%terminan%con%una%familia,
%%%
genrica,alternaQva.%
%%
% P {
font-family:"Times New
Roman",Georgia,Serif; }
%
Valores%de%las%familias%genricas%son:%%
'serif'%(Ej.:%Times)%
'sansEserif'%(Ej.:%HelveLca)%
'cursive'%(Ej.:%%ZapfEChancery)%
'fantasy'%(Ej.:%%Western)%
'monospace'%(Ej.:%Courier)%
%
%
%hBp://www.w3.org/TR/CSS2/fonts.html#genericEfontEfamilies%
%

Texto%CSS%
Familia,Qpogrca.%Es%una%serie%de%Lpos%clasicables,%por%su%peso,%
%%%
inclinacin,%proporcin,%espaciado,%ausencia%o%presencia%de%
%%
%
serifas%En%Lpograda%digital,%en%los%formatos%actuales,%una%serie%
completa%esta%incluida%en%un%nico%archivo,%que%conLene%los%Lpos%
independientes.%
%
%
%
%
%
%
%
%
%

Texto%CSS%
Fontbweight.%Especica%el%peso%de%la%letra,%segn%los%siguientes%
%%%
valores.%
%%
normal%|%bold%|%bolder%|%lighter%|%100%|%200%|%300%|%400%|%500%|%600%|%700%|%800%|%900%|%inherit%
%

%
%
%
%
%
%
%
%
%
%
%

Texto%CSS%
fontbstrech,,Especica%el%ancho%de%la%fuente,%la%mayora%de%los%
%%%
navegadores%no%soportan%esta%propiedad%
%%

%
normal%|%ultraEcondensed%|%extraEcondensed%|%condensed%|%semiEcondensed%|%semiEexpanded%|%
expanded%|%extraEexpanded%|%ultraEexpanded%|%inherit%

%
%
%
%
Fontbstyle.%Especica%el%esLlo%de%la%fuente.%Normal,%condensada...%
normal%|%italic%|%oblique%|%inherit%

%
%
%
%
%
%hBps://developer.mozilla.org/enEUS/docs/Web/CSS/fontEstretch%

Texto%CSS%
fontbsize,,Especica%el%tamao%de%la%fuente%
%%%

<absoluteEsize>%|%<relaLveEsize>%|%<length>%|%<percentage>%|%
inherit%
%%
%
Tamao%predeterminado%para%el%texto%es%de%
16px%(16px%=%1em).%

<absolutebsize>,Los%valores%posibles%son:%%

[%xxEsmall%|%xEsmall%|%small%|%medium%|%large%|%xElarge%|%xxElarge%]%

<relaQvebsize>,,Un%valor%relaLvo%al%heredado,%mayor%o%menor:%
%[%larger%|%smaller%]%

<length>,es%un%valor%absoluto%del%tamao%generalmente%en%px%
<percentage>,representa%un%valor%en%funcin%al%valor%heredado.%
%
xxbsmall% xbsmall%
small%
medium%
large%
xblarge%
xxblarge%
,%
%
% scaling,
3/5%
3/4%
8/9%
1%
6/5%
3/2%
2/1%
3/1%
factor%
%
h6%
%
h5%
h4%
h3%
h2%
h1%
%
% XHTML,
headings%
%
% hBps://developer.mozilla.org/enEUS/docs/Web/CSS/fontEsize%

Texto%CSS%
fontbvariant,Especica%la%variante%de%la%fuente.%%
%%%
Valor:%%normal%|%smallEcaps%
%%
%
es%la%versin%versalita%de%una%fuente%
%
%
%
%
%
%
%
%
%

Texto%CSS%
linebheight,%dene%el%interlineado%del%texto%
%%%
normal%|%<nmero>%|%<medida>%|%<porcentaje>%|%inherit%
%%
%
El%nmero%que%mulLplicado%el%tamao%de%la%fuente%establece%el%
alto%de%la%lnea%
Medida,%es%la%altura%de%la%lnea%como%un%valor%jo%en%px,%pt%
El%porcentaje%del%alto%de%la%lnea%en%funcin%del%tamao%de%la%
fuente%
hBp://www.w3schools.com/cssref/playit.asp?
lename=playcss_lineEheight&preval=25px%
%
%
%
%
%
%
%

@font%CSS%
Formatos,@fontbface
%
%%%
%%%
%% String%
% "wo"%
% "truetype"%
% "opentype"%

Font,Format%

Common,extensions%

WOFF%(Web%Open%
Font%Format)%

.wo%

TrueType%
OpenType%

.%
.,%.o%

opentype"%

Embedded%OpenType%

.eot%

"svg"%

SVG%Font%

.svg,%.svgz%

% "embeddedb

@font%CSS%
CompaQbilidad,%Depende%del%navegador%y%del%sistema%operaLvo,%
%%%
La%mayora%de%navegadores%y%SO.%
%%
%%
WOFF%%Web%Open%Font%Format%
El%Web%Open%Font%Format%(WOFF)%es%un%formato%de%Lpo%de%letra%
para%usarse%en%pginas%web.%Fue%desarrollado%por%la%Fundacin%
Mozilla,%Opera%Soware%y%Microso,%y%est%en%el%proceso%de%
normalizacin%por%el%W3C%y%converLrse%en%un%estndar.%%
%
EOT%Embedded%OpenType%
Embedded%OpenType%(%EOT%)%estas%fuentes%son%una%forma%
compacta%de%OpenType%para%su%uso%como%fuentes%incrustadas%en%
las%pginas%web%y%a%su%vez%protegen%los%derechos%de%autor.%%
hBp://caniuse.com/fonace%

@font%CSS%
SVG%Scalable%Vector%Graphics%%
%%%
SVG%es%una%especicacin%para%describir%grcos%vectoriales%
%%
%
bidimensionales,%estLco%o%animado%y%fue%creado%como%alternaLva%
de%formato%abierto%a%Flash.%se%emplea%como%formato%Lpogrco%en%
la%web%para%disposiLvos%iOS%(iPad,%iPhone%y%iPod)%
%
TrueType,,
TrueType%es%un%formato%estndar%de%Lpos%de%letra%escalables%
desarrollado%inicialmente%por%Apple%a%nales%de%la%dcada%de%los%
ochenta.%Es%compaLble%con%Firefox%3.5+%,%Safari%3.1+,%Chrome%4+%y%
Opera%10+.%
%
%ConverLr%fuentes%
%hBp://www.fontsquirrel.com/tools/webfontEgenerator%
%
%

@font%CSS%
@fontbface,b,Permite%vincular%fuentes%sin%necesidad%de%que%el%cliente%las%tenga%instaladas%
%%%
en%su%ordenador.%%
%%
fontEfamily%%
%
Valor:%<familyEname>%%
Src,,
[%<uri>%[format(<string>%[,%<string>]*)]%|%<fontEfaceEname>%]%[,%<uri>%[format(<string>%[,%
<string>]*)]%|%<fontEfaceEname>%]*%%
%
@font-face {
font-family: FiraMono;
src: url(FiraMono-Regular.woff) format("woff"),
url(FiraMono-Regular.eot) format("embedded-opentype");
}
p {
font-family: FiraMono, serif;
}

hBp://www.w3.org/TR/css3Efonts/#fontEfaceErule%
hBps://www.mozilla.org/enEUS/styleguide/products/refoxEos/typeface/%

Tipograda%Firefox%OS%
Fira,Sans,para,Firefox,OS,
Firefox%OS%uLliza%Fira%Sans,%una%fuente%Lpogrca%especca%en%diferentes%cuerpos%y%
%%%
pesos.%Diseada%por%Erik%Spiekermann%y%Ralph%de%Carois%para%Firefox%OS.%%
%%
%%

Descargar%la%fuente%y%conocer%las%recomendaciones%de%uso%en:%
hBp://www.mozilla.org/enEUS/styleguide/products/refoxEos/typeface/%
%

@font%CSS%
@fontbface,embedding,
%%%
Es%posible%el%uso%de%fuentes%alojadas%en%servidores%externo%
%%
%%
Google,Fonts,
En%la%cabecera%%
<link href='http://fonts.googleapis.com/
css?family=Caesar+Dressing' rel='stylesheet' type='text/
css'>

En%el%esLlo%
%
p {

font-family: 'Caesar Dressing', cursive;

}

%
%hBp://webfonts.info/fontsEavailableEfontEfaceEembedding%
%

Recursos%CSS%
%%%%W3C:,CSS%Fonts%Module%Level%3%
%%%hBp://www.w3.org/TR/2013/CREcssEfontsE3E20131003/%
%% %
MDN:,@fontEface%
% hBps://developer.mozilla.org/es/docs/CSS/@fontEface%
%,
% FONT,SQUIREL,

% hBp://www.fontsquirrel.com/fonace/generator%
%
Google,FONT,
hBp://www.google.com/webfonts%
%
Typekit,
hBps://typekit.com/%
%
Red,Team,Design:,Google%Font%API%and%Typekit%soluLons%VS%@fontEface%
hBp://www.redEteamEdesign.com/googleEfontEapiEandEtypekitEsoluLonsEvsEfontEface%
%
%
%
%

Publicar en la nube (Google Drive)

Juan Quemada, DIT, UPM

Recursos pblicos y de acceso restringido

Una pgina Web o un recurso en Internet
!

puede ser pblico o de acceso restringido

!
Recurso pblico
!

Para ser accedido en modo lectura por cualquiera en Internet

" Una pgina Web, una foto, una pelicula, etc.

!
Recurso de acceso restringido
!

Utilizado en aplicaciones Web, como Google Drive

" Puede ser creado, editado o borrado, pero solo por usuarios autorizados

Autorizacin: se concede si el usuario se autentica y tiene derecho

" Autenticacin: por usuario y contrasea, eDNI, huella dactilar, ....

Juan Quemada, DIT, UPM

Publicacin en la nube: Google Drive

Se debe utilizar una cuenta de Google
!

Para publicar pginas Web y Apps en Google Drive

" http://drive.google.com

!
Google Drive permite crear directorios con acceso pblico
!

El directorio se crea y edita con acceso restringido

" Pero el directorio y sus recursos tienen adems acceso pblico
!

Con otro URL que da acceso en modo solo lectura

!
Este segundo URL pblico permite
!

Probar que los ejercicios funcionan en Internet

" accediendo a ellos desde el PC, mviles y otros terminales

Entregar los ejercicios funcionando, para que otros los correjan

Juan Quemada, DIT, UPM

Crear un directorio pblico I

Seguir pasos 1 y 2 para crear un directorio en Google Drive
!

Con Paso 0. Modo lnea se puede hacer lo mismo

1. clicar para crear nueva carpeta

0. Modo
cuadricula
2. Escribir nombre
y clicar para crear
la carpeta

Juan Quemada, DIT, UPM

Crear un directorio pblico II

Seguir pasos 1, 2 y 3 para acceder al cambio de permisos

2. clicar para
compartir (share)

3. clicar para
cambiar Change)

1. clicar para seleccionar

Juan Quemada, DIT, UPM

Crear un directorio pblico III

Seguir pasos 1 y 2 para finalizar el cambio de permisos
!

La carpeta Ejercicios ya es pblica en Internet

1. clicar para seleccionar

(Public on the Web)

2. clicar para guardar seleccin

Juan Quemada, DIT, UPM

Acceso pblico con nuevo URL

Todos los accesos anteriores estn restringidos
!

al usuario que es dueo del disco (cuenta) de Google Drive

" Que solo puede acceder si est autenticado

!
Estos accesos utilizan URLs de acceso restringido, como
!

https://drive.google.com/?tab=Xo&authuser=0#/0B48KCWfVwCIEcEdDcEVSTS1MS00

!
Carpetas y ficheros pblicos poseen adems un URL pblico
!

que permite acceder a terceros, pero solo en modo solo lectura

" https://googledrive.com/host/0B48KCWfVwCIEcEdDcEVSTS1MS00/

El URL pblico utiliza el protocolo seguro HTTPS

" Firefox bloquear los accesos a recursos por HTTP de algunos ejemplos publicados
" Ver https://developer.mozilla.org/en-US/docs/Security/MixedContent

Juan Quemada, DIT, UPM

Encontrar URL de acceso pblico

Seguiendo los pasos 1, 2 y 3 accedemos a los detalles del directorio
!

Tal y como se muestra aqu

2. desplegar
funciones
adicionales
1. seleccionar

3. clicar para ver

mas detalles

Juan Quemada, DIT, UPM

URL de acceso pblico

Los detalles (details) del recurso
!

muestran el URL pblico de acceso en modo lectura

URL privado

Informacin sobre: DETAILS

URL pblico
al clicar accedemos
a carpeta pblica

Juan Quemada, DIT, UPM

Acceso autenticado:
lectura, modificacin, borrado, ..

URL privado:

https://drive.google.com/?tab=Xo&authuser=0#folders/0B48KCWfVwCIEcEdDcEVSTS1MS00

Acceso pblico:
solo lectura

URL pblico:
https://googledrive.com/host/0B48KCWfVwCIEcEdDcEVSTS1MS00/
Juan Quemada, DIT, UPM

10

Entrega de ejercicios en Google

Drive

Juan Quemada, DIT, UPM

11

Publicacin de ejercicios
El directorio pblico creado para esta asignatura
!

ser utilizado para publicar el ejercicio de la entrega semanal

!
El ejercicio deber subirse al directorio pblico
!

Y el URL pblico deber incluirse en la entrega en la platforma

!
El URL pblico debe utlizarse tambin para
!

Probar y ver las pginas y aplicaciones Web

" En nuestro PC, telfonos mviles y tabletas

!
Se recomienda guardar el URL a la carpeta pblica
!

En los favoritos del navegador utilizado: PC, mvil, tableta, ...

" Para probar los ejercicos realizados en todos los dispositivos con facilidad

Juan Quemada, DIT, UPM

12

Subir un ejercicio al directorio I

Seleccionar Files... para subir fichero
!

Con Paso 0. Modo lnea se puede hacer lo mismo

1. Desplegar y clicar Files para subir fichero

0. En modo
cuadricula

Juan Quemada, DIT, UPM

13

Subir un ejercicio al directorio II

Seguir pasos 1 y 2 para subir fichero

1. clicar para seleccionar

fichero

Juan Quemada, DIT, UPM

2. clicar para subir fichero

14

Subir un ejercicio al directorio III

Confirmar que el fichero se sube a un directorio pblico
!

El fichero tambin ser pblico y ser visible como pagina Web en Internet

Clicar para confirmar que el fichero se sube y se comparte

15
Juan Quemada, DIT, UPM

Encontrar el URL pblico I

El fichero T2.2_lista.html ya esta en directorio pblico
!

Pasos 1, 2 y 3 nos llevan a detalles del recurso (ver transp. siguiente)

1. seleccionar

2. desplegar
funciones
adicionales
3. clicar para ver
mas detalles

Juan Quemada, DIT, UPM

16

Encontrar el URL pblico II

Haciendo clic en el URL pblico
!

Vemos T2_3-2_lista.html como pgina Web

URL pblico
al clicar vemos
fichero en
navegador

Fichero lista.html

Juan Quemada, DIT, UPM

17