Gallery

Descripció

Aquest projecte consisteix a realitzar una galeria d'imatges que reuneixi les següents característiques:

Característiques tècniques

1. Característiques de compatibilitat
   1. Técniques de programació
      
      

llistat de llenguatjes de programacio empleats

llenguatge	funcio desenvolupada
HTML	estuctura i continguts.
CSS	diseny grafic i l'estil.
JavaScript	part dinamica de la web que s'executa en el propi navegador.
PHP	part dinamica de la web que s'executa en el servidor
XML	enmagatzema la informacio necesaria, fa una funcio molt similar a una base de dades.

Compatible amb tots els navegadors W3c compatibles, les proves s'han fet amb el navegadors Firefox, Opera, Internet Explorer, Google Chrome, Safari i SeaMonkey .
S'han apreciat petites diferencies, cosa bastant normal perquè son produïdes per els diversos motors de renderitzat.

1. característiques tècniques de les imatges:
   • La galeria se selecionada segons els seguents criteris:
     
     1. usuari actiu
     2. categories seleccionades
        
        
2. operacions de les imatges
   • possibilitat de drag de la imatge (anterior / següent)
   • Seleccionar Imatge
   • demana informació per correu electrònic de la imatge
   • mostrar la imatge següent
   • mostrar la imatge anterior
   • Rotar la imatge, es pot rotar de les següents formes:
     
     1. Rotar 90 graus en sentit horari
     2. Rotar 90 graus en sentit antihorari
     3. Rotar 90 graus totes en sentit horari
     4. Rotar 90 graus totes en sentit antihorari
     5. Restaura la rotació de l'imatge
     6. Restaura la rotació de totes les imatges
        
        
3. característiques gràfiques: ( elements que es tenen que mostrar i distribuir dins la pagina)
   1. menú de selecció de categories
   2. barra on es mostren les imatges
   3. àrea on es mostra la imatge
   4. barra de informació de l'imatge mostrada
   5. barra de menú amb les opcions de les imatges
   6. àrea on es mostra les imatges relacionades amb la mostrada o si esta seleccionada, una llista amb les imatges seleccionades i les seves característiques de compra
   7. àrea on es mostra la informació de depuració de programari ( oculta nomes visible durant el desenvolupament)

Estructura XML

Amb aquesta estructura obtenim de forma ordenada les dades necesaries per generar tota la galeria.

Exemple del XML utilitzat

<?xml version="1.0" ?> versio del XMl

   <gallery name='simulations' unavailable='000000.jpg' > informacio de la galeria

      <img id='000001' name='000001' desc='000001' src='000001.jpg' >  dades de la imatge

         <keywords> llistat de paraules clau per determinar a quina categoria pertany

             <category name='col.leccio' value='2009'></category> paraula clau 
             <category name='type' value='galo'></category>
             <category name='theme' value='natura'></category>
             <category name='size' value='15 cm'></category>

          </keywords>

          <allow> llista de usuaris autoritzats

             <user name='estanis' ></user>usuari autoritzat
             <user name='pascual' ></user>
             <user name='xavier'  ></user><br>
          </allow>

          <deny> llista de usuaris no autoritzats

             <user name='CADT'   ></user>usuari no autoritzat
             <user name='walter' ></user>
             <user name='josep'  ></user>

          </deny>

       </img>

       <img id='000002' name='000002' desc='000002' src='000002.jpg' > imatge seguent amb la mateixa estructura

      ....

   </gallery>

Codi font

funcions JavaScript

1. gallery init function
2. $ function
3. gallery resize function
4. gallery getXML function
5. gallery show(galleriname) function
6. gallery getmenu(xml) function
7. check_pics() function