Aplicacions web

UF2: Gestors d’arxius web

Jordi Pueyo Busquets

jordipueyo@inspladelestany.cat
Continguts
Introducció: Internet, conceptes i evolució

UF1: Ofimàtica i eines web

UF2: Gestors d’arxius web (5 setmanes)

UF3: Gestors de continguts

UF4: Portals web d’aprenentatge

UF5: Fonaments d’HTML i fulls d’estils

3 hores per setmana (99 hores en total)

UF2: Gestors d’arxius web

1. Instal·lació de serveis de gestió d’arxius web

a. Funcionalitats de les aplicacions de gestió d’arxius web
b. Tipus d’aplicacions de gestió d’arxius web
c. Instal·lació i configuració de les aplicacions de gestió d’arxius web
d. Administració d’aplicacions de correu web: creació d’usuaris. Permisos. Tipus d’usuari
e. Gestió d’arxius i directoris. Creació de recursos compartits
f. Indexació d’arxius i directoris
g. Seguretat del gestor d’arxius
h. Cerca i interpretació de documentació tècnica
i. Documentació del procés d’instal·lació, de les incidències aparegudes i de les solucions
aportades
B. Què és un fitxer / arxiu?

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
A. Què és un fitxer / arxiu?

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
B. Com comparteixes fitxers / arxius per
Internet?

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
A. Com comparteixes fitxers / arxius per
Internet?

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
Introducció

Un fitxer té un NOM, una EXTENSIÓ i uns permisos

(LECTURA/ESCRIPTURA)
Abans de l’era d’Internet només es podien guardar en un SISTEMA DE
FITXERS LOCAL (o en una xarxa local). El sistema de fitxers del disc dur
mostra el contingut dels discos de manera amigable i fàcil de gestionar
Introducció
- Fitxer / arxiu: Nom, extensió
- Carpeta: Lloc on guardes arxius
- Subcarpeta: Una carpeta dins d’una carpeta
Introducció

Amb l’aparició de les xarxes d’ordinadors es va crear un protocol capaç

de transferir fitxers basat en una arquitectura client-servidor, l’FTP (de
l’anglès, File Transfer Protocol, Protocol de transferència d’arxius).

L’FTP encara s’utilitza avui dia i resulta de certa

complicació per a les persones que no tenen
coneixements tècnics d’informàtica
Què és un client d’FTP?
L’FTP és un protocol de xarxa amb arquitectura client-servidor que es remunta
l’any 1973 i que va ser dissenyat per intercanviar i manipular arxius a través d’una
xarxa d’ordinadors que utilitza el protocol IP, com ara Internet. Inicialment, l’FTP
es cridava des d’una consola o terminal i tota la interfície ere en mode text, però
més endavant es van desenvolupar interfícies de tipus gràfic que el suporten
Què és un client d’FTP?

La idea és connectar un sistema d’arxius local (client) amb un de remot (servido

Linux /
Windows /
Mac OSX
…

No cal que client i servidor tinguin el mateix sistema operatiu. Es

comuniquen a través d’FTP independentment d’aquest factor
Com ens connectem a un servidor d’FTP?
Necessitem un client d’FTP

Un dels clients FTP més

utilitzats és FileZilla
Exercici: Connexió a un FTP anònim
Fem la prova de connectar-nos a un servidor anònim:

ftp://ftp.netspace.net.au/pub/ubuntu/releases/

Font:https://launchpad.net/ubuntu/+cdmirrors
Aquests servidors que fem servir com a exemple ens permeten baixar-nos per FTP la
distribució de Linux Ubuntu. Proveu de baixar una de les distribucions (ocupen uns
2GB). En acabar, podeu esborrar-la de l’ordinador de l’aula.
B. Què és el núvol? (A)

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
Introducció
Amb la irrupció d’Internet, cap a mitjans dels anys noranta, la necessitat de disposar
dels arxius va passar de ser una necessitat local a una necessitat global. És a dir,
poder disposar dels arxius a través d’Internet des de qualsevol part del món

Van néixer les aplicaciones web que pemeten tenir accés a arxius de manera remota
i senzilla, els gestors d’arxius web, que viuen al núvol!
A. Què és el núvol?

https://www.mentimeter.com/app/pr
esentation/al6xu8gucg6vbfyq2z12qi
itbfdtanbq/qbvrxgekd3kz/edit
El concepte de núvol
FTP ens evoca a la idea d’un sistema de fitxers clàssic. Per dir-ho d’una manera,
a un sistema de fitxers organitzat i que sabem “on són les coses”. Vinculat a un
sistema operatiu. Calen més coneixements tècnics per gestionar-los.

En els últims anys ha aparegut el concepte de núvol (cloud)

El núvol té a veure amb la representació abstracta que tenim actualment

dels dispositius, sistemes i elements d’interconnexió que composen
Internet, així com les seves aplicacions i serveis inherents.
El concepte de núvol
Amb el núvol tenim serveis de gestió de fitxers amb menys informació sobre la
seva estructura interna. El cloud computing és una tecnologia que ens permet, a
través d’Internet, la capacitat de gestionar i emmagatzemar els nostres arxius
en servidors remots, sense haver de preocupar-nos per aspectes tals com la
seguretat, la disponibilitat i accés permanent a la informació.
Al núvol hi trobem tres tipus diferents de serveis:
● IaaS (Infrastructure as a service)
● PaaS (Platform as a service)
● SaaS (Software as a service)
Software as a Service (SaaS)
Es tracta de qualsevol servei que fem servir a la web. El que fins ara hem conegut
com aplicació web. Programes que ofereixen prestacions sota el protocol hhttp,
com suites d’ofimàtica web o gestors de correu electrònic. Aquí també hi
inclourem els gestors d’arxius web (com Google Drive, Dropbox, Nextcloud,
Zoho Docs, etc.).
Gestors d’arxius web
Un gestor d’arxius web és
una aplicació web que
permet consultar i
manipular un sistema
d’arxius remot
Platform as a Service (PaaS)
Serveis que trobem al núvol per desenvolupar programes informàtics. En son
exemples Google Engine i Heroku, que permeten desenvolupar aplicacions fent
servir Java, Phyton o con Rails i Django..

Infrastructure as a Service (IaaS)

Recursos informàtics virtuals accessibles a tavés d’Internet sense necessitat de
tenir instal·lades màquines físiques. Amazon Web Services / Microsoft Azurre.
L’exemple més semblant que hem vist a classe: IsardVDI
Exercici: Web / FTP
Farem servir un FTP per pujar arxius d’una web simple a un servidor web.

Responem aquesta enquesta:

Exercici: Web / FTP
Decideix sobre quin tema t’agradaria fer una petita pàgina web. Una vegada
l’hagis escollit necessitaràs fer:
- Pensar un nom i crear un Logo (Ho farem amb GIMP a Office
Applications)
- Fer un text per al contingut de dues de les pàgines. Hauran d’estar
enllaçades. Per exemple, la pàgina 2 pot servir per parlar d’un tema
concret de la pàgina 1
- Buscar imatges relacionades amb els continguts
- Pensar en mostrar part de la informació en format de taula (files i
columnes)
Exercici: Web / FTP
Com que per fer la pàgina web necessitarem instal·lar un programa (Kompozer),
treballarem amb la màquina virtual d’IsardVDI que ja vam fer servir a l’anterior UF
URL d’accés:
https://pilotfp.gencat.isardvdi.com/login
Heu d’entrar-hi amb el vostre GMail de l’Institut.

Podem en marxa la màquina virtual ‘Aplicacions web’

Exercici: Web / FTP
Anem a la pàgina de Kompozer (des de la màquina virtual) i ens el descarreguem

https://sourceforge.net/projects/kompozer/
Exercici: Web / FTP
Exercici: Web / FTP
Exercici: Web / FTP
Exercici: Web / FTP
És un programari d’open
source que ens permet
fer pàgines web sense
saber encara HTML

WYSIWYG - What you

see is what you get (El
que veus és el que
obtens)
Font: https://www.jesusda.com/docs/ebooks/ebook_disenno-web-con-kompozer.pdf
Exercici: Web / FTP
Decideix sobre quin tema t’agradaria fer una petita pàgina web. Una vegada
l’hagis escollit necessitaràs fer:
- Pensar un nom i crear un Logo (Ho farem amb GIMP a Office
Applications. Setmana 6/11)
- Fer un text per al contingut de dues de les pàgines. Hauran d’estar
enllaçades. Per exemple, la pàgina 2 pot servir per parlar d’un tema
concret de la pàgina 1
- Buscar imatges relacionades amb els continguts
- Pensar en mostrar part de la informació en format de taula (files i
columnes)
Exercici: Web / FTP (1)
- 20 min: Acabem la primera versió de la pàgina web. Ens hem
d’assegurar que tenim tots els documents a la mateixa carpeta.
La podeu mantenir a la màquina virtual (ISardVDI) o passar-la a
l’ordinador local.

PUGEM LA PRIMERA VERSIÓ AL SERVIDOR WEB

- Després continuem millorant la pàgina web, per pujar una

segona versió a la pròxima classe
 Servidor: inspladelestanysmx.cat
Connexió a l’FTP
Ens connectarem al nostre hosting. Està ubicat a les instal·lacions de Cdmon
(Malgrat de Mar)
Connexió a l’FTP
Obrim FileZilla. Les dades de connexió són les següents:

Servidor: inspladelestanysmx.cat

Nom d’usuari: nomcognom

Contrasenya: (la que vàreu rebre per mail)

Port: (no cal que hi poseu res)

Transferència de dades
A la part esquerra de FileZilla hem de buscar la carpeta on tenim guardada la
pàgina web. A l’esquerra, ens apareixerà el sistema de fitxers del servidor web
inspladelestanysmx.cat.Hem de copiar els fitxers de la web allà

Una vegada hàgiu copiat els fitxers, comproveu que la vostra pàgina web ja ha
estat publicada. La URL serà:

http://inspladelestanysmx.cat/nomcognom/
Exercici: Web / FTP (1)
Durada de l’exercici: 1 hora

Acabeu el contingut de les dues pàgines web.

Podeu intentar esbrinar com posar a la pàgina web un recurs extern (un
vídeo de YouTube, un post d’Instagram.

Intenteu afegir un comptador de visites:

https://www.websiteout.net/counter.php

Quan faltin 20 minuts per acabar la classe, actualitzeu la pàgina web pujant la
nova versió per FTP (FileZilla)
Serveis d’allotjament d’arxius a la web
Guardar arxius al núvol de manera que quedin guardats de manera segura i
accessibles les 24 hores del día té diversos avantatges:

1. Reserva i conservació de recursos. Com que els fitxers estan guardats en

servidors remots no consumeixen recursos d’espai al disc ni
emmagatzemament dels nostres discs durs locals.
2. Accés multidispositiu. Podem accedir als arxius amb diversos dispositius
(PC; smartphone o tablet) amb només una connexió a Internet i un
navegador
Serveis d’allotjament d’arxius a la web
Guardar arxius al núvol de manera que quedin guardats de manera segura i
accessibles les 24 hores del día té diversos avantatges:

3. Accés compartit i cooperació. Podem compartir arxius amb altres usuaris o

col·laboradors en temps real a través d’Internet. Es poden fer servir diferents tipus
de permís (lectura, modificació, esborrat, etc.)

4. Abstracció. Amb una interfície web o bé un programa client d’escriptori podem

accedir de manera transparent a les nostres carpetes i arxius.
Serveis d’allotjament d’arxius a la web
També tenen inconvenients:
1. Falta d’accés. Si ens quedem sense
Internet, no podem accedir als nostres
arxius.
2. Condicions de servei. Depenem de
l’empresa que ens ofereix el servei
(Termes i condicions). Podem haver de
pagar alguna quota o perdre accés a
alguns serveis per algun canvi intern de
l’empresa
Humor
Serveis d’allotjament d’arxius a la web
La majoria de gegants informàtics
i sistemes operatius disposen del
seu propi sistema
d’emmagatzematge al núvol.

Microsoft, per exemple, té

OneDrive per a particulars i Azure
com a solució empresarial.

Apple, té iCloud.

Altres exemples són:

Mega, Pcloud, Mediafire, Dropbox, Flipdrive

Què hi ha dins d’un centre de dades de Google?
http://fotoeloy.com/un-paseo-virtual-por-los-centros-de-datos-de-google/
Dropbox
● Es va crear l’any 2007 als Estats Units
● Té 300 milions d’usuaris i està present a 175 països
● Està disponible per múltiples sistemes operatius
● Et deixa guardar 2GB gratuïtament. Per augmentar la capacitat, cal pagar
Exercici 1: Creem un compte a Dropbox
Exercici 1: Creem un compte a Dropbox
Ens podem registrar fent servir el compte de Google de l’institut
Serveis d’allotjament d’arxius a la web
Tasca 1: Funcionalitats de Dropbox
1. A través del navegador, crea una nova carpeta al teu compte de Dropbox que es digui
'Imatges de [Nom Cognoms'] . Exemple: 'Imatges de Jordi Pueyo'. Ves al portal de
Wikimedia Commons per buscar 5 imatges que t'agradin amb llicència Creative Commons.
Descarrega't primer les imatges al teu ordinador i després puja-les a la carpeta 'Imatges de...'
de Dropbox.
Tasca 1: Funcionalitats de Dropbox
2. Amb la teva parella (segons l'ordre en el qual us asseieu a classe) compartiu-vos mútuament la
carpeta que heu creat. Feu-ho primer amb només permisos de visualització. Comproveu que
cadascú pot veure la carpeta de l'altre al seu compte a Dropbox. Com a segon pas, torneu a
compartir la mateixa carpeta amb permisos d'edició. Caldrà que afegeixis una imatge nova
(Wikimedia Commons) a la carpeta del teu company o companya.
Tasca 1: Funcionalitats de Dropbox
3. Crea un document en blanc i fes una lectura de la presentació ‘Empezar con Dropbox Paper’.
Fes un resum (10 línies) explicant què es pot fer amb aquesta eina. Pots fer proves, segons les
teves preferències.

Barra d’eines amb

les funcionalitats
Tasca 1: Funcionalitats de Dropbox

4. Busca l'eina que et permet guardar la teva signatura i fes-la servir.

Tasca 1: Funcionalitats de Dropbox

5. Fes una sol·licitud d'arxiu al teu company/a. Junts, comproveu com

funciona aquesta prestació de Dropbox.
Sincronització amb l’ordinador local

La majoria d’aplicacions web de gestors d’arxius web ofereixen la

possibilitat d’instal·lar una aplicació d’escriptori.

Quin sentit creieu que pot tenir aquesta possibilitat?

Exercici: Instal·lació de Dropbox a Windows

https://www.dropbox.com/downloading?os=win&ref=edshelf
Exercici: Instal·lació de Dropbox a Windows
Hem descarregat aquest fitxer, que haurem d’executar.
Exercici: Instal·lació de Dropbox a Windows

https://www.dropbox.com/downloading?os=win&ref=edshelf
Exercici: Instal·lació de Dropbox a Windows
Exercici: Instal·lació de Dropbox a Windows
Exercici: Instal·lació de Dropbox a Windows
Exercici: Instal·lació de Dropbox a Windows

Si us hi fixeu, ens apareix el Dropbox com si fos una unitat de disc local
Tasca 2: Funcionalitats de Dropbox (II)
SITUACIÓ 1: foto2
Imagina't que estàs treballant en une empresa al Departament de manteniment
d'informàtica. Un dels caps de la companyia [Veure foto 1 adjunta] et crida al seu despatx
i t'exposa aquesta situació:

"No he fet servir mai cap servei d'emmagatzematge al núvol. Un client m'està compartint
informació d'alta importància per una cosa que es diu DropFox, em sembla, i no sé pas
com funciona. Vaig intentar entrar-hi, però no me'n surto de fer-ho servir des d'una web.
Hi ha alguna manera que pugui fer servir les carpetes de DropFox des del meu
ordinador? [Veure foto 2 adjunta]. Que se'm vegin com si les tingués al disc dur. Si us
plau, m'ho podries arreglar i fer un tutorial perquè els altres companys i companyes no
foto1
t'ho hagin de tornar a demanar en el futur? Moltes gràcies".

Investiga i proposa al professor una solució a aquest problema. Quan et doni l'OK,
segueix el procediment que has pensat i documenta'l. Pensa que el tutorial l'has de fer
molt bé perquè no t'ho tornin a preguntar.

Nota: Recorda qu si has d'instal·lar aplicacions, ho heu de fer des de la màquina virtual
d'IsardVDI
Tasca 2: Funcionalitats de Dropbox (II)
SITUACIÓ 2:

[Per fer aquest exercici, pots fer servir el teu telèfon mòbil]

Al cap de dues setmanes d'haver solucionat la SITUACIÓ 1, comença un nou

becari a l'empresa [Veure foto 3 adjunta], amb una visió molt diferent que el cap de
l'ús de Drobpox. El becari té uns coneixements tècnics limitats i necessita la teva
ajuda.

"El cap fa servir Dropbox per totes les seves tasques. M'han dit que fa uns dies el
vas ajudar, i ara s'està convertint en un superusuari de la plataforma. M'ho
comparteix tot a través de Windows, però jo vull poder veure els fitxers des del
meu telèfon mòbil. Em podries instal·lar l'aplicació i explicar com funciona?"

Afegeix una secció al teu tutorial explicant com instal·lar Dropbox al mòbil. Pots
agafar captures i provar-ho amb el teu telèfon
Tasca 3: Investiguem altres plataformes
1. Investiga què és la plataforma NextCloud.

● Com funciona?
● T'hi pots registrar lliurement?
● Per què destaca per proporcionar més seguretat?
● Què és un núvol privat?

2. Per què serveix WeTransfer?

● Fes la prova d'enviar un fitxer a través d'aquesta eina a un company/a de classe

● Quins tipus de fitxers són els més adequats per enviar amb WeTransfer?
● Busca una eina alternativa a WeTransfer, amb funcionalitats similars, i prova'n el seu funcionament

3. Busca informació sobre el sistema de transferència de fitxers Peer to Peer (P2P) i explica'n el seu funcionament en 10 línies.

*Els textos que entregueu seran sotmesos a un detector d'intel·ligència artificial. Recordeu que no es poden fer servir eines
d'intel·ligència artificial per escriure les respostes
Idea síncron / asíncron
FTP: Transferència de fitxers ASÍNCRONA. Què passava cada vegada que
feiem un canvi als fitxers de la pàgina web amb KompoZer?

Núvol: Transferència de fitxers SÍNCRONA. Què passa si faig un canvi a la

carpeta de Windows de Dropbox? Queda reflectit si accedim a la plataforma via
web? S’actualitza automàticament.

● Paral·lelisme. Un xat (com el WhatsApp) és síncron o asíncron? El correu

electrònic (com el GMail? és síncron o asíncron?
Nextcloud

Què és Nextcloud?
https://floss.colectic.coop/eina/nextcloud

Es pot instal·lar en un servidor privat (dades dins de la pròpia organització):

https://nextcloud.com/es/install/
(Es poden instal·lar Google Drive i Dropbox en un servidor propi?
WeTransfer

Què és WeTransfer?
https://www.xataka.com/basics/wetransfer-que-es-y-como-lo-puedes-usar-para-compartir-arch
ivos
Peer to Peer (P2P)

https://computerhoy.com/reportajes/tecnologia/p2p-que-es-489221