Memòria PseudoGoogle by Luis López

Títol del treball: PseudoGoogle Alumne: Lluís López Moreno Assignatura: Llenguatges de Programació I Professor: Jordi Márquez Data: 16/06/2009

1.- Introducció .................................................................................................................. 3 2.- Estructura del projecte................................................................................................. 4 3.- Explicació i seguiment dels conceptes treballats ........................................................ 5 4.- Especificació dels efectes de cada element ................................................................. 9 5.- Dificultats que he trobat en aquest projecte .............................................................. 14 6.- Conclusions extretes del treball................................................................................. 15 7.- Esquema de la web .................................................................................................... 15

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 2

1.- Introducció He decidit fer aquest projecte d’una web Pseudo-Google per dos motius. El primer d’ells és pel que em va dir un dia en Francesc Font, professor de l’ERAM. Em va fer entendre que aquest projecte, si el treballava molt, podria arribar a comercialitzar-se amb ell. Per posar un exemple, si una empresa relacionada amb el programari que elimina els virus informàtics veu el meu projecte, podria estar interessada en comprar-lo per utilitzar-lo com a reclam publicitari. Entenc que ja hi ha hackers informàtics que han fet proves d’aquestes, però suposo que el seu propòsit era més de reivindicació i de crear sensació de malestar general que comercial. El segon motiu pel qual he triat aquest treball és per continuar amb el projecte que vaig començar en el seu dia en l’assignatura de Gràfica Audiovisual I, amb en Quelic Berga. En aquell moment no tenia un propòsit comercial, sinó era més per fer una petita broma i per experimentar amb les diferents opcions que permetia realitzar el programari Adobe Flash CS3. D’aquesta manera he pogut comprovar que el codi HTML no està limitat només a veure pàgines web estàtiques, sinó que hi ha diferents opcions que ens permeten crear pàgines web totalment dinàmiques amb diversos efectes visuals.

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 3

2.- Estructura del projecte Per entendre el funcionament d’aquest projecte, faré una breu explicació dels passos que seguit (en els següents apartats està explicat detalladament cadascun d’aquests passos, per tal que es pugui utilitzar com a tutorial per a generacions futures que estiguin interessades en el món de la maquetació web amb efectes). Primer de tot he creat dues carpetes diferents, ja que el meu projecte consta de dues pàgines web en HTML. La intenció és que aquestes dues plantilles es carreguessin de forma al·leatòria en un arxiu programable (com seria el .php) Però com que encara no hem arribat a aquest nivell, de moment ho he deixat preparat fins que domini la tècnica dels arxius .php. En cada una de les dues carpetes s’inclou també un arxiu .CSS que s’encarregarà d’emmagatzemar tots els estils de les dues plantilles (vinculats a un arxiu reset.css per treure-li els paràmetres predeterminats que venen inclosos en un arxiu HTML). A partir d’aquí, he fet una recerca de diferents llibreries d’efectes que es poden utilitzar amb codi HTML. Finalment, vaig decidir triar la llibreria d’efectes de Scriptaculous, ja que la possibilitat de combinació d’efectes és molt més àmplia que la de jQuery o la de MooTools.

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 4

3.- Explicació i seguiment dels conceptes treballats El primer que he realitzat és una captura de pantalla de la web de Google, retallant tots els elements que en formen part. En aquest cas, com ja vaig fer una prova similar per una altra assignatura, he reutilitzat aquells elements; en algun cas, els he hagut de modificar, ja que en 4 mesos de diferència, l’interfície de Google ha variat. En primer lloc, he creat dues pàgines html, totes dues amb la mateixa estructura quant als elements visuals. Totes dues han estat realitzades amb div’s absolutes, per tal que fos més còmode a l’hora de treballar movent les capes. Per a que segueixin un posicionament, totes aquestes div’s estan incloses en una de 1024 x 600 píxels anomenada contingut, la qual està dins d’una div anomenada centrador. Aquest centrador té una mida d’1 x 1 píxel i és el que ens permetrà que la nostra web sempre quedi centrada en la pantalla. Per a que això sigui així, el div centrador tingui una col·locació a l’esquerra d’un 50%, mentre que la div contenidor té una col·locació esquerra de la meitat negativa de l’amplada total d’aquesta div; per tant, -512 (ja que la meitat de 1024 és 512). És important que aquesta col·locació estigui en negatiu; sinó, la div contenidor ens marxarà cap a la dreta. Un cop hem fet aquesta petita tasca per poder centrar la pàgina web, ara crearem totes les div’s necessàries per poder incloure els elements en la pàgina web. Per tal que aquestes estiguin regides segons la col·locació realitzada prèviament, cal anar a la secció CSS del menú de la dreta i seleccionar l’opció Elementos PA. Per començar, veurem que tenim dues div’s que són les que hem creat fa un moment. El que hem de fer és que la div contenidor estigui A DINS de la div centrador. Per fer-ho, arrosseguem el contenidor cap al centrador i, sense deixar anar el dit del ratolí, premem la tecla Pseudo Google – Llenguatges de Programació I – Lluís López

Página 5

Control, fins que al voltant del centrador apareix un requadre blau; ara ja podem deixar anar el dit del ratolí, i veurem que es crea una estructura en la que la div contenidor està a dins de la div centrador. A partir d’aquí, haurem de repetir aquest pas amb totes les div’s que creem, tenint en compte que hauran d’anar dins del contenidor i no del centrador. A continuació he fet una cerca de les diferents possibilitats que oferia la llibreria d’efectes. Per poder-les mirar, cal visitar el següent link i podem observar els diferents efectes gràcies a les petites demostracions que la pàgina ha col·locat en cadascun dels apartats dels efectes. Un cop ja tenim decidits quins paràmetres volem seleccionar, ara toca instal·lar aquesta llibreria en el nostre document de Dreamweaver. El primer que hem de fer és descarregar-nos l’arxiu .js (javascript) que ens permetrà activar els efectes que necessitem per la nostra pàgina. Hem de tenir en compte que hi ha tres vincles de descàrrega; en aquest cas, jo he agafat la primera de totes, ja que el format .zip és, segons el meu punt de vista, el més estàndard. Un cop el tenim descarregat, el descomprimir i veurem que ens apareixerà una carpeta amb el nom “scriptaculous-js-1.8.2”, la qual contindrà tres carpetes més, que són “lib”, “src” i “test”, juntament amb tres arxius independents que són “CHANGELOG”, MITLICENSE” i “README.rdoc”. El pas següent és agafar els arxius .js de les carpetes “lib” i “src” i copiar-los en una altra carpeta tots junts per posar-los en el directori on tenim preparat prèviament el nostre arxiu html. El que passa és que el Dreamweaver no detecta automàticament aquests arxius; per tant, el que haure de fer és cridar-los per a que el programari sigui conscient que estan en el directori corresponent per poder-los utilitzar. Obrim l’index.html amb Dreamweaver i aban

l’etiqueta

</head

hem

col·locar

següent

Pseudo Google – Llenguatges de Programació I – Lluís López

codi:

<script Página 6

type="text/javascript" src="javascript/prototype.js"></script>. Aquest script és el que ens permetrà que el Dreamweaver faci funcionar els efectes que ens proporciona la pàgina web d’Scriptaculous. També caldrà que repetim aquest codi canviant el nom del .j (en aquest cas, /prototype.js) pels diferents noms dels arxius que hem guardat a la nova carpeta en el directori on tenim la pàgina web. També hi ha una altra recomanació que diu que hi ha un codi que ja inclou la majoria d’efectes, que és <script type="text/javascript" src="javascript/scriptaculous.js?load=effects,dragdrop"></script> i que ens estalvia haver de carregar-los tots, però això ja va a gust del programador. En el meu cas, he utilitzat les dues opcions, per si de cas. Ara és el moment d’aplicar els efectes a totes les div’s de les quals disposa la nostra pàgina web. Per tant, agafem un dels elements qualsevol (en aquest cas, agafaré la div <div id="lletraG1"></div>) i un efecte amb el seu corresponent codi (com a exemple, seleccionaré l’efectre Pulsate, el codi del qual és onclick="Effect.Pulsate(this); return false;".) Per detectar quin és el codi en la pàgina web de scriptaculous, en la pàgina de l’efecte, veiem que a la part inferior hi ha un apartat de text que es diu Source code of this demo, en la qual detectarem el codi necessari quan veiem que hi ha la paraula onclick de color blau cel, seguit del codi de color verd. Agafem aquest codi i el col·loquem després del nom de la div en qüestió, de tal manera que quedaria de la següent manera: <div id="lletraG1" onclick="Effect.Pulsate(this); return false;"></div>. En aquesta acció es diu que fent clic (onclick=) a sobre d’aquesta mateixa capa (this), a la div div id="lletraG1" se li aplicarà l’efecte ="Effect.Pulsate(this); return false;" fent que no aparegui un altre cop aquesta capa si hi fem clic un altre cop (return false;). També podem variar la forma d’execució de l’acció, i ho podem fer de dues maneres diferents: Pseudo Google – Llenguatges de Programació I – Lluís López

Página 7

Canviant manualment l’ onclick= per una altra forma d’execució que coneguem com podria ser onmousemove= , onmouseover= , etc.

Seleccionant la div que volem canviar al forma d’execució o anar a la secció Inspector de etiquetas del menú de la dreta. Seleccionem la pestanya comportamientos i veurem que podem canviar la opció onClick per qualsevol altra només fent doble clic a sobre.

Per últim, explicaré com he aconseguit que funcioni el cercador de Google. El sistema és molt senzill, ja que Google ens proporciona un fragment de codi que introdueix. En el meu cas, he agafat el codi original i l’he modificat per adaptar-lo al meu projecte. El codi original és el següent:

<center> <FORM method=GET action="http://www.google.com/search"> <TABLE bgcolor="#FFFFFF"><tr><td> <p> <INPUT TYPE=text name=q size=45 maxlength=255 value=""> <INPUT TYPE=hidden name=hl value=es> </p> <p> <INPUT type=submit name=btnG VALUE="Búsqueda Google"> <INPUT type=submit name=btnG VALUE="Voy a tener suerte"> </p></td></tr></TABLE> Pseudo Google – Llenguatges de Programació I – Lluís López

Página 8

</FORM> </center> </div>

4.- Especificació dels efectes de cada element En aquest apartat faré una llista dels efectes emprats en les dues plantilles que formen aquest projecte, i en quins elements han estat aplicats: Google_1 Efecte onmousemove="Effect.Squish(this); return false" •

•

•

•

Efecte onmousemove="new Effect.Move(this, { x: ..., y: ... }); return false;" •

<div id=“buscarEn”> { x: -40, y: 60 }

•

<div id=“paginasEnEspanol”> { x: -15, y: -40 }

•

<div id=“la_web”> { x: 20, y: 10 }

Efecte onmousemove="new Effect.BlindUp(this, {duration: 5})" •

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 9

•

Efecte onmousemove="new Effect.DropOut(this); return false;" •

Efecte onmousemove="new Effect.Puff(this); return false;" •

•

•

•

•

•

•

•

•

•

Efecte onmousemove="Effect.Pulsate(this); return false;" •

•

•

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 10

•

•

•

Google 2 Efecte onmouseover="MM_popupMsg('…') •

<div id=“extra_15”> ('Erroooooooooooooooooor!')

•

<div id=“extra_14”> ('jajajajaj')

•

<div id=“extra_13”> ('xDDDDDD')

•

<div id=“extra_12”> ('Agobiat/da?')

•

<div id=“extra_11”> ('Vinga, que tu pots!!!')

•

<div id=“extra_10”> ('Dale a tu cuerpo alegria Macarena...')

•

<div id=“extra_9”> ('Soy tu peor pesadilla...')

•

<div id=“extra_8”> ('Ctr+alt+supr, Ctrl+alt+supr!')

•

<div id=“extra_7”> ('corre, ves i crida en Lluís que et solucioni el problema!')

•

<div id=“extra_6”> ('Imbècil')

Efecte onmouseover="new Effect.Move('this',{ x: …, y: … }); return false;" •

<div id=“extra_5”> { x: -50, y: -52 }

•

<div id=“extra_4”> { x: 80, y: 2 }

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 11

•

<div id=“extra_3”> { x:-10, y: -90 }

•

<div id=“extra_2”> { x: 40, y: 20 }

•

<div id=“extra_1”> { x: 30, y: 28 }

Efecte onmouseover="Effect.SwitchOff('this'); return false;" •

•

•

•

Efecte onmouseover="Effect.SlideUp('this'); return false;" •

Efecte onmousemove="new Effect.Scale('caixabarraescriure', 200) •

Efecte onmouseover="Effect.Pulsate('this'); return false;" •

•

•

•

•

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 12

•

•

•

•

•

Efecte onmouseover="Effect.DropOut('this');"> •

•

•

•

•

•

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 13

5.- Dificultats que he trobat en aquest projecte Tot i que hagi estat un projecte semblant al que ja vaig fer en una altra assignatura el semestre passat, he trobat algunes dificultats que en certs moments em costava tirar endavant. Un dels motius és perquè he volgut perfeccionar-ho molt i m’he exigit massa, però també perquè incorporat alguns conceptes que abans no hi eren. Per començar, un dels elements que més m’ha costat és la incorporació d’efectes de la llibreria Scriptaculous. El problema ha estat que, a banda de que està en anglès, no hi ha un tutorial per gent que s’ha iniciat fa poc. És a dir, totes les explicacions que aporten ja venen donades per enteses. Per tant, la única solució que vaig trobar va ser intentar buscar gent que hi entengués en aquests temes, i que m’orientés amb un o dos exemples fins que em quedés més clar. L’altre inconvenient que he trobat, i que m’ha impedit fer el que tenia pensat, és programar un arxiu .asp que carregués un dels dos arxius aleatòriament, de manera que l’usuari no sabés en cap moment quin dels dos arxius ha obert. En un futur tinc pensat que no només consti de dues plantilles, sinó que siguin 4 ó 5 i que realment estigui penjat a la web.

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 14

6.- Conclusions extretes del treball Tot i que sembli impossible, el llenguatge HTML també té la possibilitat de incorporar diferents efectes, tot i que calgui instal·lar diferents llibreries per fer-ho possible. Cal destacar també que no només existeix la d’Scriptaculous, sinó que també hi ha la de jQuery o la de MooTools. La única diferència amb la d’Scriptaculous és que jQuery és més per utilitats que vulguem incorporar a una web, i MooTools és semblant a Scriptaculous però amb menys efectes. A més, que quant a codi, és més comprensible que el de Flash, ja que has de tenir en compte molts més paràmetres, i com que l’HTML és més estàndard que el llenguatge ActionScript, és més fàcil de trobar ajuda.

7.- Esquema de la web

Google 1

Index.html

Reset.css

Elements de la web

Diferents efectes dels elements

Estils.css

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 15

Google 2

Index.html

Reset.css

Elements de la web

Diferents efectes dels elements

Estils.css

Pseudo Google – Llenguatges de Programació I – Lluís López

Página 16