EXERCICIS

Exercicis - DW - 2009-11-27

Exercici'Imatges de sustitució.
Exercici de la botonera.

Exercicis - HTML - Maquetar full d'un diari

Exercici llarg...

A la taula d'Almudena us he deixat unes fotocòpies d'una plana del diari 20 minuts d'ahir.

Localitzeu les Files i columnes i feu-vos el dibuix de la taula primer en paper i després en HTML. Intenteu fer aquesta pàgina amb HTML i tot el que sabeu. Poseu text simulat.

Exercici de Lightbox

Siguiendo las instrucciones de la página de lightbox que está aquí y utilizando estas imágenes aplicad este recurso.

Exercicis - HTML - 24 de Novembre

Exercici 1
Cerca quin és l'element de formulari per enviar arxius(el típic "Examinar").

Exercici 2
Crea un formulari extens i el més complert possible, maquetat amb taules, per omplir un Currículum Vitae amb tots els camps que vegis necessaris en un currículum online. És a dir, el que trobaríeu en un "infojobs", amb diversos camps de Text Area, que dongui a escollir entre opcions, etc... Que pregunti sobre idiomes, nivell d'aquests, estudis acadèmics, experiència professional, data de naixement, lloc de naixement, nacionalitat, que esculli entre preferències de feina, arees professionals ... que pugui enviar una foto de carnet.

Planifica-t'ho tot abans fent-te un croquis en paper.

Exercicis - HTML - Novembre 23

Exercici 1
Fes les següents taules.

Taula1

Taula2

Exercici 2
Cerca el següent sobre formularis:

Què és un camp de text ocult?
I un camp d'imatge?
Què són els menús de selecció de formulari?

Exercici 3
Confecciona un formulari complert, i maquetat amb una taula, que inclogui tots els tipus de elements de formulari que vam veure l'altre dia, camps de text, camps de contrasenya, radio butons, caselles de selecció. Escull un exemple el més realista possible.

Exercici - HTML - Novembre 20 de 2009

Exercici 1
Detecta els errors que hi ha aquí(Clica per ampliar):

Exercici 2
Cerca les següents etiquetes, els seus atributs i la seva utilitat:

acronym.
dl, dt, dd
form
input
text
caption

Exercici 3 Respón a les següents preguntes:

Per a què serveix l'atribut TARGET?
Per a què serveix l'atribut NAME dels IFRAMES.
Per a què serveix la etiqueta SCRIPT

Exercici 4 Defineix en HTML la següent taula:

Exercici 6
Investiga què vól dir DOM i per a què serveix:

Exercicis - HTML - 2009-11-04

Exercici 1

Fes les següents pàgines enllaçant-les amb el model següent...

... amb aquest logo ...

... i seguint la estructura de carpetes següent:

Exercici 2. Respón cert o fals a les següents afirmacions.

a) Les URL absolutes es poden definir de diverses formes.
b) Les URL relatives tenen arrel.
c) Per indicar al navegador que hem de sortir de carpeta cal posar el nom de la carpeta on ens trobem.
d) VLINK és un atribut de la etiqueta A.
e) Per col·locar imatges ens cal definir la ubicació de la imatge.
f) El color #gg6633 és un color web.

Exercici 3. A quines etiquetes cal posar URLs.

Exercici 4. Detecta errades al següent codi font(Clica per ampliar):

Exercicis - HTML - 18 de Novembre

Amb el material gràfic d'ahir munta una web que tingui un iframe i a l'interior d'aquest que es representin els diferents continguts(que estaràn a diferents pàgines).

Exercici - HTML - 16 Novembre 2009

Exercici 1
De les etiquetes que hem fet fins ara digues a quines apareixen els següents atributs, els valors que poden prendre i la seva utilitat en cadascuna d'elles.

ALIGN
BORDER
TARGET
WIDTH
HEIGHT
CELLPADDING
CELLSPACING
BACKGROUND
BGCOLOR
SRC
NAME
TEXT
LINK
VALIGN
VLINK
ALINK
COLOR
SIZE
BODY
FACE
START
TYPE
FAMILY
LEFTMARGIN
BOTTOMMARGIN
RIGHTMARGIN
TOPMARGIN
MARGINWIDTH
MARGINHEIGHT

Exercici 2 Digues si són certes o falses les següents afirmacions:

La etiqueta IFRAME va per parelles.
Entre etiquetes TITLE no es poden posar altres etiquetes.

Exercici 3 Fes la següent pàgina amb les següents imatges:

Versió en vermell de les opcions del menú per si voleu assenyalar a quina pàgina esteu.

Javascript - 12 nov 2009

Reptes:

Averigua si el DOM d'un document els diferents navegadors el veuen igual. Quines són les diferències. Quina arrel fan servir cadascú.
Averigua com detectar el navegador i fes un script senzill que escrigui un alert dient amb quin navegador s'està veient la pàgina.
Obté l'amplada i alçada visible (dia anterior) del forat del navegador en els diferents navegadors.
Fes un Script que escrigui el contingut d'un H1 a un alert. Després que l'escrigui a una DIV.

Exercici - HTML - 12 Novembre 2009

Exercici1.

Amb tot el que saps fes el lloc web dels jardins que vau començar ahir.

Posa marges a la pàgina, color de fons, links, imatges, paràgrafs,

Javascript - 11 nov 2009

Busca amb Javascript la manera d'obtenir la amplada i alçada visibles d'una pàgina, és a dir el que surt al forat del navegador, la finestra del navegador.

Mireu l'enllaç aquest: Clica.

Busca document.body.clientHeight i window.innerWidth

HTML - EXERCICIS - 11 DE NOV DE 2009

1. Fes una llista de diferents CMS.

2. Etiquetes solteres que coneixes fins el moment i la seva utilitat.

3. Busca alguna web en la que hi hagi un catàleg de colors hexadecimals. Escriu el codi dels següents colors: blanc, negre, gris perla, crema, magenta, porpre, groc, vermell, taronja, cian, verd, verd fosc, blau fosc, blau cel, marró.

4. Comprova quines de les etiquetes que has fet fins el moment no permeten que aparegui alguna cosa al costat i fes una llista.

5. Defineix el comportament del navegador per defecte amb els paràgrafs, les capçaleres, ...

6. Què vól dir tipografia amb serifa i sense serifa? Dona exemples de cada tipus.

7. Anota webs d'internet que tinguin tutorials d'HTML.

8. Defineix els següents conceptes.

Interactivitat.
Pàgina web dinàmica.
Sistema de colors additiu.
Sistema de colors sustractius.
True Color.
Safety Colors [Colors de seguretat, Colors Web,...].

9. Respón cert o fals:

W3C especifica els estàndards dels llenguatges d'Internet i totes les marques i fabricants dels navegadors fan cas al peu de la lletra de les seves recomanacions.
Si al codi fem diversos espais el navegador només representa com a màxim un d'espai.

Solució - Javascript - Bucles, matrius i DOM

Analitzeu com està fet.

<HTML>
<HEAD>
<TITLE>Exemple d'una matriu</TITLE>

<SCRIPT>

dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado",

"Domingo", "digestiu"];
//Defineixo una matriu global(sense posar var per tant).

longitud=dias.length;
//longitud em defineix el número d'elements que té la matriu

function enumerar() {

for (i=0; i<longitud; i++) {
//Faig un bucle que recorre tots els elements de la matriu

var elemento=document.createElement('p');
//Es para definir "elemento" como un elemento de tipo párrafo

var texto=document.createTextNode(dias[i]);
//Es para definir un elemento de texto.

elemento.appendChild(texto);
//Al párrafo "elemento" le pone como hijo a "texto"

//var obj=document.getElementById('parrafos');
//Es para indiciar dónde va a ir creando los objetos "elemento", o sea los

párrafos

//obj.appendChild(elemento);
//A "obj", que es la div que tiene id="parrafos", le va a poner como elemento

hijo a elemento

document.getElementById('parrafos').appendChild(elemento);

}

}

</SCRIPT>

<style>
body {
background-color:#336699;
}
</style>

</HEAD>
<BODY onclick="enumerar();">

Aquí sota hi aniran els dies de la setmana: <br>

<div id="parrafos"> </div>

</BODY>
</HTML>

Exercici - Javascript - CURS TARDA - 10 NOV 2009

Acabar el d'ahir del bucle FOR i la matriu.
Mirar aquest enllaç(clica aquí) per comprendre el DOM i diferents mètodes per treballar amb els nodes. Analitzeu el codi font. I fes els teus exemples.
Fes una matriu amb colors hexadecimals i canvia el color al BODY a base de clicar en diferents TD d'una petita taula. (Ideal per webs de fotògrafs).
Busca la manera de retardar una acció(setTimeout) i fes un exemple.
Busca la manera d'obtenir amb javascript l'amplada i alçada disponible dintre del forat del navegador.
Busca la manera de canviar dinàmicament amb javascript una fulla d'estils.

Exercici - HTML - CURS MATÍ -10 Novembre 2009

A. Defineix els següents conceptes:

CMS
HTML
HTTP
CSS
Navegador
W3C
FTP
Cookie
Base de dades
ICANN
DNS

B. Orígen de l'HTML.

C. Què és una etiqueta HTML i per què serveix?

D. Respón cert o fals a les següents afirmacions:

Les imatges s'incrusten en els documents HTML.
Un navegador és un servidor de pàgines web.
El que hi ha entre les etiquetes BODY són instruccions per dir-li al navegador el que ha de sortir a través de la finestra del navegador.
En HTML no hi ha etiquetes solteres.
Les pàgines web i els arxius que les acompanyen van a parar a la carpeta d'arxius temporals d'Internet.
Les extensions dels documents HTML només poden tenir 3 lletres.

E. Quines etiquetes d'HTML coneixes i per a què serveixen?

F. Per a què serveixen les etiquetes TITLE.

G. Escriu la estructura HTML típica d'una pàgina.

H. Cerca informació sobre:

SGML
XML
XHTML
HTML5 i la seva estructura

I. Tipus d'arxius gràfics que es poden posar a les planes Web.

J. Què és un servidor?

Solució - Exercici 8 - 2009-NOV-04

<html>
<head>
<title>Link amb javascript</title>
<script>

function canvia(url) {
document.location.href=url;
}

</script>
</head>
<body>

<strong onclick="canvia('http://google.com');">Anar a

google</strong>

</body>
</html>

Solució Exercici 6 - 2009-NOV-04

<html>
<head>
<title>Escriure un text dins d'un paràgraf</title>
<script>
//Mode 1 - Fent servir innerText o innerHTML
function escriure(p) {
document.getElementById(p).innerHTML ="Hola ¿Cómo estás?";
}

//Mode 2 - Fent servir el DOM
function escriure2(p) {
var texto="Patates fregides."
document.getElementById(p).firstChild.nodeValue=texto;
}

//Mireu l'adreça:

http://www.alfonsojimenez.com/computers/no-uses-innerhtml-usa-do

m

</script>

</head>
<body>
<a href="#" onclick="escriure('parag');">Clica i veuràs.</a> |
<a href="#" onclick="escriure2('parag');">Una altra opció</a>

<p id="parag"> </p>

</body>
</html>

Solució de l'exercici 5 del dia 2009-Nov-04

Recordeu que quan vam sustituir els caràcters amb accent per caràcters especials amb la funció replace només se sustituïa la primera vegada que apareixia.

Doncs bé, tenim la solució: Hem de fer servir les anomenades "expressions regulars". Mira't els següents enllaços que en parlen:

Aplica't al que voliem fer tenim un exemple concret. Clica aquí Mireu com ho solucionen en aquest enllaç i acabeu de completar l'exercici d'ahir.

Según eso con el ejemplo que teníamos habría que hacer:

cadena.replace(/á/g, "á");

Així la solució de l'exercici 5 d'ahir és:

<HTML>
<HEAD>
<TITLE>Reemplazar un trozo de una cadena por otra cosa</TITLE>
<script>

function cambiar() {

var cadena=document.masa.cosa.value;

//minúsculas acentuadas agudas
cadena = cadena.replace(/á/g,"á");

cadena = cadena.replace(/é/g,"é");

cadena = cadena.replace(/í/g,"í");

cadena = cadena.replace(/ó/g,"ó");

cadena = cadena.replace(/ú/g,"ú");

//minúsculas acentuadas graves
cadena = cadena.replace(/à/g,"à");

cadena = cadena.replace(/è/g,"è");

cadena = cadena.replace(/ò/g,"ò");

//mayúsculas acentuadas agudas
cadena = cadena.replace(/Á/g,"Á");

cadena = cadena.replace(/É/g,"É");

cadena = cadena.replace(/Í/g,"Í");

cadena = cadena.replace(/Ó/g,"Ó");

cadena = cadena.replace(/Ú/g,"Ú");

//mayúsculas acentuadas graves
cadena = cadena.replace(/À/g,"À");

cadena = cadena.replace(/È/g,"È");

cadena = cadena.replace(/Ò/g,"Ò");

//ç y Ç
cadena = cadena.replace(/ç/g,"ç");
cadena = cadena.replace(/Ç/g,"Ç");

//ñ y Ñ
cadena = cadena.replace(/n/g,"ñ");
cadena = cadena.replace(/N/g,"Ñ");

// punt volat
cadena = cadena.replace(/·/g,"·");

document.masa.cosa.value=cadena;

}

</script>
</HEAD>
<BODY>

<form name="masa">
<textarea cols="25" rows="10" name="cosa"></textarea>
<input type="button" onclick="cambiar();" value="corrige" />
</form>

</BODY>
</HTML>

Puedes completar los carácteres especiales que tú consideres que se puedan añadir.

Exercicis - Javascript - 5 Novembre

Exercici 1
Analitza el codi línia per línia dels següents exemples.

Exemple 1

<html>
<head>
<title> Color de fondo </title>
</head>

<body bgcolor="#FFFFFF">
<SCRIPT language="JavaScript">

</SCRIPT>
<P>
<B>Cambiar el color de fondo!</B>
<P>
<FORM>
<INPUT type="button" value="Lima" onClick="get_color(0)">
<INPUT type="button" value="Naranja" onClick="get_color(1)">
<INPUT type="button" value="Celeste" onClick="get_color(2)">
<INPUT type="button" value="Rosa" onClick="get_color(3)">
<INPUT type="button" value="Blanco" onClick="get_color(4)">
</FORM>

</body>
</html>

Exemple 2

<HTML>
<HEAD>
<TITLE>imatge de sustitució</TITLE>
<script language="javascript" type="text/javascript">

function canviar(ident,url) {

identificacio=ident;

antiga=document.getElementById(ident).src;

//les defineixo globalment per utilitzar-les
//per una altra funció externa,
//la que es diu restituir();

document.getElementById(ident).src=url;
//A l'atribut src de la img li donc
//com a valor el que valgui la url
//que li hem passat
}

function tornar() {

document.getElementById(identificacio).src=antiga;

}

</script>

</HEAD>
<BODY>
<img src="flor1.jpg" id="imatge1"

onmouseover="canviar('imatge1','flor2.jpg');"
onmouseout="tornar();">

<img src="flor2.jpg" id="imatge2"

onmouseover="canviar('imatge2','flor1.jpg');"
onmouseout="tornar();" hspace="10">

</BODY>
</HTML>

Exercici 2
Basant-te en els exemples anteriors fes un matriu en la que definiu a cada posició la url d'una imatge diferent(fes-ho amb 5 imatges). A continuació posa una imatge, a la que li posaràs com a atribut id="imatge", i després fes 5 enllaços de tal manera que al passar per sobre canvïi una imatge o altra de les que hi ha a la matriu.

[Os explicaré esto para cambiar dinámicamente el contenido(el texto y más) de cualquier elemento: clica aquí para ver un adelanto].

CSS combinado Javascript

Solució - Exercici 7 del 2009-NOV-05

Objectiu:
Fer que una imatge es sustitueixi per una altra. Analitzeu el codi:

Exercicis - HTML i Javascript - 4 de Novembre 2009

Exercici 0
Digues si són certes o falses les següents frases:

Javascript és un llenguatge de programació orientat a objectes que actua en el costat client(POO).
Les funcions de javascript es declaren entre les etiquetes script al body.
Amb javascript podem definir interactivitat en el costat client.
a="5"; és una variable numèrica.
Un element html a javascript és un objecte.

Exercici 1
Respón a les següents preguntes:

Com es defineix una variable.
Tipus de variables que hem fet.
Com es defineix una funció. A on?
DOM -> Com "enrutem" al valor d'un camp de text d'un formulari.
Com creem una variable amb javascript.
Com asignem un valor a una variable amb javascript.
Com cridem a una funció.
Què és un event de ratolí.
Fes una llista d'events de ratolí.
Com fer que aparegui el focus del ratolí a un camp de text a un formulari quan s'ha carregat la pàgina.
Què és una condicional.
Fes una llista de tot el que saps fins ara sobre javascript.
Cerca tipus de variables.
Què és un array.
Defineix AJAX i els seus usos.

Exercici 2 (HTML)
Fes una pàgina que serveixi per enviar una cerca al google. A veure si es pot. Feu servir el mètode get.

Exercici 3
Fent comentaris de Javascript( // ) o de HTML () explica per a què serveixen les coses de javascript que vegis als codis següents.

Exemple 1

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

document.formulina.clonico.value=texto;

}

</script>
</HEAD>

<BODY onload="document.formulina.campillo.focus();">

<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="clonar" onclick="mensaje();" >

<INPUT TYPE="text" name="clonico">

</FORM>

</BODY>
</HTML>

Exemple 2

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>

Exercici 4
Basant-te en el exemple 2 de l'exercici anterior crea un formulari amb dos camps i dos botons que ens serveixi per convertir un valor en euros a pesetes i de pesetes a euros amb dos botons.

Exercici 5
Busca a internet alguna funció que serveixi per reemplaçar un caràcter que hi hagi a una cadena per un altre. I per aplicar aquest coneixement crea un formulari amb un textarea i un botó que cridi a una funció que sustitueixi les lletres amb accents i que se surtin de ASCII pels seus caràcters especials.

Exercici 6
Busca a internet alguna manera, amb javascript, d'escriure text dins d'un paràgraf.

Exercici 7
Busca a internet alguna manera, amb javascript, de sustituir una imatge per un altra al passar per sobre amb el ratolí.

Exercici 8
Busca a internet alguna manera, amb javascript, de fer un enllaç.

Exercici 9
Busca a internet o a librosweb alguna manera, amb javascript, d'obtenir la resolució de la pantalla de l'ordinador de l'usuari.

Exercici 10
Busca a internet o a librosweb alguna manera, amb javascript, de limitar el número de caràcters escrits a un camp de text.

Solució d'exercici de dia anterior

Solució de l'exercici del dia anterior:
L'exercici consistia en fer que un missatge que escribíssim a un camp de formulari saltés. És la excusa per posar en pràctica la definició de funcions i variables, posem events de ratolí i enrutem per l'arbre DOM del document.

<HTML>
<HEAD>
<TITLE>Alert i formulari</TITLE>

<script type="text/javascript" language="javascript">

function mensaje() {

texto=document.formulina.campillo.value;

alert(texto);
}

</script>
</HEAD>

<BODY>
<FORM name="formulina">

<INPUT TYPE="text" name="campillo">

<INPUT TYPE="button" value="mensaje" onclick="mensaje();" >

</FORM>

</BODY>
</HTML>

Exercicis - HTML - 30 d'Octubre

Exerici 1
Fes la següent taula procurant que les columnes mesurin la mateixa amplada. Recorda les meves recomancions.

Exerici 2
Fes la següent taula:

Exercici 3
Amb tot el que et puguis aproximar intenta fer la pàgina 6 del diari 20minutos d'avui. Clica aquí per descarregar-te el PDF.

Croquis(clica a la imatge per ampliar).

Material gràfic: