CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 5) Ricardo Ferrís Castell ( [email protected] ) Departament D ’ Informàtica

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

(Sesión 5)

Ricardo Ferrís Castell

([email protected])

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


3

– Abrir SharePoint Designer

– Cerrar la página que crea por defecto


Págin

as H

TM

L


4

– Crear un nuevo ‘sitio web’


Págin

as H

TM

L


5

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


Págin

as H

TM

L


6

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


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.


7

Págin

as H

TM

L


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


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


10

Formularios

• Formularios:

Págin

as H

TM

L


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


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


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.


Págin

as H

TM

L

14

Formularios

• Controles: Entrada texto/contraseña


Págin

as H

TM

L

15

Formularios

• Controles: Entrada enviar/restablecer


Págin

as H

TM

L

16

Formularios

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


Págin

as H

TM

L

17

Formularios

• Controles: Entrada archivo

Págin

as H

TM

L


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


19

Formularios

• Controles: Menus cuadro desplegable

Págin

as H

TM

L


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.


Págin

as H

TM

L

21

Formularios

• Controles: Area de texto


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.


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.


Págin

as H

TM

L

24

Formularios

• Controles: Cuadro de grupo/Leyenda

Págin

as H

TM

L


25

Formularios

Ej:

Págin

as H

TM

L


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.


27


28

Págin

as H

TM

L


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


29

• Contenidos multimedia incrustados: Complementos


Págin

as H

TM

L


30

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


Págin

as H

TM

L


31

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

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


Págin

as H

TM

L


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


33


• Capas

Págin

as H

TM

L


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.


Págin

as H

TM

L


35

• Marcos


Págin

as H

TM

L


36

• Otros elementos interesantes proporcionados por SharePoint


Págin

as H

TM

L


37

• Otros elementos interesantes proporcionados por SharePoint


Documents

CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 5) Ricardo Ferrís Castell ( [email protected] ) Departament D ’ Informàtica