Manual

MANUAL WEB
David Madroñal Sánchez
1
¿Qué vamos ha hacer?
descargar con el navegador

www
fotos archivos
terminal pag web pag web pag web
Carpeta con las plantillas

de las páginas
2
Modificar archivos con notepad++ en

nuestro ordenador
terminal
fotos archivos
pag web pag web pag web
Carpeta con nuestra página

3
subir nuestra página al servidor

con FILEZILLA
terminal
fotos archivos
Servidor uib
4
tenemos una copia de la información en el

servidor y en nuestro pc
terminal Servidor uib
fotos archivos
fotos archivos


5
Si queremos modificar una página primero la modificamos en nuestro
ordenador y luego actualizamos la copia del servidor
terminal Servidor uib
fotos archivos
fotos archivos

1. modificamos
2. Subimos el archivo al servidor

con FILEZILLA
6
Material necesario
Programas
z Notepad++: Editor de texto.
z Filezilla: Cliente FTP.
z NVU : Editor Web gratuito.

Alternativas:
z Dreamweaver, FrontPage.
7
Material necesario
las plantillas.
La descarga de este material se

puede realizar desde la
siguiente dirección:
http://dea.uib.es/pdi
8
Pasos a seguir para crear la
Web personalizada.
Descargar el material y
descomprimirlo
Ubicar el material en un lugar
adecuado
Renombrar la carpeta “plantilla”
Cambiar los archivos
(currículum, foto, etc..)
Modificar cada plantilla
9
Borrar el contenido de la
carpeta archivos
Crear un pdf de nuestro
curriculum y llamarlo
‘curriculum.pdf ’
Guardar el curriculum en la
carpeta archivos.
10
Redimensionar una imagen nuestra (debe

tener un ancho de 140px).
Guardar la imagen redimensionada en la
carpeta ‘imagenes’ como ‘foto.jpg’
Para redimensionar la imagen podemos

usar:
z Paint (inicioÆprogramasÆaccesoriosÆpaint)
z http://www.myimager.com/
z Photoshop, Gimp.
11
Conceptos generales
z El navegador interpreta archivos
de texto con un determinado
formato (texto formado por
etiquetas).
z Este texto está formado por
etiquetas.
z <etiqueta > xxxxxx </etiqueta>
12
Conceptos generales
Estructura Básica de una web

<html >
<head>
<title> titulo de la página</title>
</head>
<body>
Contenido de la Web
</body>
</html>
13
Conceptos generales
Etiquetas mas usadas
z Negrita
<strong> texto </strong>
z Enlace
(se abre en una nueva ventana)
z <a href=“dirección“
href=“dirección“ target="_blank">
target="_blank"> texto </a>
(se abre en la misma ventana)
z <a href=“dirección“
href=“dirección“ > texto </a>
href contiene la dirección en la que está lo que queremos
enlazar, puede ser una web o un archivo:
z EJ: http://www.google.es
z EJ: carpeta/NOMBREARCHIVO
z Si ponemos ../ estamos subiendo un directorio
z Si ponemos el nombre de una carpeta estamos accediendo a esa
carpeta
../B
z Salto de linea
<br />
A B J
z Comentarios C D K
carpeta 2

E
z Encabezado 1 , 2 y 3 carpeta2/K
<h1> texto </h1>
carpeta1
<h2> texto </h2> 14
<h3> texto </h3>
index.html
Abrir index.html con notepad++.
Comprobar que lenguajeÆhtml

está seleccionado.
Modificar los datos indicados

(Aparece un comentario en
verde)
15
publicacions.html
Abrir publicacions.html con notepad++.
Modificar los datos indicados (Aparece un

comentario en verde).
Añadir una publicación:

z Guardar el pdf de la publicación en la carpeta
archivos.
z Copiar el bloque:
<a href=“archivos/NOMBREARCHIVO"
href=“archivos/NOMBREARCHIVO" target="_blank" >
TITULO DE LA PUBLICACIÓN
</a>
<br />
MES AÑO ( COLABORADORES )
<br />
<br />
z Pegar el bloque debajo de ‘-->’ (No debe aparecer en
verde)
16
publicacions.html
z Sustituir ‘NOMBREARCHIVO’ por el nombre del
archivo de la carpeta archivos.
Ej: archivos/publi01.pdf
En la pagina en ingles ../archivos/publi01.pdf
z Poner el titulo de la publicación en lugar de

‘TITULO DE LA PUBLICACIÓN’
z Indicar el mes, el año y las colaboraciones

sustituyendo ‘MES AÑO ( COLABORADORES )’
Borrar una publicación

z Eliminar el bloque correspondiente
z Eliminar el archivo correspondiente
17
documents.html
Abrir documents.html con notepad++.
Modificar los datos indicados (Aparece un

comentario en verde).
Añadir un documento:
z Guardar el pdf del documento en la carpeta archivos.
z Copiar el bloque:
href=“archivos/NOMBREARCHIVO" target="_blank" >
TITULO DEL DOCUMENTO
</a>
<br />
MES AÑO ( COLABORADORES )
<br />
<br />
verde)
18
documents.html
z Sustituir ‘NOMBREARCHIVO’ por el nombre del
archivo de la carpeta archivos.
Ej: archivos/doc01.pdf
En la pagina en ingles ../archivos/doc01.pdf
z Poner el titulo del Documento en lugar de

‘TITULO DEL DOCUMENTO’
z Indicar el mes, el año y las colaboraciones

sustituyendo ‘MES AÑO ( COLABORADORES )’
Borrar un documento
19
assignatures.html
Abrir assignatures.html con notepad++.
Modificar los datos indicados (Aparece un comentario en

verde).
Añadir una assignatura (pdf):

z Guardar el pdf de la asignatura en la carpeta archivos.
z Copiar el bloque:
<a href="archivos/temarioassig1.pdf" >

(6583) Nombre asignatura
</a>
<br />
<br />

verde)
20
assignatures.html
z Sustituir ‘temarioassig1.pdf’ por el nombre del
archivo correcto:
archivos/nombredelarchivo.pdf
Ej: archivos/doc01.pdf
En la página en inclés ../archivos/doc01.pdf
z Poner el codigo de la asignatura y su nombre en

lugar de ‘(6583) Nombre asignatura’
Borrar una asignatura

21
assignatures.html
Añadir una assignatura (enlace a página nueva)
z Crear la página de la asignatura modificando la
plantilla assignatura1.html y guardandola con otro
nombre en el mismo directorio que index.html.
z Copiar el bloque:
<a href="archivos/temarioassig1.pdf" >

(6583) Nombre asignatura
</a>
<br />
<br />
z Pegar el bloque debajo de ‘-->’ (No debe aparecer

en verde)
22
assignatures.html
z Sustituir ‘archivos/temarioassig1.pdf’ por el
nombre de la página de la asignatura que has
creado:
Ej: econometria.html
z Poner el codigo de la asignatura y su nombre en

lugar de ‘(6583) Nombre asignatura’
23
assignatures1.html
Modificando esta página podrás crear páginas para cada
asignatura.
Abrir assignatura1.html con notepad++.
Modificar los datos indicados (Aparece un comentario en

verde).
Añadir un mensaje
z Copiar el bloque:
MENSAJE
<br />
<br />

en verde)
z Sustituir MENSAJE por el texto deseado.
24
assignatures1.html
Añadir un enlace a un archivo:
z Guardar el archivo en la carpeta archivos.
z Copiar el bloque:
href=“archivos/NOMBREARCHIVO" >
ARCHIVO
</a>
<br />
<br />
en verde)
z Substituir NOMBREARCHIVO por el nombre del
archivo correcto :
EJ: archivos/nomarchivo.pdf
EJ: archivos/nomarchivo.doc
En la página en inglés ../archivos/nomarchivo.pdf
z Substituir ARCHIVO por el texto que deseamos que

aparezca.
25
Subir los archivos al servidor
Usaremos Filezilla
26
FILEZILLA
Estos botones
sirven para
mostrar más
o menos
información.
Si el único botón
que está marcado
MUESTRA EL ESTADO DE es el de la
LAS OPERACIONES derecha veréis
la ventana
igual que en
esta diapositiva.
MUESTRA LOS MUESTRA LOS

ARCHIVOS DE ARCHIVOS
NUESTRO DEL
ORDENADOR SERVIDOR
27
FILEZILLA
Crear un sitio Clicar aquí
Aparecerá esta
Ventana
Clicar en nuevo sitio.
28
FILEZILLA
Poner un nombre adecuado www.uib.es
Debe estar
marcado
Usuario y
Contraseña
Facilitados por
El centro de
calculo
Una vez puestos los datos correctos

clicar sobre guardar y salir 29
FILEZILLA
Como subir los archivos

z Conectar con el servidor
z Subir o borrar archivos
Conectamos con el servidor

Clicar aquí y elegir el
Sitio que acabamos
de crear
30
FILEZILLA
Elegir el lugar en el que queremos poner nuestros
archivos en el servidor (en la zona de la derecha).
Elegir el archivo que queremos subir (zona de la
izquierda) y clicar sobre el con el botón derecho del
ratón, y a continuación seleccionar Upload (Subir),
nos debería aparecer el archivo en la zona de la
derecha.
31
FILEZILLA
Si ya hemos subido el archivo y queremos borrarlo del
servidor, podemos clicar sobre el archivo en la zona de la
derecha con el botón derecho y nos aparecerá un menú,
en ese menú aparece la opción de borrar.
Si realizáis esta operación borraréis el archivo del

servidor, pero NO DE VUESTRO ORDENADOR.
32

Manual

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual

Încărcat de

Drepturi de autor:

Formate disponibile

MANUAL WEB

David Madroñal Sánchez

descargar con el navegador

terminal pag web pag web pag web

Carpeta con las plantillas

Modificar archivos con notepad++ en

pag web pag web pag web

Carpeta con nuestra página

subir nuestra página al servidor

Carpeta con nuestra página

tenemos una copia de la información en el

terminal Servidor uib

pag web pag web pag web

Carpeta con nuestra página

terminal Servidor uib

pag web pag web pag web

Carpeta con nuestra página

2. Subimos el archivo al servidor

z NVU : Editor Web gratuito.

 La descarga de este material se

 Redimensionar una imagen nuestra (debe

 Para redimensionar la imagen podemos

 Estructura Básica de una web

 Comprobar que lenguajeÆhtml

 Modificar los datos indicados

 Modificar los datos indicados (Aparece un

 Añadir una publicación:

z Poner el titulo de la publicación en lugar de

z Indicar el mes, el año y las colaboraciones

 Borrar una publicación

 Modificar los datos indicados (Aparece un

z Poner el titulo del Documento en lugar de

z Indicar el mes, el año y las colaboraciones

 Modificar los datos indicados (Aparece un comentario en

 Añadir una assignatura (pdf):

<a href="archivos/temarioassig1.pdf" >

z Pegar el bloque debajo de ‘-->’ (No debe aparecer en

z Poner el codigo de la asignatura y su nombre en

 Borrar una asignatura

<a href="archivos/temarioassig1.pdf" >

z Pegar el bloque debajo de ‘-->’ (No debe aparecer

z Poner el codigo de la asignatura y su nombre en

 Abrir assignatura1.html con notepad++.

 Modificar los datos indicados (Aparece un comentario en

z Pegar el bloque debajo de ‘-->’ (No debe aparecer

z Substituir ARCHIVO por el texto que deseamos que

MUESTRA LOS MUESTRA LOS

 Crear un sitio Clicar aquí

Clicar en nuevo sitio.

Una vez puestos los datos correctos

 Como subir los archivos

 Conectamos con el servidor

 Si realizáis esta operación borraréis el archivo del

S-ar putea să vă placă și

La descarga de este material se

Redimensionar una imagen nuestra (debe

Para redimensionar la imagen podemos

Estructura Básica de una web

Comprobar que lenguajeÆhtml

Modificar los datos indicados

Modificar los datos indicados (Aparece un

Añadir una publicación:

Borrar una publicación

Modificar los datos indicados (Aparece un

Modificar los datos indicados (Aparece un comentario en

Añadir una assignatura (pdf):

Borrar una asignatura

Abrir assignatura1.html con notepad++.

Modificar los datos indicados (Aparece un comentario en

Crear un sitio Clicar aquí

Como subir los archivos

Conectamos con el servidor

Si realizáis esta operación borraréis el archivo del