Ricardo Ferrís Castell (Ricardo.Ferris@uv.es) Departament D’Informàtica CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 5) Ricardo Ferrís Castell (Ricardo.Ferris@uv.es)

Creación de páginas Web con SharePoint Recuperar el ‘site’ 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’ Páginas HTML Creación de páginas Web con SharePoint 2

Creación de páginas Web con SharePoint Recuperar el ‘site’ Abrir SharePoint Designer Cerrar la página que crea por defecto Páginas HTML Creación de páginas Web con SharePoint 3

Creación de páginas Web con SharePoint Recuperar el ‘site’ Crear un nuevo ‘sitio web’ Páginas HTML Creación de páginas Web con SharePoint 4

Creación de páginas Web con SharePoint Recuperar el ‘site’ Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’ Páginas HTML Creación de páginas Web con SharePoint 5

Creación de páginas Web con SharePoint Recuperar el ‘site’ Seleccionar todos los ficheros y directorios y pulsar sobre la flecha azul Páginas HTML Creación de páginas Web con SharePoint 6

Creación de páginas Web con SharePoint 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

Creación de páginas Web con SharePoint Formularios 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. Páginas HTML Creación de páginas Web con SharePoint 8

Creación de páginas Web con SharePoint Formularios Formularios: Tag: <form></form> Opciones: method: get|post action: Agente procesador del formulario Esta es la etiqueta contenedora del formulario que continene los ‘Controles’ Páginas HTML Creación de páginas Web con SharePoint 9

Creación de páginas Web con SharePoint Formularios Formularios: Páginas HTML Creación de páginas Web con SharePoint 10

Creación de páginas Web con SharePoint 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). Area de texto (text area). Páginas HTML Creación de páginas Web con SharePoint 11

Creación de páginas Web con SharePoint Formularios Controles: Entrada Tag: <input></input> Páginas HTML Creación de páginas Web con SharePoint 12

Creación de páginas Web con SharePoint Formularios Controles: Entrada Tag: <input></input> Opciones: type Páginas HTML Creación de páginas Web con SharePoint 13

Creación de páginas Web con SharePoint Formularios Controles: Entrada texto/contraseña Páginas HTML Creación de páginas Web con SharePoint 14

Creación de páginas Web con SharePoint Formularios Controles: Entrada enviar/restablecer Páginas HTML Creación de páginas Web con SharePoint 15

Creación de páginas Web con SharePoint Formularios Controles: Entrada botón de opción/verificación Páginas HTML Creación de páginas Web con SharePoint 16

Creación de páginas Web con SharePoint Formularios Controles: Entrada archivo Páginas HTML Creación de páginas Web con SharePoint 17

Creación de páginas Web con SharePoint Formularios Controles: Menus Tag: <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> selected: Indica si la opción queda marcada por defecto Páginas HTML Creación de páginas Web con SharePoint 18

Creación de páginas Web con SharePoint Formularios Controles: Menus cuadro desplegable Páginas HTML Creación de páginas Web con SharePoint 19

Creación de páginas Web con SharePoint Formularios Controles: Area de texto Tag: <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áginas HTML Creación de páginas Web con SharePoint 20

Creación de páginas Web con SharePoint Formularios Controles: Area de texto Páginas HTML Creación de páginas Web con SharePoint 21

Creación de páginas Web con SharePoint Formularios Controles: Rótulos Tag: <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áginas HTML Creación de páginas Web con SharePoint 22

Creación de páginas Web con SharePoint Formularios Controles: Cuadro de grupo Tag: <fieldset></fieldset> El contenido de la etiqueta son los controles que queremos agrupar. Controles: Leyenda Tag: <legend></legend> El contenido de la etiqueta es el título que se muestra. Páginas HTML Creación de páginas Web con SharePoint 23

Creación de páginas Web con SharePoint Formularios Controles: Cuadro de grupo/Leyenda Páginas HTML Creación de páginas Web con SharePoint 24

Creación de páginas Web con SharePoint Formularios Ej: Páginas HTML Creación de páginas Web con SharePoint 25

Creación de páginas Web con SharePoint 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. action="http://pepito.uv.es//cgi-bin/enviar.cgi" Poner un título a la página. Cambiar las propiedades de la página para que tenga un título, una descripción y unas palabras clave. Configura adecuadamente el idioma. Páginas HTML Creación de páginas Web con SharePoint 26

Creación de páginas Web con SharePoint Formularios Una vez realizada la página, adjuntarle la hoja de estilo. 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. Páginas HTML Creación de páginas Web con SharePoint

Ejercicio recopilación Añade, al principio de la página, la imagen de la Universitat de València (loguvhom.gif) con texto alternativo “Universitat de València”, con borde de 5 puntos y ancho de 90%. Convierte la imagen en un hipervínculo que enlace con la página principal de la universitat. Añade como pie de página una tabla con una fila y tres columnas. En la primera columna pondrá el nombre del curso que enlazará con la página del curso. En la segunda pondrá la fecha, centrada. En la tercera el logo del departamento de informática (infoPollo_Transparente.gif), con borde 0, ancho 100 puntos y que enlace con la página web del departamento. Guarda el fichero, publícalo y observa los resultados. Páginas HTML Creación de páginas Web con SharePoint

Creación de páginas Web con SharePoint 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 29

Contenidos multimedia 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. Páginas HTML Creación de páginas Web con SharePoint Creación de páginas Web con SharePoint 30

Contenidos multimedia Páginas HTML Creación de páginas Web con SharePoint

Contenidos multimedia Contenidos multimedia incrustados: Complementos Páginas HTML Creación de páginas Web con SharePoint 32

Contenidos multimedia Contenidos multimedia incrustados: Tag: <embed></embed> Páginas HTML Creación de páginas Web con SharePoint 33

Contenidos multimedia Realiza una página con un elemento multimedia. El origen de datos será: http://www.uv.es/rferris/Multimedia/David_Bowie_China_Girl.mpg El tamaño será de 400 puntos de ancho y 200 puntos de alto. Ponle un título, cambia adecuadamente las propiedades de la página, guárdala, publícala y observa los resultados. Cambia el origen de datos por http://www.uv.es/rferris/Multimedia/ Mclan.mp3 Guarda y publica la nueva página y observa los resultados. Páginas HTML Creación de páginas Web con SharePoint

Contenidos multimedia Sonido de fondo: Tag: <bgsound></bgsound> Opciones: src: Fichero a escuchar loop: Número de veces que sonará (infinite/-1) Páginas HTML Creación de páginas Web con SharePoint 35

Contenidos multimedia Páginas HTML Creación de páginas Web con SharePoint

Contenidos multimedia Pon a la página del curso como sonido de fondo http://www.uv.es/rferris/Multimedia/Requiem.mp3 Guarda y publica la nueva página y observa los resultados. Páginas HTML Creación de páginas Web con SharePoint

Otros elementos interesantes 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. Páginas HTML Creación de páginas Web con SharePoint 38

Otros elementos interesantes Capas Páginas HTML Creación de páginas Web con SharePoint 39

Otros elementos interesantes 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áginas HTML Creación de páginas Web con SharePoint 40

Otros elementos interesantes Marcos Páginas HTML Creación de páginas Web con SharePoint 41

Otros elementos interesantes Otros elementos interesantes proporcionados por SharePoint Páginas HTML Creación de páginas Web con SharePoint 42

Otros elementos interesantes Otros elementos interesantes proporcionados por SharePoint Páginas HTML Creación de páginas Web con SharePoint 43