Joan: /* Entrega */

2018-09-19T16:17:47Z

Entrega

Pàgina nova

=Introducció=
A Javascript tenim objectes predefinits relacionats amb la finestra i l'entorn del navegador, que has de conèixer i utilitzar.
=Referències=
*http://www.w3schools.com/

*JS Window: http://www.w3schools.com/js/js_window.asp
*JS Screen: http://www.w3schools.com/js/js_screen.asp
*JS Location: http://www.w3schools.com/js/js_location.asp
*JS History: http://www.w3schools.com/js/js_history.asp
*JS Navigator: http://www.w3schools.com/js/js_navigator.asp
*JS PopupAlert: http://www.w3schools.com/js/js_popupalert.asp
*JS Timing: http://www.w3schools.com/js/js_timing.asp
*JS Cookies: http://www.w3schools.com/js/js_cookies.asp
*Frames: http://www.w3schools.com/jsref/prop_win_frames.asp

=Desenvolupament=
Els alumnes provaran amb l'ordre proposat algun dels exemples que s'han explicat a classe, i es faran provatures per tal de consolidar els coneixements.
==iFrames==
Un iframe s'utilitza per visualitzar una pàgina web dins d'una altra.
*http://www.w3schools.com/jsref/prop_win_frames.asp
*http://www.w3schools.com/html/html_iframe.asp
*http://www.w3schools.com/jsref/dom_obj_frame.asp

Exemple pràctica de '''iframe''', amb la problemàtica de l'atribut '''seamless''', fitxer ''iframe.htm'':
<pre>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>HTML5 iframe</title>
<style>
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body>

<h1>Prova iFrame</h1>

<p>Prova de l'atribut <em>seamless</em> del tag iframe del HTML5.</p>
<p>
L'atribut <em>seamless</em> encara no funciona correctament en la majoria dels navegadors. És per això que en aquest <a href="http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute">link</a> es proposa utilitzar CSS per tal d'eliminar els contorns i els scroll bars i fer un <em>iframe</em> sense costures.
</p>

<iframe title="w3schools" width="600" height="300" src="http://www.w3schools.com/" seamless="seamless"></iframe>

</body>
</html>
</pre>
'''nota''': sembla ser que www.google.com no es deixa obrir dins d'un iframe.
==Obrir finestra nova==
Per defecte per obrir una finestra nova (en una pestanya nova) no cal Javascript, n'hi ha prou amb l'opció target="_blank":
<pre>
<a href="http://www.google.com/" target="_blank">kkk</a>
</pre>
Ara bé, si utilitzem Javascript tenim moltes d'altres opcions, tal com s'explica a
*http://www.desarrolloweb.com/articulos/18.php
<pre>
window.open(URL,nom_de_la_finestra,forma_de_la_finestra)
</pre>
Concretament podem controlar les mides, la posició, si té scrollbars, barra de direccions, menú,... És la manera correcta de fer els pop-ups:
==Comunicació entre finestres amb Javascript==
Està ben explicat en aquest enllaç:
*http://www.simbiontes.com/archives/codeblog/comunicacion-entre-ventanas-con-javascript.php

==Cookies==
La manera més fàcil de veure les cookies és des del mateix Firefox:
*Editar > Preferencias > Privacitat > Suprimir les galetes individualment
Però les cookies es es guarden en el disc dur. Des de la versió Firefox 3 les cookies no es guarden en un fitxer de text sinó en una petita base de dades ''sqlite''. A la carpeta ''~/.mozilla/firefox/'' veiem que hi ha diferents perfils (fitxer perfils.ini), i cada perfil té una carpeta on es guarden les cookies. Dins de cada perfil, la cookie es guarda en el fitxer '''cookies.sqlite '''
*http://kb.mozillazine.org/Cookies

Com es pot veure directament la informació de les cookies? Doncs necessitem '''Sqlite''':
<pre>
$ sudo apt-get install sqlite
</pre>
'''NOTA'''. La informació que es troba a la xarxa per accedir a les cookies des d'un client de sqlite és molt equívoca, doncs és molt dependent de la versió del Firefox i del Sqlite. A continuació es documenta com ho ha fet el professor, però no és objectiu de la pràctica accedir a les cookies des de sqlite.

Disposem de la versió del Mozilla Firefox 11. Primer de tot mirem la versió del sqlite que tenim instal.lada:
<pre>
$ sqlite3
SQLite version 3.6.22
</pre>
Es llegeix en un fòrum de què s'ha de disposar de la versió 3.7, i aquesta versió no està disponible en els repositoris, o sigui que s'haurà de compilar des de les fonts.
*http://www.sqlite.org/download.html
Descarrego el fitxer ''sqlite-autoconf-3071401.tar.gz'', i compilem:
<pre>
./configure
make
</pre>
El binari '''sqlite3''' s'ha creat en el directori ~/Baixades/sqlite-autoconf-3071401/
<pre>
$ cd ~/Baixades/sqlite-autoconf-3071401/
$ ./sqlite3
SQLite version 3.7.14.1 2012-10-04 19:37:12
</pre>
Ara anem al directori on estan les cookies:
<pre>
$ cd ~/.mozilla/firefox/mevel791.default
</pre>
Veiem que existeix el fitxer '''cookies.sqlite'''. Aquest és el fitxer que conté les cookies, en format de base de dades de sqlite. Des d'aquest directori, executem la versió del sqlite que hem compilat:
<pre>
$ ~/Baixades/sqlite-autoconf-3071401/sqlite3 cookies.sqlite
SQLite version 3.7.14.1 2012-10-04 19:37:12
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

sqlite> .databases
seq name file
--- --------------- ----------------------------------------------------------
0 main /home/joan/.mozilla/firefox/mevel791.default/cookies.sqlite

sqlite> .tables
moz_cookies

sqlite> select * from moz_cookies;
...
1332582384604528|az|44966168997d45eca38607f90f07e56e|engine.adzerk.net|/|1382997774|1351461774433171|0|0|adzerk.net|1348816654853624
1332582384604529|GMAIL_IMP|v*2%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Ftl-inv*0!inbox!unk%2Fpf-s*8090%2Fbc-se5*1%2Fbc-se6*1%2Fbc-se12*1%2Fcl-rld*3998|mail.google.com|/mail/u/0|1351548946|1351462546083422|0|0|google.com|1351460441549654
...

sqlite> .schema moz_cookies
CREATE TABLE moz_cookies (id INTEGER PRIMARY KEY, name TEXT, value TEXT, host TEXT, path TEXT,expiry INTEGER, lastAccessed INTEGER, isSecure INTEGER, isHttpOnly INTEGER, baseDomain TEXT, creationTime INTEGER);
CREATE INDEX moz_basedomain ON moz_cookies (baseDomain);
CREATE UNIQUE INDEX moz_uniqueid ON moz_cookies (name, host, path);

sqlite> .mode column
sqlite> .headers on
sqlite> select name,value from moz_cookies where host like '%arthropoda.joanillo.org%';
name value
---------- ----------
num_fotos totes
tam_fotos 800
language ca
</pre>

==Detecció de smartphone i redirecció==
Es tracta de detectar que el navegador que estem utilitzant és un smartphone, PDA o similar, i redirigir a una pàgina amb un contingut i disseny adequats. S'ha de pensar en la usabilitat que li donarem a l'aplicació quan accedim des del mòbil (normalment no volem veure el mateix contingut i detall que quan accedim des de l'ordinador). A més, hem de pensar que els mòbils tenen un ample de banda limitat i que els usuaris no volen superar el seu límit contractat, per la qual cosa tindrem cura amb les imatges,... Típicament, s'utilitzarà un full d'estils CSS específic per a aquest format.

La detecció del navegador pot ser simple com l'exemple que es proposa, però es pot complicar si el disseny depèn exactament del tamany de la pantalla (diferents smartphones tenen diferents tamanys). A més, hem de pensar en nous formats de pantalla com ara els iPad i tablets.

En l'exemple que es proposa pots accedir directament a http://arthropoda.joanillo.org/last.php. Si ho fas des d'un mòbil la funcionalitat, el contingut i les imatges queden reduïdes a la mínima expressió.
*http://arthropoda.joanillo.org/last.php
<pre>
<script type="text/javascript">
var navegador = navigator.userAgent.toLowerCase();
//alert(navegador);
if( navegador.search(/iphone|ipod|android/) > -1 ){
document.location = 'pda_last.php';
}
</script>
</pre>
Mira les diferències entre accedir a la pàgina des del portàtil o des del mòbil.

De totes maneres, aquestes tècniques ara ja estan en desús. La idea actual és que el dissenyador ja no s'hagi de preocupar dels navegadors, del tamany de pantalles, etc. El concepte '''responsive design''' fa referència a les tècniques i frameworks per tal de què un mateix contingut es visualitzi de manera correcta en els diferents formats: des d'un ordinador de sobretaula, portàtil, smartphones,... passant per tauletes de diferent tamany.

Per ex, un dels frameworks que s'utilitza és '''bootstrap''', el mateix que utilitza ''Twitter'':
*http://www.designer-daily.com/5-responsive-frameworks-for-more-productive-web-design-34969

==Exercicis aclaridors==
===Rellotge Javascript===
Hem vist un exemple de rellotge analògic fet amb Javascript a:
*http://www.w3schools.com/js/js_timing.asp
A classe hem extret la part que ens interessa, i hem comentat el codi. Un dels objectius terminals del mòdul és poder implementar en el nostre projecte codi que hem vist per aquí o per allà, ser capaços d'entendre'l, i adaptar-lo a les nostres necessitats. A vegades fins i tot podrem fer adaptacions de codi que no entenguem al 100%.
*[[Fitxer:Rellotge.zip]]
Concretament, en aquest codi podem identificar diverses funcions i tècniques que hem vist a classe: funcions de cadena, matemàtiques, de timing,...

=Entrega=
Els alumnes entregaran al Google Classroom tots els fitxers generats (fitxers html). S'empaquetaran tots aquests fitxers i es pujaran al Moodle dins del termini d'entrega de la pràctica.

Recorda la '''normativa''' per entregar les pràctiques al Google Classroom: [[ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Google_Classroom]]

{{Autor}}, Octubre 2018
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Objectes predefinits i nadius del llenguatge - Historial de revisió

Joan: /* Entrega */