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