![Page 1: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/1.jpg)
Diseño web con Oracle Portal
Curso prácticoJose A. Espinosa
![Page 2: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/2.jpg)
Índice
• Diseño web• Oracle Portal• Ejemplo práctico
![Page 3: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/3.jpg)
Diseño web
• Introducción• Fundamentos HTML• Diseño y usabilidad• Navegadores
![Page 4: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/4.jpg)
Introducción
• ¿Qué es la web?• Historia
–1989 Tim Berners-Lee CERN–1994 IETF HTML v2.0–1995 v3.0–1997 W3C v3.2–1997 (dic) v4.0 ISO-8879–1999 xhtml
• www.w3.org
![Page 5: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/5.jpg)
Funcionamiento de la www
• Hypertext Transmission Protocol• Modelo Cliente Servidor
–1. Petición–2. Respuesta–3. Visualización
• HTTP suele transmitir HTML que permite incluir hiperenlaces
![Page 6: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/6.jpg)
HTTP
![Page 7: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/7.jpg)
HTTP
• HTTP es el protocolo de comunicación
• Puede transmitir cualquier documento
• Establece la manera en la que “hablan” los ordenadores en la web
• Hay otros protocolos: ftp, rtsp, ...• http://www.w3.org/Protocols/rfc2616/rfc2616.html
![Page 8: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/8.jpg)
URLs
• Uniform Resource Locator–URI (Uniform Resouce Identifier)–Cualquier recurso accesible via
internet
• http://www.faqs.org/rfcs/rfc1738.html
![Page 9: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/9.jpg)
Distintos URL
• http• https• file• ftp• mailto• rtsp• tel
• about• ed2k• feed• ldap• mms• skype• smb
No todos están soportados en un navegador
![Page 10: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/10.jpg)
Sitio web
• Colección de páginas web• Disponibles a través de HTTP• Tipos (por su funcionamiento)
–Estático–Dinámico
• Incluyen otros recursos:– Imágenes–Documentos– ...
![Page 11: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/11.jpg)
Servidores web
• Responsables de:–Recibir peticiones HTTP– Interpretar los URIs–Recuperar las páginas o componerlas–Enviarlas de vuelta al cliente–Hacer accesibles el resto de recursos
• Estáticos (sirven)• Dinámicos (componen)
![Page 12: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/12.jpg)
Publicación web
• Confeccionar páginas HTML• Añadir los recursos gráficos, etc.• Colocar todo en el servidor
![Page 13: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/13.jpg)
Herramientas
• Navegadores– Internet Explorer–Mozilla Firefox
• Editores–Frontpage–Dreamweaver–NVU (Kompozer)
• Otros–Validadores, chequeadores...
![Page 14: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/14.jpg)
Navegador web
• Browser (hojeador)• Permite:
–Visualizar páginas web–Localizar y descargar URIs– Interactuar con el dispositivo–Paginar / desplazar
• Respeto a los estándares–Distintos dispositivos / misma web
![Page 15: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/15.jpg)
Dispositivos con navegador
• Móviles• PDA• Internet tablet• Consolas• Reproductores multimedia• ...
![Page 17: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/17.jpg)
Vamos a necesitar
• Verificar que disponemos de:–Navegador (IE o Firefox)–Editor de texto (notepad, ...)–Conexión a internet– ...alguna idea que desarrollar...
![Page 18: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/18.jpg)
Mi primer html
<html> <head> <title>Título de la página</title> </head> <body> <p>Hola mundo.</p> </body></html>
![Page 19: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/19.jpg)
¿Cómo verlo?
1.Grabar el archivo como ej1.html2.Abrir el navegador3.Archivo -> Abrir -> Examinar..
![Page 20: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/20.jpg)
Fundamentos de HTML
• Estructura básica• Cabecera / cuerpo• Formateado del texto• Hipervínculos e imágenes• Mejorar el diseño de páginas web
![Page 21: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/21.jpg)
HTML
• HyperText Markup Language• Lenguaje de marcadores• TAGS (etiquetas)
–<etiqueta> </etiqueta>
• Revisar nuestro “hola mundo”• Ir a cualquier página web y ver su
contenido
![Page 22: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/22.jpg)
Estructura básica
• Etiqueta con la versión html• Cabeza del documento• Cuerpo del documento
![Page 23: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/23.jpg)
Elementos
• <html>• <head>• <title>• <body>• ...
![Page 24: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/24.jpg)
Atributos
• Las etiquetas pueden llevar atributos que modifican su apariencia / comportamiento
• body admite:–bgcolor–background– text
• <body bgcolor=”red”>
![Page 25: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/25.jpg)
Colores
• #+3 números hexadecimales (00-FF)
• (rojo,verde y azul)• Hay valores
predefinidos: red, blue, pink...
• o en decimal rgb(r,g,b)
![Page 26: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/26.jpg)
Ejemplo
• Modificar el hola mundo para cambiar el color de fondo y del texto
![Page 27: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/27.jpg)
Cabecera y Cuerpo
• Los elementos de cabecera:– “declaran” sobre el contenido–No se visualizan, salvo el título– Incluyen elmentos meta para ser
analizados por los buscadores
• Los elementos del cuerpo–Son la parte visible–Pueden incluir cualquier etiqueta html
• Pero, para este curso os da igual...
![Page 28: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/28.jpg)
Cuerpo
• A
• ADDRESS
• B
• BLOCKQUOTE
• BR
• CODE
• H1
• H2-H6
• HR
• I
• IMG
• LI
• OL
• P
• PRE
• SELECT
• STRONG
• UL
![Page 29: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/29.jpg)
Texto
• Cabeceras (h1-h6)• Párrafos (p)• Saltos de línea (br)• Citas (blockquote)• Negrita (b)• Itálica (i)• Fuerte (strong)
![Page 30: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/30.jpg)
Prueba
• Crear un documento html que se vea así:
• ej2.html
![Page 31: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/31.jpg)
Formateo texto
• <font>–color– size = nº|%|em– face
• Helvetica,Arial,Times• Courier,...
![Page 32: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/32.jpg)
Listas
• Pueden ser:–Numeradas (ol)–No numeradas (ul)
• Elementos de lista–<li>elemento</li>
<ul><li>Elemento A</li><li>Elemento B</li></ul>
![Page 33: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/33.jpg)
Ejemplo
• Añadir al ultimo archivo una lista numerada
• ¿Cómo ponemos una lista dentro de una lista?
• ej3.html
![Page 34: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/34.jpg)
Hipervínculos
• La característica más “importante” de la web
• Se incluyen URIs como atributos de una etiqueta <a>
• <a href=”uri”>Texto</a>• Si el uri no lleva información de
protocolo se usa el de la petición• Si no lleva directorio se usa el
actual
![Page 35: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/35.jpg)
Hipervinculos
• Dentro de la misma página se definen índices
• < a name=”indice”>• y se referencian #indice
–<a href=”#indice”>Ir a</a>
![Page 36: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/36.jpg)
Ejemplo
• Crear una nueva hoja que tenga el índice de las anteriores
![Page 37: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/37.jpg)
Destino del vínculo
• Como atributo del tag a• target
–_blank : nueva ventana–_top : misma ventana–_self : el mismo contenedor–_parent : documento de nivel superior–otro : marco “otro”
![Page 38: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/38.jpg)
Marcos
• Forma de cargar varias páginas a la vez en distintas “ventanas”
• El cambio o recarga de alguna de las páginas no afecta al resto
• Cada ventana tiene una paginación independiente
• La página que define los marcos se llama frameset
![Page 39: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/39.jpg)
Ejemplo<HTML><HEAD><TITLE>Un documento simple con marcos</TITLE></HEAD><FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contenidos_del_marco1.html"> <FRAME src="contenidos_del_marco2.gif"> </FRAMESET> <FRAME src="contenidos_del_marco3.html"> <NOFRAMES> <P>Este conjunto de marcos contiene: <UL> <LI><A href="contenidos_del_marco1.html">Contenidos 1</A> <LI><IMG src="contenidos_del_marco2.gif" alt="Imagen"> <LI><A href="contenidos_del_marco3.html">Contenidos 3</A> </UL> </NOFRAMES></FRAMESET></HTML>
![Page 40: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/40.jpg)
Ejemplo
Marco 3
Marco 2
Marco 1
Frameset 1
Frameset 2
![Page 41: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/41.jpg)
Marcos II
• En caso de que el navegador no soporte marcos se muestra lo que aparezca tras <noframes>
• Filas y columnas–<frameset rows=”50%, 50%”>–<frameset cols=”1*,250,3*”>
• Anidamiento de marcos• Nombre
–name=”..” Permite determinar destinos
![Page 42: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/42.jpg)
Marcos III
• Frame permite–scrolling = auto|yes|no– frameborder = 1|0– src = uri–noresize–marginwidth–marginheight
• El uso de marcos ha caido en desuso
![Page 43: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/43.jpg)
IFRAME
• <iframe> Permite introducir marcos dentro del documento sin necesidad de frameset
• iframe permite:–name–width–height
![Page 44: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/44.jpg)
Ejercicios
• Crear una página con marcos que carguen todas las páginas de ejemplo que hemos creado
![Page 45: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/45.jpg)
Marcos inconvenientes
• Se pierde dirección interior• Aparición de barras de scroll• Funcionamiento incorrecto del
botón atrás – adelante• No se ve igual en todos los
navegadores
![Page 46: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/46.jpg)
Imágenes
• <img>–src = url– alt = texto–aligh = top|bottom|middle|left|right–border = número de pixels–height = pixels | %–width = pixels | %
• http://www.w3schools.com/tags/tag_IMG.asp
![Page 47: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/47.jpg)
Imágenes
• Las imágenes no se incluyen en el documento, deben existir
• La url puede ser local o remota• La colocación de las imágenes en
un documento no suele ser sencillo, y se usan otros elementos para colocarlos.
![Page 48: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/48.jpg)
Ejemplo
• Descargarse (o no) una imagen de internet e incluirla en el archivo ej3.html
![Page 49: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/49.jpg)
Herramientas
• Para poder disfrutar de algunas herramientas básicas, instalaremos lo siguiente:– firefox + webdeveloper–NVU
• http://ikariam.digimate.biz/curso/downloads/webtools.zip
• Es inocuo... Se puede borrar tras su uso o pasar a una llave usb
![Page 50: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/50.jpg)
Mejoras de diseño
• Hasta ahora elementos pobres para la maquetación
• Uso de otros elementos no visibles– tablas–divisiones–agrupamientos
![Page 51: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/51.jpg)
Tablas
• <table></table>• Dentro de una tabla se definen (en
este orden) filas y columnas• <tr>• <td></td>• </tr>
![Page 52: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/52.jpg)
Tabla con kompozer<table style="textalign: left; width: 100%;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody></table>
![Page 53: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/53.jpg)
Tipos de celdas
• Cabecera: th• Simple : td
<table> <tr> <th>UNO</th> <th>DOS</th> <th>TRES</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr></table>
![Page 54: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/54.jpg)
Unir celdas
• colspan = numero de columnas a unir
• rowspan = número de filas a unir<table> <tr> <th>UNO</th> <th>DOS</th> <th>TRES</th> </tr> <tr> <td colspan="1" rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2" rowspan="1">Celda unida</td> </tr></table>
![Page 55: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/55.jpg)
Decoración
• border : pixels del borde• celspacing : pixels entre celdas• celpadding : pixels entre borde y
contenido• bgcolor• background• bordercolor• height : altura• width : anchura
![Page 56: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/56.jpg)
Tablas anidadas
• Es posible incluir tablas dentro de otras tablas
• Muy utilizado para maquetar• Utilización de los atributos de
alineación:–align=left|center|right–valign=top|middle|bottom
![Page 57: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/57.jpg)
Ejemplo
• Conseguir la siguiente tabla:
![Page 58: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/58.jpg)
Más sobre tablas
• <thead>• <tbody>• <tfoot>• <caption>• <colgroup>
![Page 59: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/59.jpg)
Formularios
• Permiten que el usuario introduzca información
• Requiere de un mecanismo para que el servidor web pueda tratar la información recibida
• <form></form>
![Page 60: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/60.jpg)
<form>
• Atributos:– target–action = uri–method = post|get–enctype–name
![Page 61: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/61.jpg)
Elementos de formulario
• <input>– type
• text• password• checkbox• radio• submit• image• reset• button
• hidden• file
• <textarea>• <select>
–<option>–<optgroup>
• <label>– for
![Page 62: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/62.jpg)
Ejemplo
![Page 63: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/63.jpg)
Referencias
• http://www.htmlquick.com/es/reference.html
• http://www.w3.org/TR/html401/
• http://www.w3schools.com/Html/
• http://www.programacion.net/html/tutorial/curso/
•
![Page 64: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/64.jpg)
Y aquí estamos...
http://www.tiraecol.net/modules/comic/comic.php?content_id=232
![Page 65: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/65.jpg)
Diseño y usabilidad
• Hojas de estilo• Accesibilidad• Usabilidad
![Page 66: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/66.jpg)
Hojas de estilo
• Necesidad de separar–Contenido–Presentación
• CSS “Cascade Style Sheet”• Estilo• Capas :
–<div></div>–<span></span>
![Page 67: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/67.jpg)
Estilos
• Aplicación directa–Atributo style–Aplicable a cualquier etiqueta
• Ejemplo
<etiqueta style=”propiedad:valor; ... propiedad:valor”>...</etiqueta>
<p>Esto es <b style=”fontsize:14pt; color:red”>Negrita</b></p>
![Page 68: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/68.jpg)
Estilos
• ¿Qué pasa si queremos aplicar los mismos estilos en toda la página?
• P.Ej:–Que todos los párrafos tengan un tipo
de letra, los enlaces otro y las negritas otro.
– ¿escribimos estilos en todos los elementos de la página?
![Page 69: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/69.jpg)
Redefinición de etiquetas
• Etiqueta <style></style>• Permite definir estilos a nivel de
página
<style type="text/css"> Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} .Clase1 : {propiedad1:valor;...;propiedadT:valor}</style>
![Page 70: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/70.jpg)
Ejemplo
![Page 71: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/71.jpg)
Separar html de css
• Podemos poner las reglas de estilo en un archivo aparte
• Permite reutilizarlas en distintas páginas
<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">
![Page 72: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/72.jpg)
Ejemplo
h1 { color: red; fontsize: 3em;}
p {textalign: center;}
b { color: #00ffcc;}
i { backgroundcolor: yellow;}
estilo1.css
• Grabar este archivo
• Cargarlo en los archivos de ejemplo de la clase anterior
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">
![Page 73: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/73.jpg)
Herencia de estilos
• Jerarquía de etiquetas html
body
h1 p ul
li li
a aLos estilos se “heredan”de padres a hijos
![Page 74: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/74.jpg)
Herencia de estilos
/* Estilo para el documento */body {fontfamily:Verdana,sansserif;fontsize:xsmall;marginleft:0.25in; marginright:0.25in}
/* Estilo para la cabecera de nivel 2 */h1 {fontfamily:Verdana,sansserif; fontsize:14pt;color:red}
/* Estilos para otras etiquetas */b, td {fontfamily:Verdana,sansserif;fontsize:xsmall;color:olive}
th {fontfamily:Verdana,sansserif;fontsize:xsmall;color:white;backgroundcolor:#0080C0}
![Page 75: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/75.jpg)
Estilo por contexto
<style type="text/css">li a { backgroundcolor: #ffff66;}</style>
![Page 76: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/76.jpg)
Estilos en Kompozer
![Page 77: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/77.jpg)
Clases
• A veces queremos aplicar el mismo estilo a distintas etiquetas
• O no queremos aplicarlo en todas las etiquetas, solo en algunas
• Podemos añadir el atributo class=”clase” a cualquier etiqueta
• Podemos crear un selector de estilo para una clase con .clase {...}
![Page 78: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/78.jpg)
Clases
<style type="text/css">body {fontfamily:Verdana,sansserif;fontsize:xsmall}p,a,b {color:red}.BAzul {color:blue}</style>
<body>
<p>En este ejemplo vamos a ver cómo se aplican las clases.Por ejemplo, <B>esta negrita</B> utiliza el estilo definidoen el bloque, pero <B CLASS="BAzul">esta otra negrita</B>tiene un color distinto. Y no sólo podemos usar la clasepara la negrita. Por ejemplo, <SPAN CLASS="BAzul">este trozode línea también utiliza la clase para su estilo particular</SPAN></p></body>
![Page 79: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/79.jpg)
Clases
CLASS="BAzul"
![Page 80: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/80.jpg)
selectores id
• Todas las etiquetas html pueden tener un atributo id=”identidad”
• Solo puede haber 1 id con el mismo nombre en el documento
• Suelen servir para definir la estructura de la página
• Se pueden definir selectores para las regiones con un id
#Nombre_del_ID {propiedad1:valor;...;propiedadN:valor}
![Page 81: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/81.jpg)
Pseudoclases
• Hay etiquetas html que permiten saber su estado
• <a>– link : no visitado–visited : visitado–active : siendo pulsado–hover : pasando el ratón por encima
etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}
A:link,A:visited,A:active {textdecoration:none}
![Page 82: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/82.jpg)
Ejemplo
• Crear los estilos para que un enlace:–Esté subrayado y verde cuando no ha
sido visitado–Esté sin subrayar y azul cuando haya
sido visitado–Tenga el fondo amarillo cuando pase el
ratón por encima
![Page 83: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/83.jpg)
Propiedades texto
![Page 84: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/84.jpg)
Propiedades de bloque
![Page 85: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/85.jpg)
Modelo de caja
http://www.sidar.org/recur/desdi/traduc/es/css/box.html
![Page 86: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/86.jpg)
Color, fondo y listas
![Page 87: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/87.jpg)
Referencia completa
• http://www.w3schools.com/css/css_reference.asp
• http://www.cssref.com/
• http://www.w3.org/TR/RECCSS2/
• http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
![Page 89: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/89.jpg)
Las herramientas
• Mediante algunas extensiones de firefox podemos:–Ver/Modificar los css–Ver información de las etiquetas /
clases / id de los elementos
• Prueba... –Abrid cualquier página web y usad la
barra webdeveloper
![Page 90: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/90.jpg)
Navegadores
• Estándares de internet–html 4.01, xhtml– css 1.0 y 2.0
• Pensar en navegadores– IE 6, 7 (8 listo)–Firefox–Safari, camino, opera...
• Referencias– http://www.positioniseverything.net/
![Page 91: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/91.jpg)
Accesibilidad
• Capacidad de acceso a la web para discapacitados–Visuales–Motrices–Auditivas–Cognitivas
• Ayudas técnicas–Lector de pantalla– Lineas braille
![Page 92: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/92.jpg)
Pautas de accesibilidad
• Web Accesibility Initiativa (WAI). Pautas:(http://www.w3.org/WAI/ )–Al contenido en la web (WCAG)–Para herramientas de autor (ATAG)–Para agentes de usuario (UAAG)
• Normativa• Estándares
http://www.sidar.org/hera/
![Page 93: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/93.jpg)
Usabilidad
• Si algo es complicado de usar... No se usa demasiado
¡No me hagas pensar!
![Page 94: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/94.jpg)
Diseño evidente
• Cuando pensemos en un diseño web:–¿es evidente?–¿requiere pensar?
• ¿Que quieren los visitantes?–¿donde estoy?–¿por donde empiezo?–¿donde está ___ ?– ¿por qué lo llaman así?
![Page 95: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/95.jpg)
Todo no puede ser obvio
• Claridad• Nombres bien escogidos• Textos breves• Disposición de la página
![Page 96: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/96.jpg)
¿Cómo se usa la web?
• No leemos, hojeamos• No tomamos decisiones óptimas,
sino suficientes• No averiguamos el funcionamiento,
nos las arreglamos–Siempre es mejor que entiendan el
sitio a que se apañen
![Page 97: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/97.jpg)
Las ventajas del papel
• Se lee mejor y más barato• Estamos más familiarizados• Se puede leer en el baño• Herramientas de impresión mejores• Es realmente WYSIWYG• Es más rápido• ... hay cosas que podemos
aprender todavía
![Page 98: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/98.jpg)
Páginas para hojear
• Jerarquía visual clara–Ver cualquier periódico
• Usar convenciones• Dividir en secciones bien definidas• Dejar bien claros los enlaces
–¿se puede hacer click en esto?
• Eliminar el ruido visual
![Page 99: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/99.jpg)
Cuidar los textos
• Eliminar discurso innecesario• Eliminar instrucciones
–Reducir tamaño de la página–Reducir ruido visual–Dar más importancia al mensaje
importante
![Page 100: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/100.jpg)
Diseño de la navegación
• Perderse es siempre desagradable• Convenciones de navegación web
– Identificación del sitio–Secciones–Utilidades–Ubicación–Una forma de buscar–Migas (ruta)
![Page 101: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/101.jpg)
Ejemplo
BIEN
MAL
![Page 102: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/102.jpg)
Un simple test
• Perdido en una página–¿Qué sitio es este?–¿En qué página estoy?–¿Que secciones hay?–¿Qué opciones tengo?–¿Donde estoy dentro del sitio?– ¿Cómo busco algo?
![Page 103: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/103.jpg)
Notas para diseñadores
• Nadie es como nosotros• No existe el usuario medio• No “A todo el mundo le gusta __”• Nada sustituye a la prueba y el
error–salvo la prueba y el acierto
• Siempre hay que seguir el resultado de lo publicado
![Page 104: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/104.jpg)
Referencias
• HTML 4.0 y dinámico. Angel García y Beltrán
• Diseño Web. Edición 2006. Robin Williams, John Tollett
• No me hagas pensar. Steve Krug• Curso de CSS. Christopher Schmitt• www.google.com <-
![Page 105: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/105.jpg)
Y ahora...
![Page 106: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/106.jpg)
Índice
• Diseño web• Oracle Portal• Ejemplo práctico
![Page 107: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/107.jpg)
Oracle Portal
• ¿Qué es oracle Portal?• Construcción de páginas• Plantillas• Elementos Básicos• Elementos inteligentes• Portlets• Elementos en intranet uem
![Page 108: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/108.jpg)
¿Qué es oracle portal?
https://portal.uem.es/portalHelp2/ohw/state?navSetId=_&navId=0&locale=es_ES
• Generador de portales empresariales–Entorno seguro y gestionable–Visiones personales y personalizables–Publicación web de autoservicio–Arquitectura ampliable y gestionable
• Basado en BBDD oracle• Java y estándares
![Page 109: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/109.jpg)
Enterprise portal
• Framework para integrar la información de la empresa
• Basado en publicación web• Permite personalización• Requiere autenticación de usuario• Permite publicar aplicaciones
“portlets”
![Page 110: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/110.jpg)
Oracle portal en la uem
Internet
Intranet
![Page 111: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/111.jpg)
Construcción de páginas
• Un sitio en oracle portal consiste en (grupo de páginas):–Página raiz–Páginas hijas–Elemenos compartidos
• Basado en plantillas
![Page 112: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/112.jpg)
Estructura general
![Page 113: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/113.jpg)
Una página portal
Region 1
Región 2
Región 3
Región ..
![Page 114: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/114.jpg)
Distribución de la página
• Determinada por regiones• Una región puede ser de varios
tipos:–Elementos–Portlets–Enlaces de subpágina
• El portal permite crear / editar y borrar regiones–Aunque no siempre está permitido
![Page 115: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/115.jpg)
A lo práctico...
• https://portal.uem.es/portal/page/portal/RRHH
![Page 116: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/116.jpg)
Primera página
• Esto es lo que ve un visitante...
![Page 117: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/117.jpg)
En modo edición
• https://portal.uem.es/portal/page/portal/RRHH?_mode=16
Región
![Page 118: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/118.jpg)
Controles edición
Ver página final
Ruta
Permisos
Nuevas páginas
![Page 119: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/119.jpg)
Añadir elementos
Añadir elemento
Ordenar elementos
![Page 120: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/120.jpg)
Añadir texto
![Page 121: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/121.jpg)
Editar texto
![Page 122: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/122.jpg)
Campos texto
• Nombre mostrado• Categoría• Descripción• Fecha de
publicación• Periodo de
vencimiento• Perspectivas
• Imagen• Alineación imagen• Palabras clave• Autor• Bloqueo de
elemento• Opciones de
visualización
![Page 123: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/123.jpg)
El editor visual
• Limitadas posibilidades• Permite incluir código html• Modifica el código según sus reglas• Trata
– tablas– listas–enlaces– imágenes (parcialmente)
![Page 124: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/124.jpg)
Insertar...
![Page 125: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/125.jpg)
Editor de texto
• Tamaño del texto limitado a 32 KB.• Campos especiales:
–#USER#, para el nombre de usuario
–#USER.FULLNAME#, nombre completo del usuario
• Se puede copiar-pegar de word y otros editores, aunque se pierde parte del formato
![Page 126: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/126.jpg)
Archivos
• Permite subir un archivo al servidor• Campos principales
![Page 127: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/127.jpg)
Archivos
• Comunes
• Imagenes jpg, png o gif
![Page 128: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/128.jpg)
Enlace URL
• Enlace externo al portal
![Page 129: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/129.jpg)
Enlace de página
• Corresponde a una página del mismo sitio
![Page 130: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/130.jpg)
Imagen
• Se puede añadir un elemento imagen subiendo una imagen desde el servidor o utilizando una url
• Se puede incluir un mapa enlazable, pero requiere escribir todo el código html a mano
• Se puede añadir un nombre y una descripción
![Page 131: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/131.jpg)
Imagen
![Page 132: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/132.jpg)
Subpáginas
![Page 133: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/133.jpg)
Subpáginas - acceso
![Page 134: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/134.jpg)
Modificar elementos
Editar
Acciones
![Page 135: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/135.jpg)
Acciones
![Page 136: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/136.jpg)
Práctica
• Crearemos 1 subpágina para cada alumno y le daremos privilegios
• Modificar la página para poner 1 texto, 1 imagen y dos enlaces (uno interno y otro externo)
• Añadir un documento
![Page 137: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/137.jpg)
Problemas
• Ningún control sobre la forma de la página
• Dificultad de introducción de imágenes con el texto
• Poco o ningún control del formato de los elementos
![Page 138: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/138.jpg)
Uso avanzado
• Modificación de regiones• Control de versiones• Acceso personalizado• Elementos inteligentes• Solapas• Compartición de imágenes• Inclusión de estilos• Portlets
![Page 139: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/139.jpg)
Modificación de regiones
• Intranet por defecto viene con una plantilla muy limitada
• En las propiedades de página podemos eliminar esta restricción
• A partir de este momento podremos modificar regiones
![Page 140: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/140.jpg)
Modificación de regiones
![Page 141: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/141.jpg)
Modificación de regiones
Editar
Crear región
ArribaAbajo
IzquierdaDerecha
Eliminar Región
![Page 142: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/142.jpg)
Editar Región
![Page 143: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/143.jpg)
Práctica
• En la página de pruebas, crear regiones para que se parezcan a estas:
![Page 144: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/144.jpg)
Control de versiones
• Página propiedades -> Elementos
• Elemento
![Page 145: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/145.jpg)
Control de versiones
• Acciones
• Versiones
![Page 146: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/146.jpg)
Acceso personalizado
• Pagina propiedades -> Acceso
• Elemento
![Page 147: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/147.jpg)
Elementos inteligentes
• Portal incluye elementos especiales para mostrar:–Enlace inteligente de portal–Enlace de conexión / desconexión–Recuadro de búsqueda básica–Ruta de acceso de la página
![Page 148: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/148.jpg)
Enlace inteligente
• Enlace a:–Ayuda–Busqueda avanzada–Favoritos– Información de la cuenta–Editar– ...
• La mayoría son funciones internas del portal
![Page 149: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/149.jpg)
Busqueda básica
![Page 150: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/150.jpg)
Ruta de acceso
• Son las “miguitas” que nos indican nuestra posición en la jerarquía de páginas
• Podemos indicar el número de niveles que queremos y el carácter de separación
![Page 151: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/151.jpg)
Solapas
• Definición interna de solapas• Nueva solapa• Mover solapa• Se puede conceder acceso privado
a una solapa. En caso de no tener acceso la solapa no aparece
![Page 152: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/152.jpg)
Ejemplo
• Crear 3 solapas en una región• Limitar el acceso a una de las
solapas y comprobar que la persona que no está en la lista de acceso no puede verla
![Page 153: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/153.jpg)
Compartición de imágenes
• El tratamiento de imágenes está un poco “verde” en portal
• Podemos incluir imágenes en una página cualquiera, para reutilizarla deberemos ver en propiedades su url
• Esa url la podemos poner en la casilla de url o dentro de un tag <img> en el texto
![Page 154: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/154.jpg)
Ejemplo
![Page 155: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/155.jpg)
Inclusión de estilos
• Aunque el editor visual no esté preparado para estilos, se pueden incluir
• <style></style> dentro del código html del texto
• O mediante un portlet html
![Page 156: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/156.jpg)
Portlets
• Son “programas” que se pueden ejecutar dentro del portal
• Se pueden colocar en regiones de portlets
• Hay varios portlets predefinidos–Portlet HTML–Omniportlet–dependen de TIC, podrían ampliarse
![Page 157: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/157.jpg)
Índice
• Diseño web• Oracle Portal• Ejemplo práctico
![Page 158: Diseño web con Oracle Portal - yoprogramo.com · Introducción •¿Qué es la web? •Historia –1989 Tim Berners-Lee CERN –1994 IETF HTML v2.0 –1995 v3.0 –1997 W3C v3.2](https://reader031.vdocumento.com/reader031/viewer/2022022015/5b4f098b7f8b9a346e8b6eae/html5/thumbnails/158.jpg)
Antes de empezar
• Crear un esquema• Recopilar material• Visitar sitios similares• Encontrar la “idea” principal• Llegar a acuerdos con todos los
implicados