parte_38.txt

Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 9 La etiqueta para los enlaces es , teniendo siemp re que incorporar el atributo href para indicar la URL a la que hace referencia. Se puede enlazar cual quier contenido como pueden ser otras páginas web, documentos PDF, archiv...

Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 9 La etiqueta para los enlaces es , teniendo siemp re que incorporar el atributo href para indicar la URL a la que hace referencia. Se puede enlazar cual quier contenido como pueden ser otras páginas web, documentos PDF, archivos ZIP, etc. También se puede emplear para enlazar direcciones d e correo electrónico, con la particularidad de tener que escribir en el la palabra mailto antes de la dirección de e-mail. Figura 10: Ejemplo de hipervínculos a una web y a u n email También es posible enlazar con un punto concreto de una página, siendo necesario en primer lugar usar la etiqueta con el atributo name, para ind icar el punto de retorno. Y en la etiqueta de origen se indicara en el atributo href la URL (en c aso de ser distinta página), seguida de una # y el nombre indicado en el punto de retorno. Figura 11: Enlace a un punto concreto de una página En el caso de emplear paginaciones, como si fuera u n libro o listado de productos, los atributos start, prev y next son muy interesantes para identi ficar los puntos de inicio, anterior y siguiente. 2.5. Listas HTML permite crear 3 tipos de listas para poder agr upar elementos, los cuales tienen significado de una forma conjunta. Por ejemplo, el menú de nave gación es un lugar idóneo para emplearlas. • Las listas no ordenadas muestran un grupo de elemen tos en los cuales, el orden, es indiferente. La etiqueta que define la lista es y cada uno de los elementos se delimita dentro de la etiqueta . • Las listas ordenadas muestran una serie de elemento s en los cuales se genera una lista incremental. La etiqueta que se emplea es y lo s elementos también se delimitan con . • Las listas de definiciones se emplean para definir términos como si fuera un diccionario, empleando para delimitar, y posteriormente para identificar el término y para identificar la definición. Enlac e a la página 1 Enviar mail … Volver al inicio de la página Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Pedro Garrido Águila 10 TEMARIO OPOSICIONES COIICV | TEMA 37 Una de las ventajas, es la posibilidad de poder ani dar unas listas dentro de otras, muy útil tanto en listas no ordenadas u ordenadas, para poder crear s ublistas. Figura 12: Ejemplo de listas y visualización en nav egador Inicio Noticias Recientes Más leídas< /li> Más valoradas Artículos XHTML CSS JavaScript Contacto Email [email protected] Teléfono 900 900 900 Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 11 2.6. Imágenes y objetos Las webs actuales están llenas de imágenes y son un elemento principal e imprescindible dentro de ellas para hacer que sean atractivas para el usu ario. La etiqueta es la empleada para incluirlas, teniendo en cuenta que el atributo src, es imprescindible, pues indica la URL de la imagen a incorporar. Las imágenes pueden a emplear pueden estar en cualquiera de los formatos más habituales como JPEG, GIF, PNG o BMP, siendo JP EG el más habitual y PNG empleado para el uso de transparencias. Figura 13: Ejemplo de imagen También pueden incluirse objetos embebidos, como es el caso de applets de Java, vídeos externos o flash, empleando la etiqueta , e indicando en el atributo data la URL del objeto y en type el tipo de datos. Pueden anidarse varios object, y en caso de no cargar el primero, pasará a la segunda opción. Figura 14: Ejemplo de uso de 2.7. Tablas Las tablas en HTML son un elemento muy versátil, el cual permite contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pi es de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. Una tabla se identifica con la etiqueta y t iene como elementos imprescindibles en su interior la etiqueta para identificar las fila s y para identificar las celdas de una fila, e s decir, las columnas. Y si las celdas precisan de un a cabecera, además se emplea la etiqueta en lugar de emplear la . <imgsrc=“logotipo.gif” alt=“Logotipo de Mi Sitio” / > <objecttitle=“La Tierra” classid=“tierra.py”> La Tierra vista desde el espaci o. Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Pedro Garrido Águila 12 TEMARIO OPOSICIONES COIICV | TEMA 37 Figura 15: Ejemplo de tabla Varias celdas contiguas también pueden agruparse o fusionarse entre sí, para salir de la estructura regular inicial, en el que todas las tablas tienen el mismo número de filas y columnas. De esta forma, empleando el atributo colspan, se puede indi car el número de columnas que va a agrupar esa celda, y de forma paralela, empleando rowspan, se fusionan filas. Figura 16: Ejemplo de tabla con columnas fusionadas mediante rowspan Conceptualmente, las tablas pueden distribuirse en tres secciones, para agrupar la cabecera, el contenido y el pie, de una forma análoga a como se hace con las etiquetas , y <tdcolspan=“2”>A B C <thscope=“col”>Nombre producto <thscope=“col”>Precio unitario <thscope=“col”>Unidades Artículo 1 192.02 1 Artículo 2 2.50 5 Artículo 3 12.99 1 TOTAL - 7 Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 13 . Para ello se emplean las etiquetas , y , y deben colocarse exactamente en este orden, incluyendo dentro de ell as los de las filas que incorporan. 2.8. Formularios Los formularios permiten que el usuario de una web interactúe con las aplicaciones web, pasando desde simples cajas de textos a introducciones de f echas a partir de un calendario y con validación de la misma gracias a Javascript. Todo formulario debe estar contenido dentro de su e tiqueta , dentro de la cual se incluirán los botones, cuadros de texto, listas desplegables e incluso otros elementos no específicos como textos. Además, tienes una serie de atributos propi os que son de gran relevancia, siendo los dos primeros los más habituales: • action= “url”. Indica la URL que procesa el formulario una vez en viado • method = “POST o GET”. Método HTTP empleado al enviar el formulario. Se re comienda no usar GET para enviar información sensible. • enctype = “application/x-www-form-urlencoded o mult ipart/form-data”. Tipo de codificación empleada al enviar el formulario al se rvidor. • accept = “tipo_de_contenido”. Lista separada por comas de todos los tipos de arch ivos aceptados por el servidor, en caso de permitir adju ntar archivos. La mayoría de elementos de un formulario se crean m ediante la etiqueta , en el que su atributo type permite diferencia el tipo de control empleado. A continuación se detallan los principales atributos propios: • type = “text | password | checkbox | radio | submit | reset | file | hidden | image | button”. Indica el tipo de control. • name = “texto”. Asigna un nombre al control, imprescindible para s u posterior tratamiento. • value = “texto”. Valor inicial del control. • size = “unidad_de_medida”. Tamaño del control. • maxlength = “numero”. Longitud máxima. • checked = “checked”. Opción predeterminada para los controles checkbox y radiobutton. • disabled = “disabled”. El control aparece deshabilitado. • readonly = “readonly”. El contenido del control no se puede modificar. Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Pedro Garrido Águila 14 TEMARIO OPOSICIONES COIICV | TEMA 37 • src = “url”. Para botones con imágenes, indica la URL de la ima gen. • alt = “texto”. Descripción del control Para poder diferenciar los tipos de , se ide ntifican a continuación todos ellos junto a una breve descripción de los mismos. • text: cuadro de texto libre • password: cuadro de contraseña. El texto introducido no se m uestra en pantalla al aparecer oculto por asteriscos. • checkbox: casillas de verificación que permite al usuario se leccionar una o varias de las opciones. • radio: casilla de verificación similar al checkbox, pero que sólo permite seleccionar una de todas las opciones. • submit: botón de envío del formulario. • reset: botón de borrado de todo el contenido del formular io. • file: botón para adjuntar archivos para subirlos al serv idor. • hidden: campo oculto que no se puestra en pantalla. • image: botón de formulario personalizado incluso con una imagen. • button: botón sin funcionalidad preestablecida, que permit e realizar tareas programadas mediante Javascript. Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 15 Figura 17: Ejemplo de formulario <formaction=“enviar.php” method=“post” enctype=“mul tipart/form-data”> Nombre <inputtype=“text” name=“nombre” value="" size=“20” maxlength=“30” /> Apellidos <inputtype=“text” name=“apellidos” value="" size=" 50" maxlength=“80” /> Contraseña <inputtype=“password” name=“contrasena” value="" m axlength=“10” /> DNI <inputtype=“text” name=“dni” value="" size=“10” ma xlength=“9” /> Sexo Hombre M ujer Incluir mi foto Suscribirme al boletín de novedades Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Pedro Garrido Águila 16 TEMARIO OPOSICIONES COIICV | TEMA 37 2.9. Multimedia Si deseáramos añadir archivos multimedia a nuestro HTML, como audios y/o videos, utilizaríamos las siguientes etiquetas: , y • Con la etiqueta especificaríamos el video q ue queremos incluir en nuestro HTML. También indicaremos el tamaño del video en nuestro HTML, es decir, la anchura y altura en la página. Añadiremos el nombre del archivo en e l código, indicando el tipo de archivo que en este caso sería .mp4 . Habrían varios formatos aceptados como mp4, WebM , etc. Figura 18: Ejemplo de etiqueta video • Con la etiqueta , definiremos sonido o músic a. No haría falta indicar el tamaño como en . Definimos también el nombre del ar chivo de audio. Además de eso indicaremos el tipo del archivo que queremos que se reproduzca en nuestra página, los formatos aceptados son: mp3/wav. Figura 19: Ejemplo de etiqueta audio • Con la etiqueta definimos contenido de una aplicación externa o contenido interactivo. Deberemos definir la etiqueta seguido de src, indicando después el nombre del archivo. El formato disponible es .swf Figura 20: Ejemplo de etiqueta embed Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 17 3. Complementos o mejoras del HTML 3.1. Hojas de estilo CSS Hojas de Estilo en Cascada (Cascading Style Sheets) , es un mecanismo que permite describir cómo se va a mostrar un documento en la pantalla de l ordenador, en el móvil o como va a ser impreso por la impresora. Puede aplicarse a cualqui er documento XML, aunque es principalmente usado para definir las interfaces de los documentos HTML. Su principal ventaja es que un cambio en la hoja de estilos afectará a todas las páginas vinculadas a la misma. CSS funciona a base de reglas, realizando declaraci ones que se aplican a un documento HTML o XML. Las Hojas de estilo están compuestas por una o varias reglas y esta a su vez está compuesta de dos partes: un selector y la declaraci ón. El selector es el enlace entre el documento y el es tilo, especificando los elementos que se van a ver afectados; mientras la declaración especifica l as propiedades que se asignarán al elemento o elementos englobados en la especificación. Figura 21: Ejemplo de regla CSS Existen 3 formas principales de emplear un document o CSS desde un documento HTML: • Hoja de estilo externa que estará vinculada a un do cumento a través del elemento , el cual debe ir situado en la sección . Figura 22: Inserción de hoja de estilo externa • Elemento , en el interior del documento al q ue se le quiere dar estilo, y que generalmente se situaría en la sección . De e sta forma los estilos serán reconocidos antes de que la página se cargue por co mpleto. p { color: red; text-align: center; } Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Pedro Garrido Águila 18 TEMARIO OPOSICIONES COIICV | TEMA 37 Figura 23: Inserción de hoja de estilo interna • Estilos directamente sobre aquellos elementos que l o permiten a través del atributo dentro de . Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la pr esentación. Figura 24: Inserción de hoja de estilo en línea La versión estandarizada por la W3C actual es CSS3, desarrollada de forma paralela a HTML5, está compuesta de distintos módulos, los cuales lle van desarrollos independientes y permiten integraciones paulatinas a los navegadores, según l os estados de desarrollo en los que se encuentren. 3.2. JavaScript JavaScript apareció ante la necesidad de validación de datos en las conexiones de Internet de baja velocidad de los años 90, sin tener que enviar los datos y esperar la respuesta del servidor. Por lo tanto JavaScript (JS), es un lenguaje que se ejecut a en el lado del cliente e implementado por el navegador web, pero que también puede tener aplicac iones externas a la web, como ejecutarse en un PDF. Para evitar duplicados entre empresas, Netscape, em presa que implementó ECMAScript, decidió estandarizarlo de forma que fuera multiplataforma e independiente, bautizándolo como JavaScript. La organización internacional para la estandarizaci ón (ISO) adoptó el estándar ECMA-262 a través de su comisión IEC, dando lugar al estándar ISO/IEC -16262. JavaScript tiene una sintaxis similar a C, a pesar que por otro lado también adopta especificaciones propias de Java, como su sintaxis y estar orientado a objetos. Una de las grandes ventajas es que todos los navegadores actuales inte rpretan sin problemas el lenguaje. Su body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } Thisis a h eading. Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019Diseño y desarrollo de portales web TEMARIO OPOSICIONES COIICV | TEMA 37 19 desarrollo no ha cesado, como se demuestra en la po sibilidad de enviar y recibir información en tiempo real gracias a la tecnología Ajax. A partir de la llegada de Ajax, JavaScript ha vuelt o a tener un gran éxito, como lo demuestran la proliferación de frameworks y librerías que basadas en él, intentan mejorar y facilitar las prestaciones. Habitualmente JavaScript se emplea para escribir fu nciones incrustadas en páginas HTML, que interactúan con el DocumentObjectModel (DOM) de la página. Entre las tareas principales que permite se encuentra la carga de contenido externo sin tener que recargar la página, animación de elementos, contenido interactivo, validación de dat os y seguimiento a las tareas realizadas por el usuario. A nivel de implementación en HTML, JavaScript puede incrustarse en cualquier punto de un documento HTML. Figura 25: Ejemplo de código JavaScript incrustado en en HTML De todos modos, lo más habitual es incluir la progr amación en un fichero totalmente externo, para tener independencia y reusabilidad desde otros docu mentos. Figura 26: Referenciar fichero externo de JavaScrip t El último método posible de hacer uso de JavaScript , es dentro del pripio código HTML, haciendo referencia al objeto en el que se encuentra. Figura 27: Código JavaScript incluido al documento HTML Tradicionalmente ha sido tildado de inseguro y mali cioso, pero realmente no es cierto en su totalidad. Existen habituales problemas de segurida d debido al cross-site scripting o XSS, vulnerabilidades que a un atacante le permiten inye ctar código JavaScript en páginas web visitadas, pudiendo llegar a revelar información co nfidencial del servidor o incluso realizar inserciones o modificaciones de datos. La única for ma de evitarlo completamente, es realizando alert("Un mensaje de prueba"); … Un párrafo de texto. … Se autoriza el uso exclusivo de este documento a María Amparo Pavía García, DNI 20013968N, a 26 de julio de 2019