CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 5) Ricardo Ferrís Castell (...

CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007

(Sesión 5)

Ricardo Ferrís Castell

(Ricardo.Ferris@uv.es)

Departament D’Informàtica

Págin

as H

TM

L

Creación de páginas Web con SharePoint

2

• Conectarse al servidor a traves del ‘sistema de archivos’– Abrir el ‘explorador’

– Pulsar sobre ‘Herramientas->Conectar a unidad de red’– Poner en ‘Carpeta’: \\disco.uv.es\nombre_usuario

– Pulsar sobre ‘Finalizar’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

3

– Abrir SharePoint Designer

– Cerrar la página que crea por defecto

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

4

– Crear un nuevo ‘sitio web’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

5

– Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

6

– Seleccionar todos los ficheros y directorios y pulsar sobre la flecha azul

Recuperar el ‘site’

Temario

• Introducción a internet: Cliente/Servidor.• Introducción a Office SharePoint Designer 2007.• Comenzar a crear una página web.• Trabajar con imágenes.• Hipervínculos.• Tablas.• Estilos.• Formularios.• Inserción de contenidos multimedia.

Creación de páginas Web con SharePoint

7

Págin

as H

TM

L

Creación de páginas Web con SharePoint

8

• Formularios:– Un formulario HTML es una sección de un documento que

contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menús, etc.), y rótulos (labels) en esos controles.

– Una vez rellenado el formulario se envia para que un ‘agente’ procese la información.

Formularios

Págin

as H

TM

L

Creación de páginas Web con SharePoint

9

• Formularios:Tag: <form></form>

Opciones:– method: get|post– action: Agente procesador del formulario

– Esta es la etiqueta contenedora del formulario que continene los ‘Controles’

Formularios

Págin

as H

TM

L

Creación de páginas Web con SharePoint

10

Formularios

• Formularios:

Págin

as H

TM

L

Creación de páginas Web con SharePoint

11

Formularios

• Controles:– Son los elementos que están dentro de un formulario y

sirven para que los usuarios interaccionan con el formulario.

• Casillas de verificación (checkboxes).

• Radiobotones (radio buttons).

• Entradas de texto (text input).

• Controles ocultos (hidden controls).

• Botones.

• Menús (menus).

• Selección de ficheros (file select).

• Controles tipo objeto (object controls).

Págin

as H

TM

L

Creación de páginas Web con SharePoint

12

Formularios

• Controles: EntradaTag: <input></input>

Atributos Explicación TYPE Selecciona el tipo de campo de entrada. Es obligatorio NAME Define el nombre del identificador cuyo contenido será enviado. Es

obligatorio. VALUE Inicializa el valor del campo. CHECKED Inicializa campos de entrada de tipo checkbox o radio buttons a su estado. SIZE Especifica el tamaño visible del texto. MAXLENGTH Especifica el número máximo de caracteres en un campo de entrada de tipo

texto. SRC Especifica el URL para la imagen a usar en el caso de un botón gráfico. ALIGN Especifica el alineamiento, puede ser top, middle, bottom (por defecto), left

o right.

Págin

as H

TM

L

Creación de páginas Web con SharePoint

13

Formularios

• Controles: EntradaTag: <input></input>

Opciones: typeValor del atributo Explicación

TEXT (texto) Valor por defecto. Muestra una línea de texto. PASSWORD (contraseña)

Igual que TEXT excepto que los caracteres introducidos son mostrados como *.

CHECKBOX (casilla de verificación)

Casilla de verificación con dos estados (marcada o no). Es obligatorio el uso de VALUE para especificar el nombre de la variable y el valor que toma ésta.

RADIO (botón de opción)

Elementos que operan conjuntamente, solo puede estar activado uno de ellos. Es obligatorio el uso de VALUE. Se puede indicar que un valor es por defecto utilizando el atributo CHECKED de la etiqueta INPUT.

SUBMIT (enviar)

Define un botón que envía los datos al programa del CGI. Debe existir siempre uno en cualquier formulario.

IMAGE Permite definir un botón gráfico. RESET (Restablecer)

Define un botón que inicializa los valores del formulario al valor por defecto.

FILE (archivo) Define un método para incluir un fichero en el contenido del formulario. HIDDEN (oculto)

No son visibles y proporcionan un método de enviar información sobre el estado, etc. al programa del CGI.

Creación de páginas Web con SharePoint

Págin

as H

TM

L

14

Formularios

• Controles: Entrada texto/contraseña

Creación de páginas Web con SharePoint

Págin

as H

TM

L

15

Formularios

• Controles: Entrada enviar/restablecer

Creación de páginas Web con SharePoint

Págin

as H

TM

L

16

Formularios

• Controles: Entrada botón de opción/verificación

Creación de páginas Web con SharePoint

Págin

as H

TM

L

17

Formularios

• Controles: Entrada archivo

Págin

as H

TM

L

Creación de páginas Web con SharePoint

18

Formularios

• Controles: MenusTag: <select></select>

Opciones:– name: Nombre del componente– multiple: Permite la elección de varios elementos a la vez

– Esta etiqueta contiene a las diferentes opciones elegibles

Tag: <option></option>

Opciones:– selected: Indica si la opción queda marcada por defecto

Págin

as H

TM

L

Creación de páginas Web con SharePoint

19

Formularios

• Controles: Menus cuadro desplegable

Págin

as H

TM

L

Creación de páginas Web con SharePoint

20

Formularios

• Controles: Area de textoTag: <textarea></textarea>

Opciones:– name: Nombre del componente– rows/cols: Filas y columnas que tendrá el espacio en el que

escribiremos.– readonly: Si es ‘readonly’ el texto no es editable, pero si que

se enviará con el formulario.

– El contenido de la etiqueta será el texto que se mostrará por defecto.

Creación de páginas Web con SharePoint

Págin

as H

TM

L

21

Formularios

• Controles: Area de texto

Creación de páginas Web con SharePoint

Págin

as H

TM

L

22

Formularios

• Controles: RótulosTag: <label></label>

Opciones:– for: Indica el nombre del componente al que pertenece

– El contenido de la etiqueta será el texto que se mostrará como rótulo del componente referido.

Creación de páginas Web con SharePoint

Págin

as H

TM

L

23

Formularios

• Controles: Cuadro de grupoTag: <fieldset></fieldset>– El contenido de la etiqueta son los controles que queremos

agrupar.

• Controles: LeyendaTag: <legend></legend>– El contenido de la etiqueta es el título que se muestra.

Creación de páginas Web con SharePoint

Págin

as H

TM

L

24

Formularios

• Controles: Cuadro de grupo/Leyenda

Págin

as H

TM

L

Creación de páginas Web con SharePoint

25

Formularios

Ej:

Págin

as H

TM

L

Creación de páginas Web con SharePoint

26

Formularios

• Realizar un formulario para inscribirse en el curso. En el formulario se pedirá la siguiente información:– Nombre, apellidos y e-mail del solicitante.– Si es PDI o PAS (en una selección excluyente).– Si ya ha realizado con anterioridad algún curso de formación (en un

botón de chequeo)– La provincia de nacimiento (Alicante, Castellón, Valencia, Otros en un

menu desplegable)– Un password de su elección para volver a conectarse en el futuro a la

página.– Un cuadro de texto para explicar el motivo de querer apuntarse.

• Una vez realizada la página, adjuntarle la hoja de.

• Añadir una nueva entrada en el índice de la página ‘index.html’ para que la nueva página sea accesible.

• Publicar todos los archivos creados o modificados

Temario

• Introducción a internet: Cliente/Servidor.• Introducción a Office SharePoint Designer 2007.• Comenzar a crear una página web.• Trabajar con imágenes.• Hipervínculos.• Tablas.• Estilos.• Formularios.• Inserción de contenidos multimedia.

Creación de páginas Web con SharePoint

27

Creación de páginas Web con SharePoint

28

Págin

as H

TM

L

Creación de páginas Web con SharePoint

28

• Contenidos multimedia incrustados:Tag: <embed></embed>

Opciones:– src: Fichero a incrustar– width/height: Tamaño por defecto de la ventana– autostart: true/false Indica si el fichero se reproducira o no

de forma automatica en caunto se carge (por defecto true)– loop: indica el número de veces que ser reproducirá el fichero

(por defecto 1)

– La visualización dependerá de la configuración del navegador y de los plug-ins que tenga instalados.

Contenidos multimedia

Págin

as H

TM

L

Creación de páginas Web con SharePoint

29

• Contenidos multimedia incrustados: Complementos

Contenidos multimedia

Págin

as H

TM

L

Creación de páginas Web con SharePoint

30

• Contenidos multimedia incrustados:Tag: <embed></embed>

Contenidos multimedia

Págin

as H

TM

L

Creación de páginas Web con SharePoint

31

• Sonido de fondo:Tag: <bgsound></bgsound>

Opciones:– src: Fichero a escuchar– loop: Número de veces que sonará (infinite/-1)

Contenidos multimedia

Págin

as H

TM

L

Creación de páginas Web con SharePoint

32

• Capas– Las capas no son más que unos recuadros, que pueden situarse en

cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

Otros elementos interesantes

Págin

as H

TM

L

Creación de páginas Web con SharePoint

33

Otros elementos interesantes

• Capas

Págin

as H

TM

L

Creación de páginas Web con SharePoint

34

• Marcos– Son divisiones de la página que contienen páginas html completas.– Permiten navegar entre diferentes elementos del sitio web manteniendo

ciertos elementos fijos.

Otros elementos interesantes

Págin

as H

TM

L

Creación de páginas Web con SharePoint

35

• Marcos

Otros elementos interesantes

Págin

as H

TM

L

Creación de páginas Web con SharePoint

36

• Otros elementos interesantes proporcionados por SharePoint

Otros elementos interesantes

Págin

as H

TM

L

Creación de páginas Web con SharePoint

37

• Otros elementos interesantes proporcionados por SharePoint

Otros elementos interesantes