Tractar amb arxius

Un lloc web es compon de molts arxius: contingut de text, codi, fulles d'estil, contingut multimèdia, i així successivament. Quan estigueu construint un lloc web, necessitareu muntar aquests arxius en una estructura assenyada al vostre ordinador, assegurar-vos que poden parlar l'un a l'altre, i obtenir tot el seu contingut buscat, abans de que finalment els pujeu a un servidor. Tractar amb arxius descriu alguns problemes que heu de tenir en compte perquè pugueu establir una estructura d'arxius assenyada per al vostre lloc web.

On ha de viure el lloc web en l'ordinador?

Quan treballeu un lloc web en local en el vostre ordinador, heu de tenir tots els arxius relacionats en una sola carpeta que reflecteix l'estructura d'arxius de la pàgina web publicada al servidor. Aquesta carpeta pot viure en qualsevol lloc que us agradi, però cal posar-la en algun lloc on es pugui trobar fàcilment, potser en el escriptori de la vostra carpeta d'inici, o en l'arrel del disc dur.

  1. Trieu un lloc per emmagatzemar els vostres projectes web. A continuació, creeu una nova carpeta anomenada web-projects (o similar). Aqui és on viuran tots els vostres projectes web.
  2. Dins d'aquesta primera carpeta, creeu una altra carpeta per emmagatzemar el vostre primer lloc web. Nomeneu-ho test-site (o alguna cosa més imaginativa).

Un a part en l'embolcall i espaiament

Us donareu compte de que al llarg d'aquest article, us demanarem que nomeneu les carpetes i arxius completament en minúscules i sense espais. Això és perquè:

  1. Molts equips, especialment en servidors web, són sensibles a les majúscules i minúscules. Així, per exemple, si poseu una imatge a la vostra pàgina web en la prova in test-site/MyImage.jpg, i després en un arxiu diferent intenteu invocar la imatge com test-site/myimage.jpg, pot ser que no funcioni.
  2. Navegadors, servidors web, i llenguatges de programació no manegen espais de forma coherent. Per exemple, si utilitzeu espais en els noms d'arxiu, alguns sistemes poden tractar el nom d'arxiu com dos noms d'arxiu. Alguns servidors substituiran els espais en els noms d'arxiu amb "%20" (el codi de caràcters d'espais en els URI), trencant tots els seus enllaços. Es millor separar les paraules amb guions o subratllats: my-file.html o  my_file.html.

Per aquestes raons, el millor és tenir l'hàbit d'escriure els noms de carpetes i arxius en minúscules i sense espais, almenys fins que sapigueu que és el que esteu fent. D'aquesta manera evitareu un menor numero de problemes.

Quina estructura ha de tenir el lloc web?

A continuació, anem a veure quina estructura ha de tenir el nostre lloc de prova. Les coses més comuns que tindrem en qualsevol projecte de lloc web que creiem són un arxiu índex HTML i carpetes que continguin imatges, arxius d'estil i arxius de scripts. Crearem aquests ara:

  1. index.html: Aquest arxiu contindrà generalment el contingut de la vostra pàgina d'inici, és a dir, el text i les imatges que la gent veu quan accedeixin per primera vegada al vostre lloc. Usant el vostre editor de text, creeu un nou arxiu anomenat index.html i guardeu-ho just dins de la carpeta test-site.
  2. carpeta d'imatges: Aquesta carpeta contindrà totes les imatges que utilitzeu en el vostre lloc. Creeu una carpeta anomenada images, dins de la carpeta test-site.
  3. carpeta d'estils: Aquesta carpeta contindrà el codi CSS per donar estil el vostre contingut (per exemple, l'establiment de text i colors de fons). Creeu una carpeta anomenada styles, dins de la carpeta test-site.
  4. carpeta de scripts: Aquesta carpeta contindrà tot el codi JavaScript que s'utilitza per afegir funcionalitat interactiva al vostre lloc (per exemple, els botons que carreguen dades quan es fa clic). Crear una carpeta anomenada scripts, dins de la carpeta test-site.

Nota: En ordinadors Windows, és possible que tingueu problemes per veure els noms dels arxius, ja que Windows té una opció molesta anomenada Ocultar extensions per a tipus d'arxiu coneguts, activat per defecte. En general, podeu desactivar aquesta opció, aneu a l'Explorador de Windows, seleccioneu l'opció Opcions de carpeta..., desmarqueu la casella Ocultar les extensions dels tipus d'arxiu coneguts i fent clic a OK. Per obtenir informació més específica sobre la vostra versió de Windows, feu una cerca de Yahoo!

Rutes d'arxius

Per fer que els arxius parlin uns amb uns altres, heu de proporcionar una ruta d'accés entre ells - bàsicament una ruta per a un arxiu sap on és l'altre. Per demostrar això, introduirem una mica d'HTML en el nostre arxiu index.html, i farem que es vegi la imatge que vam escollir en l'article. "Quin aspecte tindrà en el vostre lloc web?"

  1. Copieu la imatge que vau escollir anteriorment a la carpeta images.
  2. Obriu el vostre arxiu index.html, i inseriu el codi següent a l'arxiu exactament com es mostra. No es preocupeu per tot el que significa per ara - veureu les estructures amb més detall més endavant en la sèrie. 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>
  3. La línia <img src="" alt="My test image"> és el codi HTML que insereix una imatge a la pàgina. Hem de dir-li a l'HTML on és la imatge. La imatge es troba dins del directori images, que està en el mateix directori que index.html. Per caminar per l'estructura de l'arxiu de index.html fins a la nostra imatge, la ruta de l'arxiu que necessitaríeu és images/your-image-filename. Per exemple, la nostra imatge es diu firefox-icon.png, de manera que la ruta de l'arxiu és images/firefox-icon.png.
  4. Introduïu la ruta de l'arxiu en el codi HTML entre dobles cometes del codi src="".
  5. Deseu el fitxer HTML, després carregar-la en el vostre navegador web (doble clic al fitxer). Heu de veure la nova pàgina web que mostra la imatge!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Algunes regles generals per a les rutes d'arxius:

  • Per enllaçar a un arxiu de destinació en el mateix directori que el fitxer HTML que ho invoca, només heu d'utilitzar el nom d'arxiu, per exemple, my-image.jpg.
  • Per fer referència a un arxiu en un subdirectori, escriviu el nom del directori davant de la ruta, a més d'una barra inclinada, per exemple, subdirectory/my-image.jpg.
  • Per enllaçar a un arxiu de destinació en el directori anterior de l'arxiu HTML que ho invoca, escriviu dos punts (..). Així per exemple, si index.html estava dins d'una subcarpeta test-site i my-image.png estava dins de test-site, es pot fer referència a my-image.png des d'index.html utilitzant ../my-image.png.
  • Es poden combinar aquests tant com vulgueu, per exemple ../subdirectory/another-subdirectory/my-image.png.

Per ara, això és tot el que necessiteu saber.

Nota: El sistema d'arxius de Windows tendeix a utilitzar barres invertides, no barres diagonals, com, per exemple, C:\windows. Això no importa - fins i tot si esteu desenvolupant el vostre lloc web en Windows, heu d'utilitzar barres diagonals en el vostre codi.

Què més es pot fer?

Això és tot per ara. La vostra estructura de carpetes ha de ser alguna cosa com això:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file