Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • MF0491 - 3 UF1841 Elaboración de Documentos Web Mediante Lenguajes de Marca PDF

    Cargado por

    Anton Dalmau Mines
    391 vistas112 páginas

    Título original

    MF0491_3 UF1841 Elaboración de documentos web mediante lenguajes de marca.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF o lea en línea desde Scribd
    Marcar por contenido inapropiado
    391 vistas112 páginas

    MF0491 - 3 UF1841 Elaboración de Documentos Web Mediante Lenguajes de Marca PDF

    Cargado por

    Anton Dalmau Mines

    Copyright:

    © All Rights Reserved
    Descargue como PDF o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 112
    DESARROLLO DE EJAPLICACIONES CON —— 2 \S TECNOLOGIAS WEB a + L Modulo Formativo 0491_3 Programacién web en el entorno cliente Unidad Formativa 1841 SEE teat oen rs mae ema ee et se Senet Certificado de Profesionalidad Up Era © Unién Editorial para la Formacién (UEF) www.unionediterialformacion.es ISBN. 978-84-16047-00-0 Impreso en Espafia, Printed in Spain P edicion Autor: Fernando Rivas Romero ‘«Cualguier forma de reproduccién, distribucién, comunicacién publica 0 transformacién de esta obra solo puede ser realizada con la autorizacién de sus titulares, salvo excepcién prevista por la ley. Dirijase a CEDRO. (Centro Espaiiol de Derechos Reprogréficos) si necesita fotocopiar o escanear algin fragmento de esta obra (www.conlicenciacom: 91 702 19 70/ 93 272.04 47)». Reservados todos los derechos. Esta prohibido, bajo las sanciones penales y el resarcimiento civil previstos en. las leyes, reproducir, registrar o transmitir esta publicacién, integra o parcialmente por cualquier sistema de recuperacién y por cualquier medio sea mecinico, electrénico, magnético, electrodptico, por fotocopia 0 por cualquier otro medio presente o futuro, sin la autorizacién previa de Unién Editorial para la Formacién (UEF). DESARROLLO DE APLICACIONES CON TECNOLOGIAS WEB IFCDo210 Modulo Formativo 0491_3 Programacién web en el entorno cliente Unidad Formativa 1841 Elaboracion de documentos web mediante lenguajes de marca REFERENCIA AL CERTIFICADO DE PROFESIONALIDAD...... 2 = 2 6 INTRODUCTION wmmnniunmunnnnnnaninnenonmninanuninnninnnannunnnnnamuninuunmniinnennnnnennnnn T OBJETIVOS ose - “ ~ “ 7 MAPA CONCEPTUAL sn a “ neiranesicineecinicounin UNIDAD DIDACTICA |. DISENO WEB..... vw 10 I. PRINCIPIOS DEL DISENO WEB + sa oS son 1 1.2 DISENO ORIENTADO AL USUARIO. 1.3 DISENIO ORIENTADO A OBJETIVOS. 1.4 DISENO ORIENTADO A LA IMPLEMENTACION. LS EL PROCESO DEL DISENO WEB... 1.6 NAVEGABILIDADY ESTRUCTURA DEL SITIO WEB 7 ESTRUCTURAY COMPOSICION DE PAGINAS. L.8 COMPATIBILIDAD CON NAVEGADOREB.... 9 DIFERENCIAS ENTRE EL DISENO ORIENTADO A PRESENTACION E IMPRESION. UNIDAD DIDACTICA 2, LENGUAJE DE MARCADO GENERALES ... : 5: 28 2.1 ORIGEN Y CARACTERISTICAS. SGML Y XML. sia rs Me 28 2.2 ESTRUCTURA GENERAL DEL DOCUMENTO. one UNIDAD DIDACTICA 3, LENGUAJES DE MARCADO PARA PRESENTACION DE PAGINAS WEB. ssn. 38 3.1 HISTORIA DE HTMLY XHTML. DIFERENCIAS ENTREVERSIONES. 00. 3.2 ESTRUCTURA DE UN DOCUMENTO.innsnsnsesnnnsnnitininsnninnoninniiennnn 3.3 ETIQUETAS,ELEMENTOS. ' a . SA ELEMENTOS DELA CABECERA ssinuninisrinnnninaninnnisnninihininiininaiini 3.5 ELEMENTOS DEL CUERPO DEL DOCUMENTO 3.6 COLOR. 3.7 TEXTO, 3,8 PARRAFOS vos 3.9 ENLACES DE HIPERTEXTO. 3.10 IMAGENES. 3.11 LISTAS. 3.12 TABLAS... 3,13 MARCOS (FRAMES) 3.14 FORMULARIOS.sesnsnsnseninsnsnnnni 3.15 ELEMENTOS ESPECIFICOS PARA TECNOLOGIAS MOVILE: 3.16 ELEMENTOS EN DESUSO (DESPRECATED)....... UNIDAD DIDACTICA 4, HOJAS DE ESTILOWEB. oo 4.1 TIPOS DE HOJAS.. 42 ELEMENTOS, CREACIONY ESTRUCTURA 43 APLICACION DE ESTILOS. 44 HERENCIA... ASAPLICACION EN CASCADA... 4.6 ESTRUCTURA FORMATEADO DE PAGINAS CON ESTILOS. 47 DISENIO DE ESTILOS PARA OTROS DISPOSITIVOS, 4.8 BUENAS PRACTICAS. BSRRBS2E8 8 yuges GLOSARIO ANEXOS. ANEXO | ANEXO II ANEXO Il Uni6dn Editorial para la Formacién REFERENCIA AL CERTIFICADO. DE PROFESIONALIDAD CERTIFICADO DE PROFESIONALIDAD: (IFCD0210) DESARROLLO DE APLICACIONES CON TECNOLOGIAS WEB (RD 1531/2011, de 31 de octubre) 4ODULO FORMATIVO: Ree UNTIey ecole Ua ae) eo eo ce Introduccion En esta unidad se abordarin todos los as- pectos de la elaboracién de paginas web ‘mediante os lenguajes de marca. De manera sencilla y préctica, sin necesidad de tener co- nocimientos avanzado en el diseiio © progra- macion, Se trataran todos los aspectos, definiciones Y procesos, del principio del disefio web. Desde el principio y tipos del diseiio hasta las estructuras de los sitios y paginas web. Conoceremos las caracteristicas_ generales de los lenguajes de marca, que son, de que + Elaborar documentos utilizando lengua- jes de marcas y estindares de desarrollo software. * Determinar las diferentes partes de un documento creado con lenguaje de mar- «2s utilizado para su implementacién. + Reconocer las diferentes técnicas de desarrollo de software existentes en el mercado para mejorar Ia integracién en el sistema y elaboracién de documentos segtin el disefio especificado. * Utilizar marcas adecuadas para generar la documentacién interna en el desarrollo segin las especificaciones del diseiio. + Ser capaz de realizar documentos con Un lenguaje de marcas que permitan la partes consta y que estructura hay que seguir. Estudiaremos a fondo uno de los més fa- mosos lenguajes de marcado, como es el HTML, que nos permitira la creacién de pa- ginas y sitios web profesionales y potentes. Las paginas creadas las complementaremos con Ia inclusién de las potentes hojas de es- tilo, que permitiran un disefio profesional y cficaz de las paginas web a disefiar Objetivos interaccién con el usuario contando con especificaciones dadas + Enunciar caracteristicas generales refe- rentes a chojas de estilon para ser aplica- dos en los documentos a elaborar segin el disefio especificado, + Usar marcas para proporcionar diferen- tes estilos a los documentos desarrolla- dos segin el disefio especificado + Construir documentos utilizando lengua jes de marcas para permitir al usuario el uso de dispositivos méviles y medios es- pecificos de accesibilidad Mapa conceptual LENGUAJES DE MARCADO S srr PARA ELABORAR WEB HTML Erectors HOJAS DE ESTILO WEB + Herencla| + Buenas précticas * Estructura y elementos + Creacién y aplicacin de estilos DISENO WEB 1.1 Principios del disefio web. 1.2 Disefio orientado al usuario. 1.3 Disefio orientado a objetivos. 1.4 Disefio orientado a la implementacién. 1.5 El proceso de disefio web. 1.6 Navegabilidad y estructura del sitio web. 1.7 Estructura y composici6n de paginas. 1.8 Compatibilidad con navegadores. 1.9 Diferencias entre disefio orientado a presentacidn e impresion. Unidad diesen | D'SEIO WEB UNIDAD DIDACTICA |. DISENO WEB 1.1 PRINCIPIOS DEL DISENO WEB: Las tendencias actuales y de alguna forma la exigencia de expansién de cualquier ‘actividad, genera en Ia sociedad unas preferencias que derivan en las herramien- tas telemiticas ¢ informaticas. Sin duda alguna, una de las mis utiizadas es la creacién de paginas web, donde podremos ubicar todo el producto que cada uno de nosotros quiera dar a conocer: No sdlo son utilizadas para''vender algo", sino que también para exponer y ensefiar cualquier tipo de actividad social, cul- tural, musical, et. Si nos paramos a pensar, cuantas son las veces que al dia entramos en alguna pa- gina a consultar o informarnos de algo, valoraremos realmente la implantacién € importancia en el dia a dia de cualquiera de nosotros de las paginas web. Disefiar una pagina web es por lo tanto un elemento esencial y bisico que rrequiere un aprendizaje pausado pero perfecto, con el fin de conseguir una tibi- ‘cacién en la red atractiva, aprovechando para ello todas las herramientas disponi- bles, y darle asi mismo un cardeter personal, que nos diferencie del resto, Internet es un medio muy rico tanto en contenidos como posibilidades. Existe mucha competencia en Internet debido a que crear una web requieres una rela- tiva pequefia inversion. Debido a que los lengunjes empleados para crear la web son muy flexibles, y que una navegacién dificil por la web puede ser el motivo de perder allos posibles usuarios, podemos ver Ia gran importancia que tiene el especificar algunos principios de disefio para cl desarrollo de las webs 1.1.1 Laley de Fitts Hace referencia a las caracteristicas que tienen que tener los objetos,esencialmente los enlaces, para que sea mas facil o di- ficlinteraccionar con ellos: posicién en la que se encuentren, tamafio del mismo, y una caracteristica adicional, la ‘expre- ~ sividad’ de dichos elementos, cambios sufrides cuando por Ny ejemplo se pasa el puntero del ratén por encima. 1.1.2 Feedback de! usuario ‘Cuando el usuario realice alguna accién en la web, como por ejemplo cumplimentar un formulario, debe mostrarse al usua nid dicen | DISENIO WEB rio informacién de que su accién ha sido ejecutada correctamente, o que ha ocu- rrido algin fallo 0 problema. Es importante dar al usuario informacién de retorno sobre las acciones que ha realizado. 1.1.3 Reutilizacién de la experiencia del usuario Consiste en exponer al usuario ante lo conocido, es decir, no es conveniente crear interfaces que requieran por parte del usuario, perder tiempo para asimi- larlos, comprenderlos y aprenderios a utilizar. Debido a las potentes herramien- tas de las que se disponen para crear efectos visuales, se crean nuevos interfaces que suelen confundir al usuario, por lo tanto, perjudicando la estructura de nave gadién Este es el error mds grave. 1.1.4 Seroll Es importante que nada mas finalizada la carga de la web por parte del usuario, se muestren todos los elementos de navegacién, sin necesidad de que el usuario ‘tenga que hacer scroll, mover la pantalla con las barras de desplazamiento. ILLS Velocidad de acceso Aunque el diserio web ofrece muttitud de posibilidades multimedia e interactivas, muchos usuarios disponen de velocidades de conexién reducidas, aunque han aumentado signficativamente, por lo que pueden necesitar bastante tiempo en la carga de las paginas web. La simplicidad y la economia son normas esenciales enel disefio web. Los textos los podemos separar en dos grupos, titulos y cuerpos de texto 0 mensajes. Enlos titulos y cuerpos de texto usaremos fuentes con ms resalte, més ricas en detalles y con un trazo mayor. Deben coincidir con el aspecto del disefio y tener colores adecuados En los mensajes usaremos fuentes mis sencillas y no con tanto detalle como en los titulos. Estas fuentes son mis sencillas de representar por las pantallas, al ser de lineas mis rectas. - Teoria del color: Los colores de los objetos nos transmiten emociones muy fuertes, aunque no nos percatemos, Lo mis importante que debemos saber so- bre el color es: Unidad diesen | D'SEIO WEB Hay que utilizar una correcta asignacién de colores. El usuario visualiza mejor textos que estén en paginas con fondos blancos, esto ocurre por la expansién de color: Lo mismo ocurre con colores claros y oscuros. También afecta a los objetos que estén en la web. Si el objeto esta rodeado de u color tenue, da la sensacién visual que se expande. Si se utiliza u, color mas oscuro para rodear al objeto, dicho objeto parece més compacto, mas unificado, = Armonia:es necesario que la web utlice colores similares, con el mismo tono. Por lo tanto hay que fabricar una paleta de colores apta para ello. - Contraste: A veces para resaltar objetos y partes de la web es necesario rea lizar una combinacién de colores con gran contraste, con alta diferencia de color El color afecta de diferente forma al ser humane, produciendo diferentes sensa- ciones de las que normalmente no somos conscientes. Desde hace afios se han hecho todo tipo de estudios para comprender las sensaciones que sugieren los colores. Por lo tanto hay que utilizar la gama de colores que més se adecue a lo ‘que queramos expresar; para crear en el usuario las sensaciones optimas. nid dicen | DISENIO WEB Es importante dejar el suficiente espacio entre las imagenes y los textos, asi como los interlineados de los mismos, para que el contenido de la web sea ms legible. No hay que abusar de lineas de texto demasiado anchas. 6 usuario leer a mas velocidad si la linea es més corta, Pero tampoco hay que acortar demasiado las lineas de texto, ya que obliga al usuario a cambiar de linea frecuentemente, lo que dificulta la lectura por romper el ritmo visual, Posicionar los elementos de Ia web en la pantalla ¢s uno de los puntos mis cru- ciales ala hora de realizar nuestro disefio, a que darén personalidad a la web. Hay que usar de manera eficiente el espacio entre textos y posicionar por impor- tancia y tamafo las imagenes. Es importante colocar invigenes pequefias cerca del texto, las cuales hardin que el Usuario tenga una informacién visual sobre lo que va a leer y hacer mas atractiva la web, como se ve en el ejemplo, 1.2 DISEN© ORIENTADO AL USUARIO. Tenemos que tener como premisa, que la pagina web no Ia vamos a realizar para nuestro deleite sino que tiene que ir dirigida a los posibles perfiles que la puedan visitar: Por lo tanto, es requisito indispensable “conocer” a que sectores de publico va dirigido utilizando componentes como edad, localizacién, perfil profesional, actividades de ocio, ete Una vez determinado el sector 0 sectores tanto de puiblico como de actividad donde dirigirse, es tremendamente importante adecuar el disefio de nuestra pagina a los perfiles con mayor probabilidad de visitaria, Recuerda la premisa basica de una pagina web “esta hecha para los de- mais no para mi’ Para saber mas sobre el grado de impacto que puede pro- ducir el diseito en nuestra pagina web, no es exciuyente el poder buscar ejemplos en otras que nosotros visitamos habitualmente y poder llegar a conclusiones y razonamien- tos del porque las visitamos 0 que rasgos de las mismas nos produce mejor impacto. No se trata de imitar, sino Unidad diesen | D'SEIO WEB solamente de trasladarte a la situacién que se pueden ver los posibles visitantes de nuestra web. (Os recuerdo que es extremadamente importante la eleccién de los componen- tes que formen parte del disefio y utilizar todas las armas que las herramientas

    También podría gustarte