6 creació de pàgines web - peprifa.catpeprifa.cat/arees/tcn3/recursos3/tema6.pdf · o html que...

165� GUIA TECNOLOGIES TERCER ESO � MATERIAL FOTOCOPIABLE © GRUP PROMOTOR SANTILLANA EDUCACIÓ, SL �

6 Creació de pàgines web

• Recordar què és Internet, quins serveis ofereix i què és un navegador.

• Conèixer què fa falta per fer servir Internet (mòdem,línia telefònica...).

• Saber explicar què és una pàgina web i quinselements la caracteritzen.

• Saber identificar els principals elements que formenuna pàgina web.

• Conèixer on s’allotgen les pàgines web.• Assimilar els conceptes d’hipertext i enllaç.• Aprendre a dissenyar una pàgina web.• Aprendre a elaborar una pàgina web mitjançant

un editor de pàgines web, com per exemple Nvu.

• Conèixer quines són les diferents eines que es podenfer servir en la creació de pàgines web.

• Saber modificar el format de text i altrescaracterístiques d’una pàgina web.

• Aprendre a inserir taules i imatges en una pàgina web.

• Aprendre a inserir enllaços en una pàgina web a partir de text i a partir d’imatges.

• Tenir en compte una sèrie de consells a l’horad’elaborar una pàgina web, per exemple: elaborarpàgines senzilles, no carregar-les gaire ambimatges...

• Aprendre a publicar pàgines web de manera que totsels internautes hi puguin accedir.

OBJECTIUS

MAPA DE CONTINGUTS

WORLD WIDE WEB

formada per

pàgines web

editor de text

aplicacionsdiverses

com

Nvu

permeten

donar format

inserir enllaços

publicar

inserir imatges

Blogger

per formar

bitàcoleso blogs

Writer Impress

exemples

com

assistentseditors de

pàgines webla seva funció

es poden crear fent servir el disseny depèn de

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 165

166 � GUIA TECNOLOGIES TERCER ESO � MATERIAL FOTOCOPIABLE © GRUP PROMOTOR SANTILLANA EDUCACIÓ, SL �

• Les pàgines web. Elements i lloc on s’allotgen. Hipertextos i enllaços.

• Aplicacions per crear pàgines web.

• Editors de pàgines web: Nvu.

• El format de la pàgina web: caràcters, paràgrafs, colors, propietats de la pàgina web, taules.

• Imatges en una pàgina web: com inserir-les, mida.

• Com inserir enllaços en una pàgina web:

– A partir de text.

– A partir d’imatges.

• Consells per dissenyar pàgines web.

• Publicació de pàgines web.

• Buscar pàgines web concretes.

• Crear una pàgina web senzilla a partir d’un editor de text.

• Fer servir l’editor web Nvu: modificar el format del text, els paràgrafs, els colors, el títol,inserir taules...

• Inserir imatges en una pàgina web en blanc creada per Nvu.

• Dissenyar damunt el paper una pàgina web i discriminar els elements que s’hand’utilitzar d’acord amb la temàtica de la pàgina en qüestió.

• Crear una pàgina web personal fent servir l’aplicació Nvu.

• Publicar la pàgina web personal creada.

• Crear un bloc i publicar-lo.

• Valorar l’existència d’editors de pàgines web com Nvu, que faciliten molt la tasca a l’horade dissenyar pàgines web.

• Interès per crear pàgines web accessibles per a persones amb discapacitats.

• Valorar la importància de saber crear pàgines web actualment amb vista a un futurprofessional.

CONTINGUTS

PROGRAMACIÓ6

1. Educació moral i cívica. Explicar als alumnes que, a causa de la facilitat de publicar una pàgina web a la xarxa,a Internet tenen cabuda pàgines amb ideals de tota mena: racistes, sexistes... Mostrar-los la importància de nodeixar-se influenciar per les opinions dels altres, sinó crear les seves pròpies opinions.

2. Educació per al consum. Explicar als alumnes que, tot i que al mercat hi ha molts programes comercials pereditar pàgines web, a Internet en poden trobar d’altres totalment gratuïts, fàcils de fer servir i potents.

3. Educació social i ciutadana. Intentar que els alumnes valorin la tasca i la generositat de les persones quepubliquen articles, treballs, fotografies... propis per compartir-los amb els altres de manera altruista. Posar-losexemples de l’enciclopèdia Wikipedia, les entrades i els articles de la qual estan escrits per usuaris de la xarxa.

EDUCACIÓ EN VALORS

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 166


6

COMPETÈNCIES QUE ES TREBALLENCompetència per aprendre a aprendrePer aprendre a utilitzar un editor de pàgines web amb destresa, de la mateixa manera que qualsevolaltra aplicació informàtica, és molt importantl’aprenentatge. Per això, durant la unitat es dóna alsalumnes una base teòrica i ells han d’aplicar i “experimentar” amb l’editor de pàgines web per aprendre a fer-lo servir.

Autonomia i iniciativa personalEn aquesta unitat es proposa als alumnes crear unapàgina personal seguint unes pautes i introduint certselements estudiats. Motivar els alumnes perquèinvestiguin pel seu compte i introdueixin altreselements diferents no estudiats. Valorar aquestaactitud per part de l’alumne en qüestió.

Competència social i ciutadanaEl tercer text de la secció Racó de lectura preténque els alumnes pensin en les persones amb algunamena de discapacitat a l’hora d’elaborar les sevespàgines web i hi incloguin botons més grans,

possibilitat de canviar de mida la lletra, triar pàginesamb més contrast... D’aquesta manera aquestespersones tindran accés a un nombre de pàgines més gran.

Tractament de la informació i competència digitalA través del contingut d’aquesta unitat els alumnesconstataran la importància de les pàgines web avuidia com una de les principals fonts d’informació. Tal com es diu al principi de la unitat, si alguna cosa no és a la xarxa, és que no existeix. Aquesta és la filosofia que molts partidaris de l’expansiód’Internet destaquen.

Competència cultural i artísticaEn la creació d’una pàgina web personal, els alumnes mostraran la seva creativitat i gust a l’hora de dissenyar la seva pàgina i l’habilitat per utilitzar l’editor de pàgines web. La unitat s’ha de completar amb els estudis dedisseny digital que els alumnes han dut a terme i que seguiran estudiant en cursos posteriors.

ÍNDEX DE FITXESTÍTOL DE LA FITXA CATEGORIA

1. Adaptar imatges per a la web Reforç

2. Crear un bloc amb Nvu Reforç

3. Publicar un àlbum web Ampliació

4. Publicar un vídeo a la xarxa Ampliació

5. Banc de dades. AmpliacióInformació complementària

6. Avaluació Avaluació

TÍTOL DE LA FITXA CATEGORIA

7. Autoavaluació Avaluació

8. Solucions Avaluació

9. Les nostres Continguts perfotos a la xarxa saber-ne més...

10. Utilitzar un editor Continguts peren línia saber-ne més...

1. Definir Internet, navegador, cercador i editor depàgines web, diferenciant clarament tots aquestsconceptes.

2. Enumerar els dispositius necessaris per fer servirInternet (mòdem, línia telefònica...).

3. Definir què és una pàgina web i identificar-ne elsprincipals elements.

4. Definir i comprendre els conceptes d’hipertext ienllaç.

5. Elaborar una pàgina web mitjançant un editor depàgines web, Nvu.

6. Manejar amb fluïdesa les diferents eines que espoden fer servir en la creació de pàgines web.

7. Modificar amb desimboltura el format del text, els colors, etc., en una pàgina web.

8. Inserir i modificar taules i imatges en una pàginaweb.

9. Inserir enllaços en una pàgina web a partir de text i d’imatges.

10. Crear un bloc.

11. Publicar pàgines web.

CRITERIS D’AVALUACIÓ

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 167


SOLUCIONARI6Resposta pràctica.

En cada una de les pàgines web proposades po-den aparèixer diferents elements dels esmentats.A causa de l’augment de la velocitat de transmis-sió de dades a la xarxa, les pàgines incorporen ca-da vegada més elements multimèdia: so, vídeo…

a) L’hipertext és una manera de presentar la in-formació que permet accedir ràpidament a dife-rents parts del document, sense seguir un ordrelineal (de principi a fi).

Un enllaç és un vincle existent entre un elementd’una pàgina web i una altra pàgina. Els enllaçoses poden associar a una paraula o a una frase,però també a una imatge, per exemple.

b) Els enllaços són elements que apareixen en untext que té format hipertext.

Resposta pràctica.

Recordar als alumnes que les opcions que Nvu in-clou per modificar el format del text són les matei-xes que apareixen en altres aplicacions que utilitzentext, com els processadors de text, per exemple.

Resposta pràctica.

a) Cada oració del text es numera automàticament.En el primer paràgraf apareix un 1, després un2 i així successivament.

1. Paràgraf 1…

2. Paràgraf 2…

3. Paràgraf 3…

b) Es treu la numeració automàtica i es posen picsseparant les diferents oracions.

Resposta pràctica.

Recordar als alumnes que la mida de les imatgesque insereixin en la taula no ha de ser gaire granper tal que la pàgina, si es publica, es carregui rà-pidament (per exemple menys d’1 megapíxel).

Resposta gràfica. Recordar als alumnes que tinguinen compte els consells que es donen a la pàgina149 per dissenyar pàgines web.

a) Al catàleg de llibres poden aparèixer imatges deles cobertes. Com que es mostraran petites, n’-hi ha prou amb fitxers de poca resolució.

b) Al diari poden aparèixer fotografies del centre es-colar.

c) En el cas de la pel·lícula, s’hi solen incloure ví-deos promocionals (tràilers).

d) En el cas del fotògraf, hi han d’aparèixer fotogra-fies amb una resolució acceptable per compro-var la qualitat que tenen.

Resposta segons els accessos del centre a la xarxa.

Resposta pràctica. Resposta segons els accessos ala xarxa. És recomanable revisar novament la mi-da de tots els fitxers que formen la pàgina web quees vulgui publicar.

a) Una pàgina web és un fitxer amb extensió htmo html que pot incloure text, imatges, sons i en-llaços a altres pàgines web.

b) Els elements que poden formar part d’una pàgi-na web són: textos, enllaços, taules, imatges, ani-macions, sons, vídeos o formularis.

c) Un enllaç és un vincle existent entre un elementd’una pàgina web i una altra pàgina. Els enllaçoses poden associar a una paraula o a una frase,però també a una icona o un altre tipus d’imat-ges, per exemple.

d) Es poden fer servir diferents aplicacions:

• Editors de text.

• Editors de pàgines web.

• Assistents web (pàgines web que ens guien pasa pas en el disseny i la publicació de la pàgina).

• Moltes altres aplicacions, com ara Picasa oXnView (per publicar pàgines amb imatges), oWriter (per publicar pàgines que combinen textamb imatges, per exemple).

a) Agilita la navegació i augmenta el dinamisme dela pàgina.

b) Redueix el temps necessari perquè la pàgina esvisualitzi al navegador.

c) Organitza els elements que formen la pàgina web.

d) Facilita la lectura de la pàgina.

e) Les animacions criden més l’atenció del navegantque les imatges estàtiques. En el cas de la publi-

10

9

PÀG. 154

8

7

PÀG. 152

6

PÀG. 149

5

PÀG. 147

4

3

PÀG. 144

2

1

PÀG. 141

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 168


citat a la xarxa, per exemple, és més interessantutilitzar animacions.

Exemples: resposta lliure.

a) La mida del text es pot canviar de diverses ma-neres:• Fent clic en els botons de la barra de

format.

• Triant alguna opció del menú Format → Mida.

El color del text també es pot canviar de diver-ses maneres:

• Fent clic a la part de l’esquerra del botó dela barra de format. Recordar als alumnes queel color del fons d’aquest botó no és el color delfons de tota la pàgina, sinó el color de fons peral text seleccionat.

• En el menú Format → Color del text.

b) Es pot posar un fons de color taronja a una pàgi-na en el menú Format → Colors de la pàgina idel fons.

c) Per inserir una taula amb quatre files i tres co-lumnes hi ha diverses possibilitats:• Fent clic en el botó taula de la barra de redac-

ció: .

• Triant el menú Insereix → Taula i seleccionantquatre files i tres columnes.

d) Per inserir una imatge podem: • Triar el menú Insereix → Imatge.

• Fer clic en el botó de la barra de redacció.

e) Seleccionar la paraula en la qual volem afegir unenllaç i després: • Triar el menú Inserir → Enllaç.


• Prémer la combinació de tecles Ctrl. + L.

f) Seleccionar la imatge en la qual volem afegir unenllaç i ara tenim diverses possibilitats: • Triar el menú Inserir → Enllaç.


• Triar el menú Insereix → Imatge, i, dins d’a-quest, triar la pestanya Enllaç (vegeu pàgina148 del llibre de l’alumne).

g) Per imprimir una pàgina web:


• Triar l’opció Fitxer → Imprimeix.• Prémer la combinació de tecles Ctrl. + P.

h) Per publicar una pàgina web:• Fer clic en el botó de la barra de redacció.

• Triar el menú Fitxer → Publica.

• Prémer la combinació de tecles Ctrl. + Maj. + S.

Resposta pràctica. Hem de triar l’opció Anomenai desa i després seleccionar Document HTML.

Resposta pràctica.

a) Es desa un fitxer amb l’extensió html i altresfitxers que corresponen a les imatges que mos-tra la pàgina.

b) No; també és desen les imatges, tot i que aques-ta opció es pot configurar al navegador.

c) i d) Si no està activada l’opció de desar les imat-ges, la pàgina no es visualitza correctament,sinó que només es mostra el text.

Resposta lliure.

e) Un formulari, per exemple.

Resposta pràctica.

S’hauria d’incloure un text amb enllaç a una adre-ça de correu electrònic per rebre les consultes delspossibles clients.

Resposta pràctica.

Recordar novament el tema de la resolució de lesimatges.

Utilitat dels botons:

1. Obre una pàgina web en blanc.

2. Obre una pàgina web existent.

3. Desa la pàgina.

4. Publica la pàgina.

5. Obre la pàgina web ja creada al navegador.

6. Copia text, taula, imatge…

7. Retalla text, taula, imatge…

8. Enganxa text, taula, imatge...

9. Insereix enllaç intern (dins la mateixa pàgina).

10. Insereix enllaç.

11. Busca text a la pàgina.

12. Insereix una imatge.

13. Insereix una taula.

14. Insereix un formulari.

15. Verifica l’ortografia de la pàgina.

16. Imprimeix la pàgina.

17

16

PÀG. 155

15

14

13

12

11

6

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 169

SOLUCIONARI6La barra següent:

1. Tria títol, text del cos de la pàgina.

2. Color del text i dels fons.

3. Remarca el text.

4. Redueix la mida del text.

5. Augmenta la mida del text.

6. Format negreta.

7. Format cursiva.

8. Format subratllat.

9. Insereix numeració.

10. Insereix pics.

11. Alineació de paràgraf a l’esquerra.

12. Alineació de paràgraf centrat.

13. Alineació de paràgraf a la dreta.

14. Alineació de paràgraf justificat.

15. Afegeix sagnat al text.

16. Elimina sagnat del text.

La barra següent:

1. Aplica una classe a la selecció (fulls d’estil).

2. Selecciona la font.

3. Posa la selecció en una nova capa.

4. Porta l’element seleccionat al davant.

5. Envia l’element seleccionat al fons.

6. Emfasitzar: ressalta el text (cursiva).

7. Emfasitzar més: ressalta el text (negreta).

8. Terme de la definició.

9. Descripció de la definició (afegeix sagnat).

10. Enganxa a la vora esquerra.

11. Manté en el centre.

12. Enganxa al costat dret.

13. Enganxa en la vora superior.

14. Manté en el centre (vertical).

15. Enganxa a la vora inferior.

Vegeu la resposta a la pàgina 147 del llibre de l’a-lumne.

Fent clic al botó dret del ratolí a la barra d’eines apa-reix el text Personalitza la barra d’eines. Quan s’hifa clic al damunt, apareixen les icones següents:

Per afegir una icona a la barra d’eines n’hi ha proufent clic a la icona i arrossegant-la fins a la barrad’eines.

a) El 1991.

b) Al CERN (Ginebra, Suïssa).

c) Són etiquetes (formades pels signes junta-ment amb altres lletres) que determinen el for-mat o la funció de l’element incrustat entre l’ini-ci de l’etiqueta i el final.

d) Per escriure un text en negreta es necessita lamarca: …. I per escriure un text en cur-siva: ….

a) Fent clic en una cantonada de la taula amb el bo-tó esquerre i arrossegant.

b) Ctrl. + T. Als temes d’ajuda de l’aplicació aparei-xen, per exemple, les dreceres de teclat.

21

20

19

18

1 2 3 4 5 6 7 8 9 10 11121314 1516

1 2 3 4 5 6 7 8 9 101112 131415

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 170

Imagina’t que tens una imatge de 5 o 6 megapíxels. Per adaptar-la a una pàgina web:

Fes servir una aplicació de disseny gràfic. A la xarxa hi ha moltes aplicacions gratuïtes. Per exemple, Irfanview, disponible a: http://www.irfanview.com

Prement a Irfanview Languages pots baixar un fitxer per als menúsen català. L’has d’incloure en la carpeta Languages, present on hagis instal·lat l’Irfanview.

Per reduir la mida de la imatge, prem en el menú Imatge →Redimensiona/Refés la mostra. Llavors s’obre una finestra en què disposes de diferents opcions per variar la mida:• Triar una de les Dimensions estàndard a la dreta

(800 x 600, per exemple).

• Establir una nova mida d’ample. L’alçada apareix automàticament perquè la imatge no es deformi (Conserva la relació d’aspecte).

• Establir un percentatge de la imatge original: 50% redueix l’ample i l’alçada a la meitat, però la memòria ocupada per la imatge es redueix més, ja que la quantitat total de píxels es divideix per quatre.

Després prem el botó D’acord.

Prem a la icona d’enregistrat: o tria el menú Anomena i desa… i desa la imatge nova amb un nom dife-rent perquè no s’elimini el fitxer de partida.

5

4

3

1


REFORÇ

ADAPTAR IMATGES PER A LA WEB6 FITXA 1

Gairebé totes les pàgines web inclouen imatges. Cada vegada és més fàcil incorporar les nostresimatges, ja que hi ha diferents dispositius capaços de fer imatges digitals: càmeres digitals, telèfonsmòbils, agendes personals...

No obstant això, en alguns casos no interessa incloure les imatges tal com les obtenim. Per què? Perquè ocupen massa memòria i la pàgina web trigaria molt de temps a visualitzar-se.Com a conseqüència, molts internautes es cansarien d’esperar i deixarien de veure la nostrapàgina. Així doncs, hem de tenir en compte:

• La mida de les imatges. Has d’evitar d’incloure-hi imatges de més d’un megapíxel. Si volem posar una imatge amb més resolució (en un bloc de fotografia, per exemple), és recomanable incloure una imatge més petita amb un enllaç que dirigeixi cap a la imatge de mida més gran.

• Una altra manera de reduir la memòria ocupada per una imatge en format jpg és reduir-ne la resolució. Però això en redueix la qualitat.

PRACTICA

Tria una imatge feta amb una càmera digital, obre-la amb l’Irfanview i redueix-ne la mida al 25% de la midaoriginal. Després, desa la imatge amb un altre nom.

Ara obre la imatge gran d’abans, però redueix-ne la mida al 10%. Compara la memòria que ocupa la imatgede partida i la imatge final. Per exemple, a l’explorador de fitxers.

2

1

Obre la imatge gran.Si et fixes en la partinferior, veuràs la mida i la memòria que ocupa.

2

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 171


REFORÇ

CREAR UN BLOC AMB NVU6

Una de les característiques de molts blocs és la presència de notícies de manera cronològica, de manera que lesnotícies o els comentaris més recents apareixen en la part superior de la pàgina. Per això, dissenyarem la pàginaamb pocs elements:

• Un títol del bloc.

• Una taula de dues columnes i una fila. A la columna de l’esquerra posarem els nostres comentaris o els dels internautes que visiten el bloc. A la columna de la dreta anotarem algunes característiques del bloc: temàtica, autor, calendari, nombre de comentari que inclou...

Al costat de cada comentari del bloc es poden incloure, si es desitja, els elements següents:

• Títol del comentari o de l’article.

• Autor del comentari.

• Data.

• Una adreça de correu electrònic a la qual els internautes poden enviar els seus comentaris després de llegir el bloc.

El procediment a Nvu és el següent:

En primer lloc, reuneix en una única carpeta els fitxers que faràs servir al bloc; és a dir, imatges, dibuixos...

A continuació, obre Nvu i crea una pàgina nova.

Dóna a tota la pàgina un fons de color clar. Per a aixòtria el menú Format → Colors de la pàgina i dels fons.Tria l’opció Utilitza els colors personalitzats, clica a Fonsi selecciona un to clar per al fons. (1)

Escriu un títol a la primera línia. Selecciona’l i tria l’opcióde Títol 1 a la barra de format. A continuació, tria ComicSans com a tipus de lletra i augmenta una mica la midadel títol. A més a més, canvia el color del text.

Després, insereix una taula de dues columnes i una fila.La columna de l’esquerra serà més ampla que la de ladreta. Per exemple, 700 píxels d’ample per a la colum-na de l’esquerra i 300 píxels per a la segona columna.Així, la pàgina es veurà bé en monitors amb una resolu-ció de 1.024 píxels d’ample, molt típic en molts equipsmoderns.

A la columna de l’esquerra escriu el teu primer comen-tari del bloc. Hi has d’incloure, com hem dit abans: títol,autor, data i enllaç cap a la teva adreça de correu perrebre els comentaris dels internautes.

6

5

4

3

2

1

FITXA 2

Hi ha eines específiques per crear blocs, com ara Blogger, però qualsevol editor ens permet crearpàgines web i donar-los l’aparença d’un bloc. En aquesta fitxa t’indicarem alguns passos que potsseguir, tot i que el disseny de la pàgina és una cosa molt especial.

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 172


Per fer-ho, escriu la frase Enviar comentari, selecciona-la, tria el menú Inserir →Enllaç i, a la finestra que s’obre, escriu una adreça de correu electrònic, fes clic en l’opció L’anterior és una adreça de correui després prem damunt el botó Més propietats. A continuació, selecciona l’opció L’enllaç és per a ser obert…en una nova finestra (2). D’aquesta manera, quan l’internauta hi faci clic se li obrirà una nova finestra i podràcontinuar llegint el nostre bloc.

A la columna de la dreta, escriu el teu nom o sobrenom, la temàtica del bloc, el nombre de comentari que inclou el bloc i altres aspectes que creguis oportuns.

Tingues en compte que les imatges que s’incloguin a la pàgina han de «pesar poc». És a dir, cal reduir la resolució i la mida de les imatges fetes amb una càmera digital, per exemple.

Dóna un color de fons fosc a la columna de la dreta. Per a això, situa-t’hi, fes clic amb el botó dret del ratolí i tria l’opció Colors de fons de la taula o la cel·la.

Al final, el bloc haurà de mostrar un aspecte semblant al següent:

Quan acabis, prem la icona per veure com es visualitza la pàgina en un navegador. Així podràs anar polint els detalls de la pàgina.

Recorda que per publicar el bloc has de tenir un espai web assignat. Consulta-ho amb el teu professor o professora abans de publicar-lo.

Si el publiques, recorda que per atreure internautes és interessant:

• Enviar l’adreça URL de la pàgina del bloc als teus amics que visitin el bloc. D’aquesta manera aconseguiràs més visitants.

• Revisar el teu compte de correu regularment per llegir els comentaris dels internautes que el visiten.

• Actualitzar la columna de l’esquerra de la taula amb els comentaris suggerits pels internautes que et semblinoportuns o per nous comentaris teus. Recorda que allò típic d’un bloc és incloure els comentaris més recents a la part superior de la pàgina per facilitar-ne la lectura.

8

7

REFORÇ

CREAR UN BLOC AMB NVU6 FITXA 2 (Continuació)

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 173


AMPLIACIÓ

PUBLICAR UN ÀLBUM WEB (I)6 FITXA 3

Cada vegada es comparteixen més imatges a la xarxa. Moltes vegades, el nostre interès per crearuna pàgina web es redueix a mostrar una sèrie de fotografies fetes en una festa amb els amics, en el nostre lloc de vacances, etc. Quan les pengem a la xarxa, les posem a disposició de tots els nostres familiars i amics, encara que no visquin a prop nostre.

En aquesta fitxa aprendràs a crear una pàgina web de manera automàtica fent servir una aplicació gratuïta queserveix per catalogar moltes imatges: XnView.

Visita la pagina web d’XnView per baixar el programa. Baixa la versió completa que inclou el català.

http://perso.orange.fr/pierre.g/xnview/enhome.html

Selecciona l’idioma català al menú Eines →Opcions → Interfície.

A la part de l’esquerra pots explorar les teves carpetes. Vés cap a la carpeta on tens les imatges que volspublicar. Les miniatures d’aquestes apareixeran en pantalla.

Tria les imatges que formaran part de la web. Recorda que has de prémer la tecla Ctrl. i fer clic perseleccionar moltes imatges.

Tria el menú Crea… →Pàgina web…5

4

3

2

1

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 174

AMPLIACIÓ

PUBLICAR UN ÀLBUM WEB6 FITXA 3 (Continuació)

A la finestra que hi apareix podem triar diverses opcions: 6

Prem el botó Crea.7

S’obrirà el navegador amb la pàgina creada. A l’esquerra es mostren les miniatures de les fotos seleccionades,i a la dreta, la foto que seleccionem a la seva mida.

8

Títol de pàgina.

Nombre de columnesde la taula en quès’insereixen lesimatges.

Plantilla triada per a la pàgina. Les diferentsplantillesproporcionen undisseny diferent a la pàgina creada.

Dimensions de lesminiatures que esmostraran a la pàginaweb creada.

Informació queapareixerà al costatde les imatges<Filename> → Nom.

Obre el navegadorquan es creï lapàgina.

Ordre en què esmostraran les fotosa la pàgina creada.

Directori en quèes desa la pàginaweb creada.

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 175


AMPLIACIÓ

PUBLICAR UN VÍDEO A LA XARXA6 FITXA 4

L’arribada de la banda ampla permet un flux de dadesmés gran a Internet. Per això ara ja podem compartirvídeos, una cosa impensable fa pocs anys. Hi hadiverses pàgines web que ens permeten allotjarvídeos, tot i que el 2007 Youtube és, sens dubte, el lloc més visitat.

Per penjar un vídeo a la xarxa i compartir-lo amb altres internautesnecessites el vídeo. Normalment es pengen vídeos curts, ja quel’espai disponible per a cada usuari és limitat.

Tria el vídeo que vols penjar a la xarxa. Recorda que has dedemanar permís a les persones que hi surten. Procura queocupi menys de 100 MB.

Visita la pàgina corresponent a Youtube:http://www.youtube.com

Per poder penjar vídeos t’has de registrar. Recorda que no calel nom complet.

Automàticament t’enviaran un missatge a l’adreça de correuintroduïda per validar el registre. Fes clic a l’enllaç i apareixdirectament un pàgina on pots començar a penjar un vídeoprement en l’opció Upload Videos.

En la finestra següent anota el títol del vídeo, la descripció i lesetiquetes gràcies a les quals es podrà trobar en fer cerques.Indica també la temàtica: música, vacances, etc.

Prem el botó Continue uploading.

Apareix una nova finestra on tries el vídeo que tens al teuordinador (Browse).

Després, decideix si el vídeo serà públic (tothom el podrà veure) o privat (visible per a tu i per a les personesque triïs). Una opció permet enviar correu per notificar que el vídeo puja.

Finalment, prem damunt l’opció Upload Video. El vídeo ja està disponible a la pàgina de Youtube i es podràvisualitzar.

9

8

7

6

5

4

3

2

1

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 176


AMPLIACIÓ

BANC DE DADES. INFORMACIÓ COMPLEMENTÀRIA6 FITXA 5

A LA XARXA

Notes

BLOCS EN CATALÀhttp://www.bloc.cat/

Aquesta web presenta una llista deblocs. Aquests estan agrupats percategories. A més a més, a travésd’aquesta pàgina l’usuari pot crear elseu bloc de manera gratuïta i guiada.

TOT SOBRE NVUhttp://www.softcatala.org/projectes/mozilla/nvu/faq.html

En aquesta pàgina es recopilendiferents recursos (programari lliure,etc.) disponibles en català.

EINES D’EDICIÓhttp://www.xtec.cat/at_usuari/guies/internet/web/guiahtm/eines.htm

Aquí s’inclouen consells i recursosdestinats a l’aprenentatge de lacreació de pàgines web.

BAIXA’T L’EDITOR NVUhttp://www.softcatala.org/wiki/Nvu

Pàgina des d’on es pot baixar l’editorNvu. Inclou recursos d’ajuda endiversos idiomes.

CREACIÓ DE PÀGINES WEBhttp://pages.google.com/

Aquí podràs crear la teva pàgina webde manera senzilla i publicar-la. Calser usuari registrat (gratuït) Google per utilitzar-la.

BLOC FOTOGRÀFIChttp://albertorot.blogspot.com/

És un bloc fotogràfic. Recopilaestupendes fotografies i enllaços a altres pàgines de fotografiainteressants.

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 177


AVALUACIÓ

AVALUACIÓ6 FITXA 6

NOM: CURS: DATA:

Observa la pàgina web següent:

Assenyala-hi els elements següents:

a) Text

b) Imatge

c) Enllaços

d) Vídeo

Què és una adreça URL? Fes servir un cercadoren un navegador i escriu l’adreça URL del Zoo deBarcelona.

Observa l’aspecte de la pantalla de l’ordinadorquan s’obre l’editor de pàgines web Nvu:

Retola-hi:

a) El botó per inserir un enllaç.

b) El botó per publicar la pàgina.

c) La barra de format.

d) La pestanya per previsualitzar la pàgina.

e) El botó per imprimir la pàgina.

Obre Nvu al teu ordinador i escriu en un docu-ment nou un llistat amb el nom i el telèfon de totsels teus amics. Insereix una taula de dues colum-nes. Escriu el títol del llistat en negreta. Els nomsen blau i els números telefònics en vermell. Dó-na-li un fons groc clar al document.

Indica com s’obre aquesta finestra a Nvu.

Relaciona el procediment que has de fer a Nvuamb l’acció corresponent. Has de tenir en comp-te que hi ha diversos procediments que poden do-nar lloc a una mateixa acció:

6

5

4

3

2

1

a) Menú Insereix → Imatge.

b) Seleccionar una imatge

i fer clic al botó

de la barra de redacció.

c) Fer clic al botó


d) Fer clic al botó


e) Seleccionar una paraula

i fer clic al botó


1.Inserir una imatge.

2.Inserir una taula.

3.Inserir un enllaç en una paraula.

4.Inserir un enllaç en una imatge.

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 178


AVALUACIÓ

AVALUACIÓ6 FITXA 6 (Continuació)

NOM: CURS: DATA:

Imagina’t que has d’inserir una taula com la se-güent en una pàgina que estàs elaborant amb Nvu.

Enumera els passos necessaris per elaborar-la.

En Pol ha creat una pàgina web on ha reunit 200fotografies digitals que ha fet amb la càmera ambla màxima resolució.

a) Què creus que passarà quan es carregui la pà-gina d’en Pol? Per què?

b) Què creus que hauria d’haver fet?

8

7

Roma

París

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 179

� GUIA TECNOLOGIES TERCER ESO � MATERIAL FOTOCOPIABLE © GRUP PROMOTOR SANTILLANA EDUCACIÓ, SL �

AVALUACIÓ

AUTOAVALUACIÓ6 FITXA 7

180

NOM: CURS: DATA:

Assenyala els elements que pots trobar en una pà-gina web:

a) Text escrit.

b) Fotografies i dibuixos.

c) Vídeos.

d) Tots els anteriors.

Els enllaços d’una pàgina web poden estar asso-ciats a...

a) Una imatge.

b) Una adreça de correu electrònic.

c) Una altra pàgina web.

d) Totes les anteriors.

Per crear una pàgina web pots fer servir:

a) Un cercador.

b) Un editor de pàgines web.

c) Un navegador.

d) Un full de càlcul.

Abans de publicar-la, podem visualitzar una pà-gina web creada amb Nvu tal com es mostraria enun navegador seguint el procés següent:

a) Fent clic a

b) Fent clic a

c) Fent clic a

d) Fent clic a

Quines tasques pots fer amb la barra de formatd’Nvu?

a) Copiar i enganxar un text.

b) Subratllar un títol.

c) Inserir un enllaç.

d) Visualitzar el document en format html.

Quines tasques pots fer amb la barra de redacciód’Nvu?

a) Centrar el text.

b) Augmentar la mida de la font.

c) Obrir una pàgina web ja existent.

d) Posar una paraula en negreta.

Quin botó has de prémer per publicar unes pà-gines web des de Nvu?

a)

b)

c)

d)

Què passa en prémer el botóde la barra de redacció d’Nvu?

a) S’imprimeix la pàgina.

b) Es visualitza el document en format html.

c) Es publica la pàgina.

d) S’inicia la revisió ortogràfica.

Per publicar una pàgina web elaborada amb Nvu cal:

a) Prémer el botó Publicar de la barra de re-dacció.

b) Aconseguir una adreça FTP.

c) Aconseguir un nom d’usuari i una contra-senya.

d) Totes les anteriors.

En prémer en el menú Format i colors de pàginaa Nvu:

a) Podem modificar només el fons de la pàgina.

b) Podem modificar només el color del text queapareix a la pàgina.

c) Podem modificar el color del text, el colordel fons i el color dels enllaços.

d) Podem modificar el color de fons d’unaimatge inserida a la pàgina.

A la finestra Propietat de la pàgina d’Nvu po-dem definir:

a) L’adreça URL en què s’allotjarà la pàgina web.

b) El nom de l’autor de la pàgina, la descrip-ció i el títol d’aquesta.

c) El nom del servidor on s’allotjarà la pàginaweb un cop publicada.

d) El color de fons de la pàgina.

11

10

9

8

7

6

5

4

3

2

1

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 180


AVALUACIÓ

SOLUCIONS6 FITXA 8

181

NOM: CURS: DATA:

Observa la pàgina web següent:

Què és una adreça URL? Fes servir un cercadoren un navegador i escriu l’adreça URL del Zoo deBarcelona.

És l’expressió que identifica les pàgines web. Partd’aquesta expressió fa referència al servidor on hiha allotjada la pàgina i l’altra part fa referència ala ruta de la pàgina dins el servidor.

La URL de la pàgina web del Zoo de Barcelona es:

http://www.zoobarcelona.com

Observa l’aspecte de la pantalla de l’ordinadorquan s’obre l’editor de pàgines web Nvu:

Obre Nvu al teu ordinador i escriu en un docu-ment nou un llistat amb el nom i el telèfon de totsels teus amics. Insereix una taula de dues colum-nes. Escriu el títol del llistat en negreta. Els nomsen blau i els números telefònics en vermell. Dó-na-li un fons groc clar al document.

Resposta pràctica.

Indica com s’obre aquesta finestra a Nvu:

Hi ha diverses possibilitats:

• La finestra s’obre fent doble clic en una imatge iseleccionant la pestanya Aparença.

• Inserint una imatge i seleccionat la pestanya Apa-rença.

• Seleccionant una imatge, prement amb el botódret del ratolí damunt d’aquesta, seleccionat elmenú Propietats de la imatge i seleccionant lapestanya Aparença.

Relaciona el procediment que has de fer a Nvuamb l’acció corresponent. Has de tenir en comp-te que hi ha diversos procediments que poden do-nar lloc a una mateixa acció:

a → 1; b → 4; c → 1; d → 2; e → 3.

Imagina’t que has d’inserir una taula com la se-güent en una pàgina que estàs elaborant amb Nvu.

Per inserir una taula de dues files i dues columneshi ha dues possibilitats:

• Fer clic al botó de la barra de redacció itriar dues files i dues columnes.

• Triar el menú Insereix → Taula i triar dues filesi dues columnes.

En Pol ha creat una pàgina web on ha reunit 200fotografies digitals que ha fet amb la càmera ambla màxima resolució.

a) Trigarà molt a visualitzar-se al navegador perquèles imatges triguen molt a carregar-se.

b) Posar menys imatges o posar-les amb menys re-solució i amb enllaços a altres pàgines.

8

7

6

5

4

3

2

1

Imatge

Enllaç

Text

Vídeo

Publicar

Enllaç

Barra de format

Imprimir

Previsualitzarla pàgina

d; d; b; b; b;

c; c; d; d; b; b.11109876

54321

AUTOAVALUACIÓ

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 181


6 CONTINGUTS PER SABER-NE MÉS...

LES NOSTRES FOTOS A LA XARXAFITXA 9

182

NOM: CURS: DATA:

Allotjar noves fotos a la xarxa

Algunes pàgines disponibles gratuïtament ens permeten allotjar fotografiesa la xarxa. Per exemple, Flickr, a la qual podem accedir des de l’adreça se-güent: http://www.flickr.com

L’avantatge d’aquest servei és que no necessitem ocupar espai en el nos-tre disc dur. A més a més, les nostres fotos estaran disponibles per a totsels internautes. Tot això d’una manera senzilla, sense instal·lar cap aplica-ció en el nostre ordinador.

Per publicar les teves fotos a Flickr, segueix els passos següents:

Visita la pàgina http://www.flickr.com i prem el botó Sign up per ac-cedir a aquest servei. En la pàgina següent, prem novament damuntSign up. Dóna’t d’alta omplint les dades sol·licitades. Recorda quepots fer servir un sobrenom en comptes del teu nom vertader i així noes facilitaran les teves dades. Quan s’acabi el procés, apareixarà unmissatge que et facilita una adreça de correu electrònic acabada [email protected]. Amb aquest nom d’usuari i la contrasenya que hasintroduït durant el procés de registre podràs accedir més tard a Flickr.

Prem el botó Continue to Yahoo Flickr.

Escriu el nom d’un nou compte i prem Create a new account.

A continuació, apareix una pàgina des de la qual pots començar a penjar imatges: Upload your first photo.Com sempre, recorda reduir la mida de les imatges fetes amb una càmera digital perquè la càrrega de lesimatges no duri massa. A Flickr hi ha un límit de 5 MB per foto per als comptes gratuïts.

Tria les fotos i afegeix etiquetes (tags) per facilitar les cerques d’imat-ges més endavant. Si tries l’opció Public, tothom tindrà accés a lesfotos que pengis.

Prem el botó Upload per penjar les fotos. Una nova pàgina avisa queel procés de càrrega s’està executant. D’acord amb la mida de les fo-tos, aquest procés durarà més o menys estona. Quan la càrrega aca-bi, apareix una pàgina on podem incloure una descripció per a ca-da foto i etiquetes. Completa les fitxes i prem Save.

Finalment, apareix una pàgina web amb les teves fotos. Si desprésaccedeixes a Flickr, les podràs buscar.

7

6

5

4

3

2

1

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 182


CONTINGUTS PER SABER-NE MÉS...

UTILITZAR UN EDITOR EN LÍNIA6 FITXA 10

NOM: CURS: DATA:

Utilitzar un editor web en línia

Ja saps que hi ha moltes maneres de crear una pà-gina web. Algunes eines, a més a més, ens perme-ten publicar la pàgina just després de crear-la. Unaalternativa útil és utilitzar una pàgina web com a as-sistent: els anomenats editors web en línia.

Hi ha diferents alternatives a la xarxa, tot i que GooglePages és un dels editors més complets. Aquesta einaens permet publicar la pàgina acabada de crear si te-nim un compte d’usuari de Google (registre gratuït).

Prem també damunt Change look per modificar l’as-pecte de la pàgina. Pots triar moltes opcions prede-finides, tal com pots veure a la imatge de la dreta.Per visualitzar l’aspecte de cada opció, prem l’opcióPreview.

Accedeix a Google Pages. Per fer-ho, has de visitar l’adreça següent:http://pages.google.com

Comença a crear la teva pròpia pàgina web. Tingues en compte que has de ser un usuariregistrat de Google, és a dir, has de tenir unaadreça de correu Gmail. Per començar a crearel teu web has d’introduir el teu nom d’usuarii la contrasenya.

• Un cop registrat, tria l’opció Create a new page.

• Escriu el títol de la pàgina.

• Després apareixerà una pàgina web amb for-ma de plantilla. Hi apareixen diferents apar-tats.

Tria el disseny de la pàgina web. Prem damunt Change layout per triar la dispo-sició dels elements de la pàgina. Per a una webamb fotografies, per exemple, pot ser interes-sant disposar d’una columna estreta a l’esquer-ra, i una de més ampla a la dreta.

3

2

1

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 183


CONTINGUTS PER SABER-NE MÉS...

UTILITZAR UN EDITOR EN LÍNIA6 FITXA 10 (Continuació)

Completa la pàgina. Als diferents apartats de la pàgina has d’introduir: • El títol de la pàgina.

• Un subtítol (opcional).

• El text de la pàgina. En aquesta part has d’inserir alguna imatge. A més a més, inclou algun enllaç per accedir a una altra pàgina web.

• El peu de la pàgina.

A la part esquerra de la pàgina apareixen una sèrie de botons per modificar el format del text, alinear paràgrafs, inserir imatges o enllaços...

4

→ Inserir una imatge.

→ Text en cursiva.

→ Color del text.

→ Tipus de lletra (font).

→ Mida del text.

Inserir un enllaç

Text en negreta

Inserir vinyetes →→→

Esquerra Dreta

Alienació dels paràgrafs.

Centre

Afegeix imatges i enllaços. Prem damunt el botó Image per afegir una imat-ge. Una finestra emergent ens permetrà triaruna imatge emmagatzemada al nostre disc duro una disponible de la xarxa.

5

Afegeix un enllaç.Després de prémer el botó Link apareix una fi-nestra per introduir la URL de la pàgina web capa la qual anirà dirigit l’enllaç.

6

Publica la pàgina.L’opció Preview mostra la pàgina creada tal comes mostrarà al navegador. És convenient previ-sualitzar la pàgina abans de publicar-la.

En prémer Publish, la pàgina apareixerà ja publi-cada a la web. Se li assigna una URL de la forma:http://usuario.googlepages.com/webon-line

No oblidis enviar un missatge per correu electrò-nic amb aquesta adreça URL perquè els teusamics visitin la pàgina que has creat.

7

877542 _ 0165-0184.qxd 10/7/07 09:09 Página 184

6 creació de pàgines web - peprifa.catpeprifa.cat/arees/tcn3/recursos3/tema6.pdf · o html que...

Documents