P1ML

LsLrucLura
LsLrucLura P1ML



Los elemenLos hLml pueden vlsuallzarse como bloque o como en llnea.
Los elemenLos bloques b|ock ocupan Lodo el ancho de la pglna y fuerzan a una
nueva llnea anLes y despues.

<article> <aside> <canvas> <div> <footer> <h1>, <h2>,
<h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section>
<ul>


Los elemenLos en llnea |n||ne slo ocupan el ancho necesarlo y no fuerzan
nuevas llneas.

<em> <a> <br> <img> <span> <button> <input> <select>
<textarea>








hups://developer.mozllla.org/en-uS/docs/P1ML/8lock-level_elemenLs
hups://developer.mozllla.org/en-uS/docs/P1ML/lnllne_elemenLs
LsLrucLura P1ML



DIV
Ll elemenLo <d|v> es un elemenLo de bloque que se emplea
conLener en su lnLerlor oLros elemenLos n1ML.

Ll elemenLo <d|v> no uene nlngun slgnlcado, es semnucamenLe
neuLro.

Lmpleando CSS, el elemenLo <d|v> se puede uullzar para
esLrucLurar el documenLo en grandes bloques de conLenldo.

Ll d|v es la propuesLa para susuLulr a los elemenLos <tab|e> para el
dlseno. Ll propslLo del elemenLo <tab|e> es para mosLrar daLos
Labulados.








<dlv>



<d|v> dene bloque un generlco empleado para formaLear con CSS.
<d|v |d="ca[a" c|ass="cabecera"> ...... <]d|v>

ALrlbuLo ID: ldenuca unlvocamenLe un elemenLo P1ML en una
pglna. un elemenLo P1ML solo debe Lener un aLrlbuLo ID y esLe
debe ser unlco en la pglna. Ll selecLor CSS #ca[a se reere al
elemenLo con aLrlbuLo |d="ca[a, como en #ca[a {co|or:b|ue}

ALrlbuLo CLASS: dene una clase de elemenLos P1ML. un elemenLo
puede Lener varlos aLrlbuLos CLASS. Ll selecLor CSS .cabecera se
reere a Lodos los elemenLo de la clase cabecera (que llevan el
aLrlbuLo c|ass="cabecera"), como en .cabecera {co|or:red}













LsLrucLura P1ML



SAN
Ll elemenLo n1ML <span> es un elemenLo en llnea que se emplea
como un conLenedor de LexLo.

Ll elemenLo <span> no uene nlngun slgnlcado especlal, es
semnucamenLe neuLro. .

Cuando se uullza [unLo con CSS, el elemenLo <span> se puede
uullzar para esLablecer los aLrlbuLos de esulo para las parLes del
LexLo medlanLe un ldenucador ID o una clase c|ass.








CSS



Los elemenLos <DIV> y <SAN> se emplean para denlr normas de
esulo ms especlcas.
Ll aLrlbuLo |d se emplea para ldenucar un elemenLo unlco.
Ll aLrlbuLo c|ass cuando hay ms de un elemenLo que manuenen
una relacln slgnlcauva, puede ser comparur el esulo.





LsLrucLura P1ML



Ln n1MLS, los bloques son susuLuldos por bloques semnucos que
muesLran slgnlcado por sl mlsmos.






<header>
<nav>
<secuon>
<arucle>

<aslde>
<fooLer>
LsLrucLura P1ML



una pglna de esLe upo reallzada con <d|v> quedarla de la
slgulenLe manera.
Ls hablLual una ca[a conLenedor para lmpedlr que ocupe Loda la pglna cuando la venLana
de la navegador es muy grande o conLrolar la dlsposlcln de los elemenLos cuando es muy
pequena.






+ CSS
LsLrucLura P1ML



una pglna de esLe upo reallzada con los nuevos bloques
semnucos del n1MLS quedarla.




+ CSS
LsLrucLura P1ML



La esLrucLura n1ML, debe reallzarse en el senudo lglco de lecLura
del documenLo, cuando la pglna se vea sln apllcar los esulos no
plerda su slgnlcado.








Perencla CSS



ara enLender como funclonan los selecLores y la herencla CSS es
necesarlo enLender que es el rbol del documenLo.




Perencla CSS



el rbol del documenLo del e[emplo anLerlor:





hLml
head body
uLle
ul
nav header
h1
arucle fooLer
dlv .ca[a
a a a
ll ll ll
Perencla CSS



Ancestor es un elemenLo conecLado pero ms arrlba en la
esLrucLura del documenLo





AncesLor
descendlenLes
hLml
head body
uLle
ul
nav header
h1
arucle fooLer
dlv .ca[a
a a a
ll ll ||
Perencla CSS



Descend|entes son los elemenLos conecLados pero ms aba[o en la
esLrucLura del documenLo.





AncesLor
descendlenLes
hLml
head body
uLle
ul
nav header
h1
arucle fooLer
dlv .ca[a
a a a
ll ll ||
Perencla CSS



arent es el elemenLo conecLado y dlrecLamenLe sobre un
elemenLo en la esLrucLura del documenLo.





arenL
descendlenLes
hLml
head body
uLle
ul
nav header
h1
arucle fooLer
dlv .ca[a
a a a
ll ll ||
Perencla CSS



Ch||d es el elemenLo conecLado y dlrecLamenLe deba[o de un
elemenLo en la esLrucLura del documenLo.





Chlld
hLml
head body
uLle
ul
nav header
h1
arucle fooLer
dlv .ca[a
a a a
ll ll ll
Perencla CSS



S|b||ngs son los elemenLos que comparLen un mlsmo padre en la
esLrucLura del documenLo.





hLml
head body
uLle
ll ll ||
ul
nav header
h1
arucle fooLer
dlv .ca[a
arenL
Slbllngs
Perencla CSS



Sl denlmos un esulo en el body, Lodos los elemenLos slLuados
deba[o en el rbol del documenLo, heredan esa propledad.










CSS
rlorldad
SelecLores CSS



Ll selecLor apllca a Lodos los elemenLos P1ML de la pglna con esa
euqueLa (p).


Ll se|ector m|np|e de CSS, lncluye varlos selecLores separados por
coma (,), apllcando el esulo a cualquler elemenLo con alguna de las
marcas lncluldas: h1, h2, h3.


Ll selecLor puede lnclulr euqueLas separadas so|o por espac|os. Ll
selecLor apllcar solo a elemenLos con la uluma marca (ul), con los
anLerlores como ancesLros, es declr .ca[a deber ser ancesLro de
nav y nav deber ser ancesLro de u|.








rlorldad CSS



Cuando dos declaraclones afecLan a un mlsmo elemenLo. cual de
ellas se lnLerpreLa en el navegador como ms lmporLanLe?








Pay que calcular la Lupla (A, 8, C, u) ganadora de
Lodas las reglas CSS que complLen. A uene
mxlmo peso y u mlnlmo. Sl hay empaLe en A, se
mlra 8 y asl suceslvamenLe.

A = esulo en llnea
8 = numero de lus
C = numero de clases
u = numero de marcas P1ML

A = 0 esulos en llnea
8 = 0 lu
C = 0 clases
u = 1 elemenLo
unLuacln = 0,0,0,1

rlorldad CSS



Cuando dos declaraclones afecLan a un mlsmo elemenLo. cual de
ellas se lnLerpreLa en el navegador como ms lmporLanLe?








A = 0 esulos en llnea
8 = 0 lu
C = 0 clases
u = 2 marcas
unLuacln = 0,0,0,2

Pay que calcular la Lupla (A, 8, C, u) ganadora de
Lodas las reglas CSS que complLen. A uene
mxlmo peso y u mlnlmo. Sl hay empaLe en A, se
mlra 8 y asl suceslvamenLe.

A = esulo en llnea
8 = numero de lus
C = numero de clases
u = numero de marcas P1ML
rlorldad CSS



Cuando dos declaraclones afecLan a un mlsmo elemenLo. cual de
ellas se lnLerpreLa en el navegador como ms lmporLanLe?








A = 0 esulos en llnea
8 = 1 lu
C = 1 clase
u = 1 elemenLo
unLuacln = 0,1,1,1

Pay que calcular la Lupla (A, 8, C, u) ganadora de
Lodas las reglas CSS que complLen. A uene
mxlmo peso y u mlnlmo. Sl hay empaLe en A, se
mlra 8 y asl suceslvamenLe.

A = esulo en llnea
8 = numero de lus
C = numero de clases
u = numero de marcas P1ML

rlorldad CSS



Cuando dos declaraclones afecLan a un mlsmo elemenLo. cual de
ellas se lnLerpreLa en el navegador como ms lmporLanLe?








A = 0 esulos en llnea
8 = 1 lu
C = 0 clases
u = 2 marcas
unLuacln = 0,1,0,2

Pay que calcular la Lupla (A, 8, C, u) ganadora de
Lodas las reglas CSS que complLen. A uene
mxlmo peso y u mlnlmo. Sl hay empaLe en A, se
mlra 8 y asl suceslvamenLe.

A = esulo en llnea
8 = numero de lus
C = numero de clases
u = numero de marcas P1ML
rlorldad CSS



La ganadora es, #ca[a .cabecera h1 = 0,1,1,1


Canadora:

A = 0 esulos en llnea
8 = 1 lu
C = 1 clase
u = 1 elemenLo
unLuacln = 0,1,1,1
rlorldad CSS



Cuando dos declaraclones uenen el mlsmo valor:
Ser la uluma especlcada





SelecLores CSS



SelecLor un|versa|
*
AfecLa a Lodos los elemenLos.






8eglas CSS



Modlcacln de esulos, por el usuarlo en el navegador: upogranas




rlorldad CSS



8eglas adlclonales de prlorldad de las declaraclones CSS ordenadas
de menor a mayor:

CSS por defecto de| Navegador (navegador)
CSS en preferenc|as de usuar|o de| navegador (usuarlo)
CSS en pg|na n1ML o scr|pt CSS (dlsenador)
CSS en pg|na n1ML o scr|pt CSS con !lmporLanL (dlsenador), p. e.
body {co|or:b|ue !lmporLanL,}
CSS en preferenc|as de usuar|o de| navegador con !lmporLanL
(usuarlo), p. e. body {co|or:b|ue !lmporLanL,}




8ecursos CSS



kseso CSS: CSS bslco: Cascada, especlcldad y herencla
hup://ksesocss.blogspoL.com/2012/03/css-baslco-cascada-especlcldad-y.hLml

Dev.Cpera: 8ecorrlendo el rbol uCM
hup://dev.opera.com/arucles/vlew/Lraverslng-Lhe-dom-es/

LI8kCS WL8: rbol de nodo
hup://llbrosweb.es/[avascrlpL/caplLulo_3/arbol_de_nodos.hLml

UCC: Perencla y cascada
hup://mosalc.uoc.edu/ac/le/es/m6/ud2/

LI8kCSWL8: Collslones de esulos
hup://llbrosweb.es/css/caplLulo_2/collslones_de_esulos.hLml

CSS: SpeclLy Wars
hup://www.sLuandnonsense.co.uk/archlves/css_speclclLy_wars.hLml










8ecursos P1ML



8ruce Lawson: P1ML3 arucles and secuons: whaL's Lhe dlerence?
hup://www.brucelawson.co.uk/2010/hLml3-arucles-and-secuons-
whaLs-Lhe-dlerence/

htm|S Doctor: 1he arucle elemenL
hup://hLml3docLor.com/Lhe-arucle-elemenL/

n1MS paso a paso: dlv, secuon y arucle
hup://hLml3pasoapaso.blogspoL.com.es/2011/08/dlv-secuon-y-
arucle.hLml

ondho: P1ML3 (dlscuslones enLre arucle y secuon)
hup://www.ondho.com/hLml3-dlscuslones-enLre-arucle-y-secuon/








P1ML/CSS
navegacln
navegacln P1ML



un men es una llsLa de enlaces. Se recomlenda usar las marcas de
llsLa <u|> <||> y el enlace <a>, que es lo esLablecldo por las normas
de acceslbllldad.













navegacln P1ML



Men verucal













navegacln CSS



Los valores CSS por defecLo de la llsLa y del enlace, deben ser
a[usLados a nuesLras necesldades.













L[emplo menu verucal
myspace
navegacln P1ML



Men horlzonLal













navegacln CSS



CSS menu horlzonLal.













L[emplo menu horlzonLal
88C
Menus llrefox CS



Los menus recomendados para las apllcaclones en llrefox CS













llrefox CS App 8uuons:
hup://www.mozllla.org/en-uS/sLylegulde/producLs/refox-os/buuons/

lconos para apllcaclones llrefox CS



un lcono para una apllcacln llrefox CS es una lmagen de plxeles
60x60 plxels en formaLo nC de 24 blLs.













Culas de dlseno de moz|||a, para descargar las planullas de los lconos
hup://www.mozllla.org/en-uS/sLylegulde/producLs/refox-os/lcons/
Pay oLras Lamanos
necesarlos para oLros
dlsposluvos:
16px, 32px, 48px,
60px, 128px, 236px.
8ecursos navegacln CSS



Cr|sta|ab: Menus verucales
hup://www.crlsLalab.com/curso-hLml/menus-verucales/

CSS 8|og: Crear un menu horlzonLal slmple con CSS
hup://www.cssblog.es/crear-un-menu-horlzonLal-slmple-con-css/

w3schoo|s: menu horlzonLal
hup://www.w3schools.com/css/LrylL.asp?lename=Lrycss_oaL3













P1ML/CSS
1exLo
1exLo CSS



Las marcas que permlLen denlr las propledades y aspecLos
vlsuales de una fuenLe.
font-fam||y es la propledad que permlLe denlr la fuenLe para un
elemenLo.
P {
font-family: "Times New Roman, Georgia,
Serif; }






hup://www.w3.org/18/CSS2/fonLs.hLml
1exLo CSS



Las propuesLas de famllla upogrca Lermlnan con una fam|||a
genr|ca a|ternanva.
P {
font-family:"Times New
Roman",Georgia,Serif; }

valores de las famlllas generlcas son:
'serlf' (L[.: 1lmes)
'sans-serlf' (L[.: Pelveuca)
'curslve' (L[.: Zapf-Chancery)
'fanLasy' (L[.: WesLern)
'monospace' (L[.: Courler)





hup://www.w3.org/18/CSS2/fonLs.hLml#generlc-fonL-famllles
1exLo CSS



Iam|||a npogrhca. Ls una serle de upos claslcables, por su peso,
lncllnacln, proporcln, espaclado, ausencla o presencla de
serlfas. Ln upograna dlglLal, en los formaLos acLuales, una serle
compleLa esLa lnclulda en un unlco archlvo, que conuene los upos
lndependlenLes.









1exLo CSS



Iont-we|ght. Lspeclca el peso de la leLra, segun los slgulenLes
valores.
normal | bold | bolder | llghLer | 100 | 200 | 300 | 400 | 300 | 600 | 700 | 800 | 900 | lnherlL











1exLo CSS



font-strech Lspeclca el ancho de la fuenLe, la mayorla de los
navegadores no soporLan esLa propledad
normal | ulLra-condensed | exLra-condensed | condensed | seml-condensed | seml-expanded |
expanded | exLra-expanded | ulLra-expanded | lnherlL




Iont-sty|e. Lspeclca el esulo de la fuenLe. normal, condensada...
normal | lLallc | obllque | lnherlL







hups://developer.mozllla.org/en-uS/docs/Web/CSS/fonL-sLreLch
1exLo CSS



font-s|ze Lspeclca el Lamano de la fuenLe
<absoluLe-slze> | <relauve-slze> | <lengLh> | <percenLage> | lnherlL
1amano predeLermlnado para el LexLo es de 16px (16px = 1em).
<abso|ute-s|ze> Los valores poslbles son:
[ xx-small | x-small | small | medlum | large | x-large | xx-large ]
<re|anve-s|ze> un valor relauvo al heredado, mayor o menor:
[ larger | smaller ]
<|ength> es un valor absoluLo del Lamano generalmenLe en px
<percentage> represenLa un valor en funcln al valor heredado.







xx-sma|| x-sma|| sma|| med|um |arge x-|arge xx-|arge
sca||ng
factor
3/3 3/4 8/9 1 6/3 3/2 2/1 3/1
kn1ML
head|ngs
h6 h3 h4 h3 h2 h1
hups://developer.mozllla.org/en-uS/docs/Web/CSS/fonL-slze
1exLo CSS



font-var|ant Lspeclca la varlanLe de la fuenLe.
valor: normal | small-caps
es la versln versa||ta de una fuenLe









1exLo CSS



||ne-he|ght - dene el lnLerllneado del LexLo
normal | <numero> | <medlda> | <porcenLa[e> | lnherlL
Ll nmero que mulupllcado el Lamano de la fuenLe esLablece el
alLo de la llnea
Med|da, es la alLura de la llnea como un valor [o en px, pL.
Ll porcenta[e del alLo de la llnea en funcln del Lamano de la
fuenLe
hup://www.w3schools.com/cssref/playlL.asp?
lename=playcss_llne-helghL&preval=23px









fonL CSS



Iormatos Qfont-face






Str|ng Iont Iormat Common extens|ons
"wo"
WCll (Web Cpen
lonL lormaL)
.wo
"truetype" 1rue1ype .
"opentype" Cpen1ype ., .o
"embedded-
opentype"
Lmbedded Cpen1ype .eoL
"svg" SvC lonL .svg, .svgz
fonL CSS



Companb|||dad - uepende del navegador y del slsLema operauvo,
La mayorla de navegadores y SC.

WCII Web Cpen lonL lormaL
Ll Web Cpen lonL lormaL (WCll) es un formaLo de upo de leLra
para usarse en pglnas web. lue desarrollado por la lundacln
Mozllla, Cpera Soware y Mlcroso, y esL en el proceso de
normallzacln por el W3C y converurse en un esLndar.

LC1 Lmbedded Cpen1ype
Lmbedded Cpen1ype ( LC1 ) esLas fuenLes son una forma
compacLa de Cpen1ype para su uso como fuenLes lncrusLadas en
las pglnas web y a su vez proLegen los derechos de auLor.
hup://canluse.com/fonace
fonL CSS



SVG Scalable vecLor Craphlcs
SvC es una especlcacln para descrlblr grcos vecLorlales
bldlmenslonales, esLuco o anlmado y fue creado como alLernauva
de formaLo ablerLo a llash. se emplea como formaLo upogrco en
la web para dlsposluvos lCS (lad, lhone y lod)

1rue1ype
1rue1ype es un formaLo esLndar de upos de leLra escalables
desarrollado lnlclalmenLe por Apple a nales de la decada de los
ochenLa. Ls compauble con llrefox 3.3 , Safarl 3.1, Chrome 4 y
Cpera 10.






Converur fuenLes
hup://www.fonLsqulrrel.com/Lools/webfonL-generaLor
fonL CSS



Qfont-face - ermlLe vlncular fuenLes sln necesldad de que el cllenLe las Lenga lnsLaladas
en su ordenador.
fonL-famlly
valor: <famlly-name>
Src
[ <url> [formaL(<sLrlng> [, <sLrlng>])] | <fonL-face-name> ] [, <url> [formaL(<sLrlng> [,
<sLrlng>])] | <fonL-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;
}
hup://www.w3.org/18/css3-fonLs/#fonL-face-rule
hups://www.mozllla.org/en-uS/sLylegulde/producLs/refox-os/Lypeface/
1lpograna llrefox CS



I|ra Sans para I|refox CS
llrefox CS uullza llra Sans, una fuenLe upogrca especlca en dlferenLes cuerpos y
pesos. ulsenada por Lrlk Splekermann y 8alph de Carols para llrefox CS.

uescargar la fuenLe y conocer las recomendaclones de uso en:
hup://www.mozllla.org/en-uS/sLylegulde/producLs/refox-os/Lypeface/

fonL CSS



Qfont-face embedd|ng
Ls poslble el uso de fuenLes alo[adas en servldores exLerno

Goog|e Ionts
Ln la cabecera
<link href='http://fonts.googleapis.com/
css?family=Caesar+Dressing' rel='stylesheet' type='text/
css'>

Ln el esulo

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







hup://webfonLs.lnfo/fonLs-avallable-fonL-face-embeddlng
8ecursos CSS










W3C: CSS lonLs Module Level 3
hup://www.w3.org/18/2013/C8-css-fonLs-3-20131003/

MDN: fonL-face
hups://developer.mozllla.org/es/docs/CSS/fonL-face

ICN1 SUIkLL
hup://www.fonLsqulrrel.com/fonace/generaLor

Goog|e ICN1
hup://www.google.com/webfonLs

1ypek|t
hups://LypeklL.com/

ked 1eam Des|gn: Coogle lonL Al and 1ypeklL soluuons vS fonL-face
hup://www.red-Leam-deslgn.com/google-fonL-apl-and-LypeklL-soluuons-vs-fonL-face










Publicar en la nube (Google Drive)
1
Juan Quemada, DIT, UPM
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, ....
Recursos pblicos y de acceso restringido
2
Juan Quemada, DIT, UPM
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
Publicacin en la nube: Google Drive
3
Juan Quemada, DIT, UPM
1. clicar para crear nueva carpeta
2. Escribir nombre
y clicar para crear
la carpeta
Seguir pasos 1 y 2 para crear un directorio en Google Drive
!
Con Paso 0. Modo lnea se puede hacer lo mismo
Crear un directorio pblico I
4
0. Modo
cuadricula
Juan Quemada, DIT, UPM
2. clicar para
compartir (share)
1. clicar para seleccionar
3. clicar para
cambiar Change)
Seguir pasos 1, 2 y 3 para acceder al cambio de permisos
Crear un directorio pblico II
5
Juan Quemada, DIT, UPM
1. clicar para seleccionar
(Public on the Web)
2. clicar para guardar seleccin
Seguir pasos 1 y 2 para finalizar el cambio de permisos
!
La carpeta Ejercicios ya es pblica en Internet
Crear un directorio pblico III
6
Juan Quemada, DIT, UPM
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
Acceso pblico con nuevo URL
7
Juan Quemada, DIT, UPM
2. desplegar
funciones
adicionales
3. clicar para ver
mas detalles
Seguiendo los pasos 1, 2 y 3 accedemos a los detalles del directorio
!
Tal y como se muestra aqu
8
Juan Quemada, DIT, UPM
1. seleccionar
Encontrar URL de acceso pblico
9
URL pblico
al clicar accedemos
a carpeta pblica
Los detalles (details) del recurso
!
muestran el URL pblico de acceso en modo lectura
URL privado
URL de acceso pblico
Juan Quemada, DIT, UPM
Informacin sobre: DETAILS
10
Juan Quemada, DIT, UPM
URL privado:
https://drive.google.com/?tab=Xo&authuser=0#folders/0B48KCWfVwCIEcEdDcEVSTS1MS00
URL pblico:
https://googledrive.com/host/0B48KCWfVwCIEcEdDcEVSTS1MS00/
Acceso pblico:
solo lectura
Acceso autenticado:
lectura, modificacin, borrado, ..

Entrega de ejercicios en Google
Drive
11
Juan Quemada, DIT, UPM
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
Publicacin de ejercicios
12
Juan Quemada, DIT, UPM
1. Desplegar y clicar Files para subir fichero
Seleccionar Files... para subir fichero
!
Con Paso 0. Modo lnea se puede hacer lo mismo
Subir un ejercicio al directorio I
13
0. En modo
cuadricula
Juan Quemada, DIT, UPM
Seguir pasos 1 y 2 para subir fichero
14
Juan Quemada, DIT, UPM
1. clicar para seleccionar
fichero
2. clicar para subir fichero
Subir un ejercicio al directorio II
Confirmar que el fichero se sube a un directorio pblico
!
El fichero tambin ser pblico y ser visible como pagina Web en Internet
15
Juan Quemada, DIT, UPM
Clicar para confirmar que el fichero se sube y se comparte
Subir un ejercicio al directorio III
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)
16
Juan Quemada, DIT, UPM
Encontrar el URL pblico I
2. desplegar
funciones
adicionales
3. clicar para ver
mas detalles
1. seleccionar
Haciendo clic en el URL pblico
!
Vemos T2_3-2_lista.html como pgina Web
17
Juan Quemada, DIT, UPM
Fichero lista.html
Encontrar el URL pblico II
URL pblico
al clicar vemos
fichero en
navegador