Técnico de Soporte Informático TEMA 20 DISEÑO WEB Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático TEMA20.DISEÑOWEB CONTENIDO 1. DISEÑODEPÁGINASWEBEINTERFACESWEBDEUSUARIO ...............................................................2 1.1INTRODUCCIÓNALDISEÑODEPÁGINASWEB...................................................................................2 1.2CONCEPTODEINTERFAZWEBDEUSUARIO ......................................................................................4 2. HTML,LENGUAGEDESCRIPT,PROGRAMACIÓNWEB. ........................................................................5 2.1HTML ..................................................................................................................................................5 PrimerospasosconHTML ....................................................................................................................6 EtiquetasHTML ....................................................................................................................................9 2.2LENGUAJEDESCRIPT........................................................................................................................14 Incrustarelscript................................................................................................................................15 Partesdelscript ..................................................................................................................................16 2.3INTRODUCCIÓNPROGRAMACIÓNWEB ...........................................................................................16 3. PRINCIPIOSDELDISEÑODEINTERFACES. ..........................................................................................21 Elementosdelainterfaz.....................................................................................................................22 4. FORMULARIOSELECTRÓNICOS ..........................................................................................................25 FormulariosconHTML .......................................................................................................................25 5. ACCESIBILIDAD,DISEÑOUNIVERSALYUSABILIDAD...........................................................................32 5.1ACCESIBILIDAD..................................................................................................................................32 5.2.DISEÑOUNIVERSAL .........................................................................................................................33 5.3.USABILIDAD .....................................................................................................................................35 2 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 1. DISEÑODEPÁGINASWEBEINTERFACESWEBDEUSUARIO 1.1INTRODUCCIÓNALDISEÑODEPÁGINASWEB WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES El diseño web es una actividad multidisciplinar y tan reciente como Internet. Se alimenta de fuentes como el diseño gráfico y las artes visuales, la programación de aplicaciones informáticas,eldiseñodeinterfaces,laredaccióndecontenidos,laanimación,lapublicidad,el márketingyunsinfíndecosas. Diseñar es un proceso creativo que combina arte y tecnología para comunicar ideas. El diseñadorutilizaunaseriedeherramientasquecombinaparahacerqueelmensajequequiere transmitirllegueaunaaudienciadeterminada. El diseñador es la persona que se encarga de comunicar el mensaje al público, creando, eligiendo, organizando y disponiendo toda la información para la visualizar textos, gráficos, sonido,yporquéno,elespacioenblanco. Técnicamente,unapáginawebesundocumentoHTML. HTML es un lenguaje llamado “de marcado”. Consiste en la inserción de etiquetas entre los contenidos. Estas etiquetas no se muestran al usuario, lo que hacen es dar indicaciones al navegadorweb(InternetExplorer,Mozilla,Chrome…)sobrelosdiferenteselementosysobre cómodebemostrarlos. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Unapáginawebsecomponedeunoovariosdocumentoshtmlqueserelacionanentre sía travésdehipervínculos(enlaces,links). Se exponen a continuación una serie de conceptos básicos que se deben aprender para comenzarenelmundodeldiseñoweb: SITIO WEB: Página principal y sus otras páginas, gráficos, documentos, multimedia y otros archivosasociadosquesealmacenanenunservidorWeboeneldiscodurodeunequipo. PÁGINA WEB:Documento elaboradoenHTMLqueformaparte deunsitioWeb.Además del HTMLsepuedenutilizarotroslenguajescomplementarioscomoPHP,ASP,Javascript... HIPERVÍNCULO: (Enlace, Link) Un hipervínculo es la conexión de una página a otro destino como puede ser otra página o una ubicación diferente en la propia página. El destino es normalmente otra página Web, pero también puede ser otro tipo de documento como una imagen, una dirección de correo electrónico, un archivo, o un programa. Un hipervínculo puedesertextoounaimagen. SERVIDOR WEB: Máquina conectada a Internet que alberga páginas web haciendo que estén accesiblesdesdecualquierpuntodeInternet. CLIENTEFTP:Aplicaciónquepermiteconectarsealservidorparapublicarpáginasweb. 3 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático HOSTING: Hospedaje web. Espacio de disco donde se almacenan las páginas webs para que seanaccesiblesatravésdeInternet. HOUSING:Esunamodalidaddehostingquevadirigidoagrandesempresasyaempresasdeservicio Web.Loqueconsisteestetipodealojamientoesenvenderoalquilarunespaciodeuncentrodedatos, paraqueelclientecoloquesupropioordenador.LaempresaledacorrienteyconexiónaInternet,yel servidor lo elige el cliente, incluso el hardware. También la empresa suele ofrecer servicios de mantenimiento de instalación, también administración pero el servidor lo construye y es dueño el cliente. DOMINIO:Direcciónwebasociadaaunapáginaweb. URL:(UniversalResourceLocation/Localizadorderecursosuniversal)Cadenaqueproporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolomedianteelcualsetieneaccesoalsitiooalrecurso.Eltipomáscomúndedirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de direcciónURLsongopher://,queproporcionaladireccióndeInternetdeundirectorioGopher, yftp://,queproporcionalaubicacióndereddeunrecursoFTP. APPLETS:ProgramasdesarrolladosconprogramaciónJavaparamejorarlapresentacióndelas páginasWebquerealizananimaciones,juegoseinteracciónconelusuario. FRAMES(MARCOS):ÁreasrectangularesquesubdividenlasventanasdealgunaspáginasWeb, cadaunadelascualescontieneundocumentohtmlindependientedelosdemás. WEBMASTER:Unwebmastereslapersonaencargadadecrear,diseñar,estructurar,maquetar, publicar,promocionarymantenerunsitioweb. BANNER:Elementográfico,normalmenteanimado,cuyocontenidoespublicidad. EDITOR: Programas que se utilizan para crear páginas web sin la necesidad de tener que aprenderellenguaje.Ejemplos:M.FrontPage2000yMacromediaDreamweaver. 4 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Unainterfazeslaconexiónfísicayfuncionalentredosaparatososistemas independientes(RAE).Lainterfazdeusuarioeslaformaenquelosusuariosse puedencomunicarconunordenador. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES 1.2CONCEPTODEINTERFAZWEBDEUSUARIO Hay dos tipos de interfaces de usuario según su manera de interactuar: Alfanuméricas – intérpretesdepedidos–ygráficasdeusuarios–GUI,GraphicUserInterface–.Estasúltimas permiten comunicarse con el ordenador de una forma rápida, intuitiva y gráfica (ventanas, botones,etc.). Segúnsuconstrucción,puedenserdehardwareodesoftware: Enelprimercasosetratadeunconjuntodedispositivosquepermitenlainteracción hombreͲmáquina,deformaquepermitenaccederycogerdatosdelordenador. LasInterfacesdesoftwaresonprogramasopartedeellosquepermitencomunicarse conelordenador. LallavedeléxitodeunSitioWebvienedadaporlamaneraenquesepresentalainformación alosvisitantes.Esmuyimportantequelainformaciónofrecidacumplaconciertasreglasy/o estándares,paraquesususuariospuedansacarletodoelprovechoposible. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Se debe crear un entorno en donde los usuarios puedan explorar fácilmente y a la vez conseguirtransmitirleselmensajequenuestraspáginasofrecen. Estas interfaces deben servir de intermediarias entre unos usuarios genéricos, no acostumbrados generalmente al uso de aplicaciones informáticas, y unos sistemas de información y procesos transaccionales que corren por debajo, debiendo posibilitar la localización de la información deseada, el entendimiento claro de las funcionalidades ofrecidas,larealizaciónprácticadetareasespecíficasporpartedelosusuariosylanavegación intuitivaporlasdiferentespáginasqueformanelsitioweb. Buscandounahomogeneidadentrelosmillonesdepáginaswebqueexistenenlaactualidad enInternet,eldiseñodelasmismashaevolucionadoconeltiempohaciaunesquemageneral perfectamente definido, ofreciendo unas interfaces bien definidas, con un conjunto de componentes gráficos y funcionales similares que hacen posible que sea cual sea el usuario queaccedeaunsitiowebcualquieralacomunicaciónentreellosseaposibleyefectiva. De esta forma se han definido elementos y agrupaciones de estos que han demostrado su utilidad y su comprensión por los usuarios, entre los que podemos destacar los sistemas de navegación, los dinteles, los pies de página, los formularios de entrada de datos, etc., que normalmente encontraremos en todas las páginas web y cuyo diseño y funcionalidad son similaresentodasellas. 5 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Másadelanteenestemismocapítulo,ampliaremoslainformaciónsobrelasinterfaceswebde usuario. 2. HTML,LENGUAGEDESCRIPT,PROGRAMACIÓNWEB. 2.1HTML Como ya hemos visto, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web. Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizanlosdiseñadoresgeneranpáginasescritasenHTMLylosnavegadoresqueutilizamoslos usuariosmuestranlaspáginaswebdespuésdeleersucontenidoHTML. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similarencualquiernavegadordecualquiersistemaoperativo. La última versión oficial de HTML es la 5, muy recientemente estrenada y de momento muy pocoextendida. De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denominaXHTML1.0ysepublicóel26deEnerode2000. XHTML1.0esunaadaptacióndeHTML4.01allenguajeXML,porloquemantienecasitodas susetiquetasycaracterísticas,peroañadealgunasrestriccionesyelementospropiosdeXML. LaspáginasydocumentoscreadosconXHTMLsonmuysimilaresalaspáginasydocumentos HTML.LasdiscusionessobresiHTMLesmejorqueXHTMLoviceversasonrecurrentesenel ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada. Actualmente,entreHTML4.01yXHTML1.0,lamayoríadediseñadoresescogenXHTML.Enun futurocercano,silosdiseñadoresdebenelegirentreHTML5yXHTML1.1oXHTML2.0,quizás laelecciónseadiferente. HTMLYCSS Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también informaciónsobreelaspectodesuscontenidos:tiposdeletra,coloresymárgenes. 6 Promoción Interna de Técnico de Soporte Informático Técnico de Soporte informático TEMA 20 WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginaswebdinámicas. Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidaddediferentespersonas,porloqueesconvenientesepararlos. CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspectoquedebenpresentaresoscontenidos. XHTML (Contenidos) + Página Web CSS (Presentación) YahemosvistoqueHTMLesunlenguajede“etiquetas”o“marcado”.Laspáginaswebestán formadaspormilesdeestasetiquetas.(OtroslenguajesdeetiquetassonXML,SGML…). WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES PRIMEROSPASOSCONHTML La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir porpartedelaspersonasydelossistemaselectrónicos.Laprincipaldesventajaesquepueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombresmuycortos. UnaetiquetaHTMLdelimitacadaunodeloselementosquecomponenundocumentoypuede serdecomienzoodecierre. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificadoronombredelaetiqueta,ypuedecontenerunaseriedeatributosopcionalesque permitenañadirciertaspropiedades.Susintaxises:<identificadoratributo1atributo2...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquiervalorpropiodelusuario,ovaloresHTMLpredefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificadoronombredelaetiqueta,ynocontieneatributos.Susintaxises:</identificador> 7 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetasentreotrasetiquetasdecomienzoydecierre. Existe un tipo especial de etiqueta que contiene la apertura y el cierre dentro de la misma etiqueta.Porejemplo,<br/>eslaetiquetaquemarcaunsaltodelínea.Estaseabreysecierra alavez,añadiendo/antesdelsímbolo>. Antesnoeranecesariocerrarestasetiquetas,perodesdequeaparecieronlasespecificaciones w3c es obligatorio cerrar todas las etiquetas, y esta es una manera rápida de cerrar las etiquetasquesoloconstandeapertura.Enrealidad,cualquiernavegadorleerácorrectamente una etiqueta aunque no esté cerrada pero es muy recomendable acostumbrarse desde el principioacerrarlastodas. Unejemplo: <p><ahref=”www.google.es”>EnlaceaGoogle</a></p><br/> VemosunenlacealapáginawebdeGoogledentrodeunpárrafoyconunsaltodelíneajusto después. La etiqueta “a” corresponde a un enlace, “a” es el identificador, “href” es el atributo, y “www.google.es” es el valor del atributo. Las especificaciones w3c marcan que el valor del atributodebeirsiempreentrecomillas. ELDOCUMENTOHTML Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la páginaincluyetodossuscontenidos,comopárrafosdetextoeimágenes. Lacabecerayelcuerpotienensuspropiasetiquetasquesonbásicasenundocumentohtml completo. Estas etiquetas son <head></head> y <body></body> respectivamente. Además, estas etiquetas vienen encerradas por otra etiqueta general, que también es básica, es la etiqueta<html></html>. Poreso,unapáginawebtienelasiguienteestructurabásica: <html> <head></head> <body> </body> </html> 8 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Unejemplosencillísimodeunapáginawebseríaelsiguiente: <html> <head> <title>Mi primera web</title> </head> <body> <p> HOLA MUNDO!!<br /> Esta es <strong>mi primera</strong> web completa. </p> </body> </html> WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera(llamadaheadeninglés)contienetodoloquenoseve(conlaúnicaexcepcióndel títulodelapágina,quelosnavegadoresmuestrancomotítulodesusventanas). 1) Abriruneditordetextoplano,elblocdenotasessuficiente. 2) Escribirelcódigotalycomoestáescrito. 3) Guardarelarchivoconlaextensiónhtml.Porejemploholamundo.html WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Parahacerqueestecódigosemuestreenpantalladebemosseguirestospasos: 4) Abrir un explorador y escribir la ruta donde está guardado el documento que acabamosdecrear,conelnombredelarchivoincluido,obienabrirelarchivoconun explorador,atravésdelbotónderechodelratón. Asíescomosemuestraelcódigoanteriorenunexplorador: 9 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático SiyaestásviendotuprimerapáginaHTMLenelnavegador,pruebaapulsarsobreelmenúVer >CódigofuenteypodrásverelcódigoHTMLdelapáginaqueestácargadaenelnavegador. Dehecho,puedesverelcódigoHTMLdecualquierpáginadeInternetmediantelaopciónVer >Códigofuente. ETIQUETASHTML HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementosquecomponenunapágina: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button,caption,center,cite,code,col,colgroup,dd,del,dfn,dir,div,dl,dt,em,fieldset,font, form,frame,frameset,h1,h2,h3,h4,h5,h6,head,hr,html,i,iframe,img,input,ins,isindex, kbd,label,legend,li,link,map,menu,meta,noframes,noscript,object,ol,optgroup,option, p,param,pre,q,s,samp,script,select,small,span,strike,strong,style,sub,sup,table,tbody, td,textarea,tfoot,th,thead,title,tr,tt,u,ul,var. De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar:applet,basefont,center,dir,font,isindex,menu,s,strike,u. Describimosbrevementeacontinuaciónlasmásutilizadasysusatributosbásicos: <a>:enlace. Ͳ Name=“texto”.Permitenombraralenlace. Ͳ Href=“url”.Urldelrecursoquesequiereenlazar. Ͳ Target=“valor”.Lugardondeseabrirálanuevapágina.Enlamismaventana,en otra… <div>:divisiones.DefinezonasdentrodeunapáginaHtml. 10 TEMA 20 Técnico de Soporte informático Ͳ Id.Identificador Ͳ Style=”propiedad:valor”.Leaplicaunestilodeterminado. Ͳ Class=”nombredelaclase”.LeaplicaunaclaseCSSdeterminada. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Promoción Interna de Técnico de Soporte Informático <h1><h2><h3><h4><h5><h6>.Cabeceras.Sontítulosdenivel1a6.H1eselmásgrandeh6el máspequeño. <p>:párrafo.Esunadelasetiquetasmásutilizadas.Permitedefinirlospárrafosqueforman eltextodeunapágina. <br/>Saltodelínea. <ul>Listanoordenada <ol>Listaordenada <li>Elementodelista <dl>Listadedefinición <dt>Términodeunadefinición <dd>descripcióndeunadefinición. Ͳ Src=“url”.IndicalaURLdelaimagenquesemuestra Ͳ Alt=“texto”.Descripcióncortadelaimagen. Ͳ Longdesc=”url”.IndicaunaURLenlaquepuedeencontrarseunadescripciónmás detalladadelaimagen. Ͳ Name=“texto”.Nombredelelemento. Ͳ Height=“unidaddemedida”.Indicalaalturaconlaquesedebamostrarla imagen. Ͳ Width=“unidaddemedida”.Indicalaanchuraconlaquesedebemostrarla imagen. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES <img>Imagen. <table>.Tabla.LastablasHTMLutilizanlosmismosconceptosdefilas,columnas,cabecerasy títulosquelosqueseutilizanencualquierotroentorno.Hastahaceañoslastablasse utilizaban,apartedeparamostrarinformacióntabular,paradefinirlaestructuradelaspáginas web.Esatécnicaesyaobsoletaexistiendolaetiquetasdiv,ynodebeusarselaetiquetatable paraestefin,sinoparaellógico,queesmostrarinformaciónenformadetabla. Ͳ Summary=“texto”.Permitedescribirelcontenidodelatabla(loutilizanlos buscadoresylaspersonasdiscapacitadasvisualmente) 11 Promoción Interna de Técnico de Soporte Informático Ͳ TEMA 20 Técnico de Soporte informático Border=“numero”.Grosordelbordedelatabla. <tr>Filadetabla. <td>Celdadetabla. Ͳ Colspan=“numero”.Númerodecolumnasqueocupaestacelda Ͳ Rowspan=“numero”.Númerodefilasqueocupaesacelda. <th>Celdacabeceradetabla.(Mismosatributosquetd) Unejemplodelcódigodeunatablasencillaseríaelsiguiente: <html> <head> <title>Tabla en HTML</title> </head> <body> <table border=”1”> <tr> <th>Cabecera 1</th><th>Cabecera 2</th><th>Cabecera 3</th> </tr> <tr> <td>A1</td><td>A2</td><td>A3</td> </tr> <tr> <td>B1</td><td>B2</td><td>B3</td> </tr> </table> </body> </html> Semostraríadelasiguientemaneraenelnavegador: 12 TEMA 20 Técnico de Soporte informático <frameset>Especificaelnúmerodeframes Ͳ Cols=”numero”.Númerodecolumnas. Ͳ Rows=”numero”.Númerodefilas. Ͳ Src=“archivo”.Documentohtmlquesemuestraeneseframe. Ͳ Name=”nombre”.Nombredelframe. Ͳ Frameborder=“numero”.Bordedelframe. Ͳ NoresizeͲ>esteatributoindicaquenosepuedecambiareltamañodelframe. Ͳ Scroll=“auto/yes/no”.Indicasielframetendráscrollsiemrpe,nuncaodepende deltamaño. <noframes>Contenidoalternativoparalosnavegadoresquenoadmitenframes. CabedestacarquelosFramesoMarcosestánquedandoobsoletos. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES <frame>Definecadaframe WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Promoción Interna de Técnico de Soporte Informático <span>Seutilizaparadiferenciartrozosdecontenidoespeciales,alosquehabráquedarun estilodiferente. <form>Formulario.Encierratodosloscontenidosdeunformulario. Ͳ action="url"ͲIndicalaURLqueseencargadeprocesarlosdatosdelformulario Ͳ method="POSToGET"ͲMétodoHTTPempleadoalenviarelformulario 13 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Ͳ enctype="application/xͲwwwͲformͲurlencodedomultipart/ Ͳ formͲdata"ͲTipodecodificaciónempleadaalenviarelformularioalservidor(sólo seindicadeformaexplícitaenlosformulariosquepermitenadjuntararchivos) Ͳ accept="tipo_de_contenido"ͲListaseparadaporcomasdetodoslostiposde archivosaceptadosporelservidor(sóloparalosformulariosquepermiten adjuntararchivos) Ͳ ƒOtros:acceptͲcharset,onsubmit,onreset <input/>Controldeunformulario. Ͳ type="text|password|checkbox|radio|submit|reset|file|hidden|image |button"ͲIndicaeltipodecontrolqueseincluyeenelformulario Ͳ name="texto"ͲAsignaunnombrealcontrol(esimprescindibleparaqueel servidorpuedaprocesarelformulario) Ͳ value="texto"ͲValorinicialdelcontrol Ͳ size="unidad_de_medida"ͲTamañoinicialdelcontrol(paraloscamposdetextoy depasswordserefierealnúmerodecaracteres,enelrestodecontrolesserefiere asutamañoenpíxel) Ͳ maxlength="numero"ͲMáximonúmerodecaracteresparaloscontrolesdetexto ydepassword Ͳ checked="checked"ͲParaloscontrolescheckboxyradiobuttonpermiteindicar quéopciónaparecepreseleccionada Ͳ disabled="disabled"ͲElcontrolaparecedeshabilitadoysuvalornoseenvíaal servidorjuntoconelrestodedatos Ͳ readonly="readonly"ͲElcontenidodelcontrolnosepuedemodificar Ͳ src="url"ͲParaelcontrolquepermitecrearbotonesconimágenes,indicalaURL delaimagenqueseempleacomobotóndeformulario Ͳ alt="texto"ͲDescripcióndelcontrol <select>.Listadesplegable. Ͳ size="numero"ͲNúmerodefilasquesemuestrandelalista(pordefectosólose muestrauna) Ͳ multiple="multiple"ͲSiseincluye,sepermiteseleccionarmásdeunelemento Ͳ Otros:name,disabled,onchange,onfocus,onblur 14 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Ͳ selected="selected"ͲIndicasielelementoapareceseleccionadopordefectoal cargarselapágina Ͳ value="texto"ͲElvalorqueseenvíaalservidorcuandoelusuarioeligeesaopción Ͳ Otros:label,disabled <textarea>Áreadetexto WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES <option>Elementodeunalistadesplegable. Ͳ rows="numero"ͲNúmerodefilasdetextoquemostraráeltextarea Ͳ cols="numero"ͲNúmerodecaracteresquesemuestranencadafiladeltextarea Ͳ Otros:name,disabled,readonly,onselect,onchange,onfocus,onblur <!Ͳ….ͲͲ>.Comentarios. Todosestoselementosdeformularioysusfuncionesymanejoseránestudiadosmásadelante enestetema. EstassonsolamenteunasnocionesmuybásicasdecómocrearunapáginawebconHTML.Encasode quesedeseeprofundizareneltemaserecomiendapracticarmuchoconlasetiquetas. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES 2.2LENGUAJEDESCRIPT Loslenguajesdescriptpermitenincluir“programación”enunapáginaweb.Enrealidadesuna listadecomandoquesepuedenejecutarconlaparticipacióndelusuarioosinella.En definitivaestamoshablandodeunlenguajedeprogramación,quesueleemplearsedentrode uncontexto(otraaplicación)yquenopermiteprogramaraplicacionesindependientes,sino quenecesitandeunintérprete. Existenmúltipleslenguajesdescript:JavaScript,VBScript,Perletc…Sinembargo,por compatibilidad,losmásempleadossonVBScriptyconmuchadiferenciaJavaScript. Ladiferenciaentreellosseencuentrabásicamenteensusintaxis,aunquelosdosnacieroncon elmismofinqueesdotardeunlenguajedescriptrápidoysencilloalaspáginasweb. HabitualmenteloslenguajesscriptenpáginasHTMLseutilizanparacuatrofinesquesonlos siguientes: 1) Validacióndedatos.Sehaceenelequipoclienteyconsisteenverificarquelosdatos quesevanaenviarenunformulariosonadecuadosdependiendodeunasreglas 15 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático marcadas.Porejemplo,queenuncamponúmerodeteléfononoaparezcaunaletra, queuncampoobligatorionoestévacío,queuncampoemailesrealmenteunemail,e infinidaddevalidacionesmás. 2) Actualizarcamposenunformulario.Comoporejemplocuandoseactualizaunalista desplegabledependiendodelbotónderadioquesehayaseleccionado. 3) Procesarinformaciónquenorequierebasededatos.Porejemplosumardosnúmero dedoscamposdeformulario,convertireurosapesetas,etc. 4) Servirdebaseparalautilizacióndeotrastecnologías.DHTM,ActiveX. Los lenguajes de script además pueden actuar sobre lo que está mostrando el navegador, a travésdelosobjetosintegradosqueserepresentaneneldocumento,laventanaactiva,cada unodeloscontrolesdelformulario,etc.Paraconseguirestoseempleaunmodelodeobjetos denominadoDocumentObjectModel(DOM).GraciasaDOM,porejemplo,podemoscambiar, porejemplo,elcolordeunpárrafodependiendodeunbotónderadioquesehayapulsado. INCRUSTARELSCRIPT HaytresmanerasdellamaraunscriptdentrodeunapáginaHTML: 1) Usando una etiqueta <script></script>. Esta etiqueta permite incluir el código directamenteenlapáginaoqueapunteaunficheroexternousandoelatributosrc. 2) Usando los atributos de etiquetas HTML que soportan scripts. Por ejemplo con el atributo“onclick”deunbotóndeformulario,sellamaríaaunafunciónJavaScript. <inputtype=”button”onclick=”pulsar()”/> Alpulsarelbotónseejecutalafunción“pulsar()”queseráuntrozodecódigoquese encuentreobienenelmismodocumentoobienenotro. 3) Incluyendoenelatributohrefdeunelementoa.Porejemplo: <ahref=”javascript:pulsar()”>FunciónPulsar</a> Alpincharenelenlacedefinidoporestaetiqueta<a>seejecutarálafunciónjavascript “pulsar()”. Elcódigodelscriptpuedeescribirseenunficheroapartequedespuésseguardaráconla extensión.js(enelcasodeJavaScript).Esteficheroserá“llamado”poreldocumentohtml dentrodelaetiqueta<head><head>.Porejemplo: <scripttype="text/javascript"src="scripts/script.js"> 16 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Otramaneradeescribirelcódigoesdentrodelasetiquetas<head></head>delmismo documentohtml.Delasiguientemanera: Código </script> PARTESDELSCRIPT WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES <script language=”JavaScript”> El código de un script o programa JavaScript consta de los elementos que se dan a continuación,loscualessediscutiránendetalleenlossiguientestemas: Cuerpoprincipal.Cualquiercódigosituadoentrelasetiquetas<script></script>yque noseaunadefinicióndeunafunción. Manipuladoresdeeventos.Loseventossonaccionesqueocurrenenrespuestaaalgo queelusuariorealiza.Cuandounusuariohaceclickconelratónesunevento(onclick) cuandopulsaunateclatambiénesunevento…etc.Losmanipuladoresdeeventosson scripts que se definen para enlazar la aparición de un evento con la llamada a funcionesJavaScript. Funciones.LasfuncionessonrozosdecódigoJavaScriptquepermanecenalaespera de ser ejecutados por otras secciones de código. Es un concepto muy utilizado en cualquierlenguajedeprogramación. WWW.ECLAP.JCYL.ES AligualqueconHTMLparaprofundizarenestetemaserequiereunestudiocentradoenel tema,ademásdeunosmínimosconocimientosdeprogramación. 2.3INTRODUCCIÓNPROGRAMACIÓNWEB WWW.ECLAP.JCYL.ES Daremosunavisiónmuygenéricasobreesteconcepto,yaqueesfundamentaltenerunabase sólidadeprogramaciónparapoderllevarloalapráctica. Ya hemos visto que el “lenguaje” utilizado para montar la estructura de una página web es HTML o bien XHTML, pero estas etiquetas solamente permiten mostrar información en la pantalla,novamásallá. Las aplicaciones web son una combinación de diferentes lenguajes de programación y llamadasabasesdedatosqueconsiguenqueunawebmuestreinformaciónenfuncióndelo queelcódigodelaprogramaciónestipuleademásdesercapazdeleeryalmacenarcontenido enunabasededatos. 17 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Contodoestoseconsigueelconceptode“webdinámica”dondeloscontenidossemuestrany cambianenfuncióndeestasllamadasabasesdedatosyenfuncióndeestaprogramación. Es importante saber diferenciar entre dos conceptos: los lenguajes del lado cliente y los lenguajesdelladoservidor. Ͳ Lenguajesdelladocliente.Sonlosquepuedeejecutardirectamenteelnavegador del equipo donde se está visualizando la página web. Un ejemplo es JavaScript. Cuando un usuario se conecta a una página que tenga un código JavaScript, su propio navegador es el encargado de “compilar” y ejecutar este código sin necesidaddeunservidor. Ͳ Lenguajesdelladoservidor:sonloslenguajesqueseejecutanenelservidordonde está alojada la página. Estos lenguajes son por ejemplo PHP, ASP… El propio navegadornoescapazdeinterpretarciertoscódigos,poreso,alconectarseauna páginaconestetipodecódigo,elpropioservidorqueloalojaestápreparadopara ejecutarlassentenciasdeestoslenguajes. Varios lenguajes de programación sirven para este cometido, los más usados son los siguientes: LENGUAJEPHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivoquesignifica“PHPHypertextPreͲprocessor”,(inicialmentesellamóPersonalHome Page).Surgióen1995,desarrolladoporPHPGroup. PHPesunlenguajedescriptinterpretadoenelladodelservidorutilizadoparalageneración de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado ApacheoIISconlaslibreríasdePHP.LamayorpartedesusintaxishasidotomadadeC,Javay Perlconalgunascaracterísticasespecíficas.Losarchivoscuentanconlaextensión(php). VENTAJAS: Muyfácildeaprender. Secaracterizaporserunlenguajemuyrápido. Soportaenciertamedidalaorientaciónaobjeto.Clasesyherencia. Esunlenguajemultiplataforma:Linux,Windows,entreotros. Capacidaddeconexiónconlamayoríadelosmanejadoresdebasededatos:MysSQL, PostgreSQL,Oracle,MSSQLServer,entreotras. Capacidaddeexpandirsupotencialutilizandomódulos. 18 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Eslibre,porloquesepresentacomounaalternativadefácilaccesoparatodos. Incluyegrancantidaddefunciones. Norequieredefinicióndetiposdevariablesnimanejodetalladodelbajonivel. DESVENTAJAS: Senecesitainstalarunservidorweb. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Posee documentación en su página oficial la cual incluye descripción y ejemplos de cadaunadesusfunciones. Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficienteamedidaquelassolicitudesaumentendenúmero. LalegibilidaddelcódigopuedeverseafectadaalmezclarsentenciasHTMLyPHP. Laprogramaciónorientadaaobjetosesaúnmuydeficienteparaaplicacionesgrandes. Dificultalamodularización. Dificultalaorganizaciónporcapasdelaaplicación. SEGURIDAD: WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES PHPesunpoderosolenguajeeintérprete,yaseaincluidocomopartedeunservidorweben formademódulooejecutadocomounbinarioCGIseparado,escapazdeaccederaarchivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que cualquiercosaqueseaejecutadaenunservidorwebseainsegurapornaturaleza. PHPestádiseñadoespecíficamenteparaserunlenguajemásseguroparaescribirprogramas CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de compilaciónyejecución,ysiguiendoalgunasprácticascorrectasdeprogramación. LENGUAJEASP Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en 1996.LaspáginaswebdesarrolladasbajoestelenguajeesnecesariotenerinstaladoInternet InformationServer(IIS). ASPnonecesitasercompiladoparaejecutarse.Existenvarioslenguajesquesepuedenutilizar paracrearpáginasASP.ElmásutilizadoesVBScript,nativodeMicrosoft.ASPsepuedehacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el códigoHTML.Losarchivoscuentanconlaextensión(asp). VENTAJAS: 19 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático UsaVisualBasicScript,siendofácilparalosusuarios. ComunicaciónóptimaconSQLServer. SoportaellenguajeJScript(JavascriptdeMicrosoft). DESVENTAJAS: Códigodesorganizado. Senecesitaescribirmuchocódigopararealizarfuncionessencillas. Tecnologíapropietaria. Hospedajedesitioswebcostosos. ASP.NET EsteesunlenguajecomercializadoporMicrosoft,yusadoporprogramadoresparadesarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercadomedianteunaestrategiademercadodenominada.NET. ElASP.NETfuedesarrolladopararesolverlaslimitantesquebrindabatuantecesorASP.Creado paradesarrollarwebsencillasograndesaplicaciones.ParaeldesarrollodeASP.NETsepuede utilizarC#,VB.NEToJ#.Losarchivoscuentanconlaextensión(aspx).Parasufuncionamiento delaspáginassenecesitatenerinstaladoIISconelFramework.Net.MicrosftWindows2003 incluyeesteframework,solosenecesitaráinstalarloenversionesanteriores. VENTAJAS: Completamenteorientadoaobjetos. Controlesdeusuarioypersonalizados. Divisiónentrelacapadeaplicaciónodiseñoyelcódigo. Facilitaelmantenimientodegrandesaplicaciones. Incrementodevelocidadderespuestadelservidor. Mayorvelocidad. Mayorseguridad. DESVENTAJAS: Mayorconsumoderecursos. 20 Técnico de Soporte informático WWW.ECLAP.JCYL.ES TEMA 20 WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Promoción Interna de Técnico de Soporte Informático 21 WWW.ECLAP.JCYL.ES Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 3. PRINCIPIOSDELDISEÑODEINTERFACES. Yavimosenelprimerpuntodeestetemaunaintroducciónaldiseñodeinterfaces. Ampliaremoslainformaciónenesteapartado. CuandosehabladeSitiosWeb,sellamainterfazalconjuntodeelementosdelapantallaque permiten al usuario realizar acciones sobre el Sitio Web por el que está navegando. Por la misma razón, se considera parte de la interfaz a sus elementos de identificación, de navegación,decontenidosydeacción. Todosestoselementosdeben estar preparados para ofrecer unos servicios determinados al usuario, para que éste pueda obtener lo que entró a buscar cuando visitó el Sitio Web. Por todoesto,cadaunodeloselementosqueseintegrendentrodelainterfazdebeestarpensado paracausarunefectosobreelusuarioydebenserutilizadosconunfin. En este sentido, es esencial considerar que uno de los autores más citados en cuanto a la usabilidad de los Sitios Web, destaca que los elementos más importantes de la portada de cualquierSitioWebsepuedenresumirencuatropremisasgenerales: Dejar claro el propósito del sitio: se refiere a que el sitio debe explicar a quién perteneceyquépermitehaceraquieneslovisitan;seentiendequedebehacerlode manera simple y rápida. Por ejemplo, ayuda en este sentido el cumplimiento de las normasreferidasausodeURLsylogotiposoficiales. Ayudaralosusuariosaencontrarloquenecesitan:implicaquedebecontarconun sistema de navegación visible y completo, pero que además deberá estar complementado por algún sistema de búsqueda que sea efectivo para acceder al contenidoalquenoselograaccederoquenoseencuentraasimplevista. Demostrar el contenido del sitio: significa que el contenido se debe mostrar de maneraclara,contítuloscomprensiblesporpartedelusuarioyconenlaceshacialas seccionesmásusadasqueesténdisponiblesdondeelusuariolosbusque.Ayudaráen estesentidotenerunseguimientodelasvisitasparacomprenderquéeslomásvistoy lomásbuscadodelSitioWeb. Usar diseño visual para mejorar y no para definir la interacción del Sitio Web: se refiereaqueloselementosgráficosdelSitioWebdebenestarpreparadosparaayudar en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio. Aunquesetratadeunodelostemasmásdebatibles,sualcancenoeselderestringir el uso de imágenes y elementos gráficos, sino a que su uso sea adecuado para la experienciadeusoquesedeseaofrecer. 22 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega como visitante consiga los objetivos que lo trajeron al Sitio Web y que éste le ponga fácil el accesoaloscontenidosatravésdesuspantallas. Para conseguir este objetivo, es necesario que la interfaz adopte los elementos, que detallamosenestecapítulo,atravésdeloscualesseráposibleconseguirelcumplimientode lospostuladosantesseñalados. ELEMENTOSDELAINTERFAZ La interfaz del Sitio Web, cualquiera sea el objetivo que persiga, debe tener una serie de normas de carácter general, referidas a sus características como sistema de información y comunicación. Gracias al cumplimiento de esas normas, el usuario conseguirá acceder a las informaciones que se le ofrecen y, además, podrá realizar las acciones que el organismo propietariodelespaciodigitalleentregaatravésdeestesistema. Dichas características tienen que ver con los elementos de identificación, de navegación, de contenidos y de acción que el Sitio Web debe contener, todos los cuales se analizan en las siguientespáginas. Laexistenciaeimportanciadedichoselementos,comoasimismolaubicaciónquedebentener en la interface, se ha visto comprobada a través de las investigaciones que se han hecho en tornoalosSitiosWeb. WWW.ECLAP.JCYL.ES Usodelogotipos Sistemadenavegación Áreasdecontenidos Áreasdeinteracción Experienciadeusuario WWW.ECLAP.JCYL.ES Respecto de los elementos de la interface, los aspectos más relevantes a tener en consideraciónsonlossiguientes: 23 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático Laubicaciónrelativadeestoselementospodríaser,porejemplo,lasiguiente. SISTEMADENAVEGACIÓN Eselconjuntodeelementospresenteencadaunadelaspantallas,quepermiteaunusuario moverseporlasdiferentesseccionesdeunSitioWebyretornarhastalaportada,sinsentirla sensacióndehaberseperdidoenesecamino. Paraconseguirestoseincluyenelementoscomo: Menúdesecciones:esunazonadelainterfazenlaquesedetallanlasseccionesocategorías enlasqueestádivididalainformacióncontenidaenelSitioWeb. Menúderastros(migasdepanobreadcrumb):eselmenúqueindicamediantelosnombres decadasecciónocategoríadelmenúladistanciaqueseparaalapáginaactualdelaportada. Eseltípicomenúquesueleaparecerjustodebajodelacabeceradelaspáginas,indicando,o bienlaspáginasporlasquehemosnavegadohastallegardondenosencontramos,obienla estructura de páginas del sitio con respecto al documento donde estamos. Normalmente se sueleutilizarlasegunda.Sueletenerelsiguientesencilloformato:(Ejemplo) Inicio>Menúdelibros>Novelas Identificación de secciones: debe estar en la zona superior de la página, cerca de la zona donde se encuentra el logotipo que se haya elegido para identificar al Sitio Web. Es una manera de identificar, a través de colores, o imágenes la sección de la página donde nos encontramos. 24 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Botonesdeacción:sonaquelloselementosquepermitenrealizaraccionesdirectasrelativasa la navegación y que se muestran como parte de ésta (Volver al inicio, Contacto, Mapa del sitio). WWW.ECLAP.JCYL.ES Piedepágina:eslazonainferiordecadapantallacumpleelrelevantepapeldecompletarsula información que se ofrece en las zonas superiores de navegación. (Nombres, direcciones, teléfonos,emails…) ÁREADECONTENIDOS Sonlaszonasenlaqueseexponelainformaciónencadapáginaweb,sinimportarelformato olosmediosqueéstautilice. Loidealesquesedividaentreszonas.Título,resumenycontenido. ÁREADEINTERACCIÓN Seentiendepor"áreasdeinteracción"alaszonasenlaqueseofrecerealizacióndeacciones porpartedelosusuariosdelSitioWeb,atravésdelascualespuedenutilizarlosserviciosdela institución que pone en marcha el espacio digital. La interacción, en este sentido, va desde acciones menores que pueden ser enlaces para mayor información o suscripción a servicios informativos periódicos, hasta la realización de trámites complejos como la obtención de certificadosoelpagodeobligaciones. 25 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 4. FORMULARIOSELECTRÓNICOS Todoshemosrellenadoalgunavezunformularioenpapel. Losformulariosenpapelsonfamososhabitualmenteporsudificultadpararellenarlos,yenel casodeformulariosrellenosamano,sudificultadparadescifrarlosposteriormente. Los formularios electrónicos vienen a minimizar muchas de las desventajas de los que se presentan en papel. Es posible diseñar un formulario electrónico de forma que contenga información de ayuda para la persona que va a rellenarlo. Estos formularios electrónicos pueden contener campos de texto, listas desplegables, casillas para seleccionar entre varias opciones(unadeellasovarias),camposdetextolargodondeescribirobservaciones… Puesto que el formulario se rellena desde el propio ordenador, se evitan todos los posibles problemas de interpretación de los datos introducidos, como sucede con los formularios en papelrellenosamano.Además,silacomputadoraestáconectadaaunared,losformularios electrónicospuedensercumplimentadosycompartidosdelamismaformaquesecomparte cualquierotrotipodedocumento,eliminandoasíporcompletolanecesidaddelosformularios enpapel. Actualmente existen muchas maneras de crear formularios electrónicos, por ejemplo, los propiosprogramasofimáticostipoOfficepermitenlacreacióndeestaherramienta.Sonmuy utilizados también los formularios en pdf, configurados a través de la aplicación Adobe Acrobat, pero es necesaria la versión Proffesional para poder editarlos, aunque no para rellenarlos. Los que nos interesan en este caso son los formularios creados con html, a través de las etiquetasqueyavimosensucorrespondienteapartado.Vamosaprofundizarunpocomásen lautilidadyusodecadaunadeellas. FORMULARIOSCONHTML Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>. La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listasdesplegables)ylaetiqueta<input>permitedefinirvariostiposdiferentesdeelementos (botonesycuadrosdetexto). Ya vimos en el apartado 2 de este tema las etiquetas correspondientes a formularios, y sus atributos. 26 Promoción Interna de Técnico de Soporte Informático Técnico de Soporte informático TEMA 20 WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Lamayoríadeformulariosutilizansólolosatributosactionymethod.Elatributoactionindica laURLdelaaplicacióndelservidorqueseencargadeprocesarlosdatosintroducidosporlos usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. Elatributomethodestablecelaformaenlaqueseenvianlosdatosdelformularioalservidor. EsteatributohacereferenciaalmétodoHTTP,porloquenoesalgopropiodeHTML.Losdos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formulariosincluyenelatributomethod="get"oelatributomethod="post". Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más informaciónqueelmétodoGET.Engeneral,elmétodoGETadmitecomomáximoelenvíode unos500bytesdeinformación.LaotragranlimitacióndelmétodoGETesquenopermiteel envíodearchivosadjuntosconelformulario.Además,losdatosenviadosmedianteGETseven enlabarradedireccionesdelnavegador(seañadenalfinaldelaURLdelapágina),mientras quelosdatosenviadosmediantePOSTnosepuedenvertanfácilmente. ELEMENTOSDEFORMULARIO Lamayoríadeloselementosseformanconlaetiqueta<input>.Elatributotypediferenciaa cadaunodelosdiezcontrolesquesepuedencrearconlaetiqueta<input>. WWW.ECLAP.JCYL.ES CUADRODETEXTO Elvalordelatributotypees“text”. Nombre: <input type="text" name="nombre" value="" /> Setratadelelementomásutilizadoenlosformularios. WWW.ECLAP.JCYL.ES Elatributonameeselmásimportanteenloscamposdelformulario.Dehecho,siuncampono incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributonameeselnombrequeutilizalaaplicacióndelservidorparaobtenerelvalordeeste campodeformulario.Cuandoelusuariopulsaelbotóndeenvíodelformulario,elnavegador envía los datos a una aplicación del servidor para que procese la información y genere una respuestaadecuada.Enelservidor,laaplicaciónqueprocesalosdatosdebeobtenerenprimer lugartodalainformaciónintroducidaporelusuario.Paraello,utilizaelvalordelatributoname paraobtenerlosdatosdecadacontroldelformulario. Se puede controlar el tamaño con el atributo “size”, el número máximo de caracteres a introducirconelatributo“maxlength”,elvalorpordefectocon“value”ysieseditableono con“readonly”. 27 Promoción Interna de Técnico de Soporte Informático Técnico de Soporte informático TEMA 20 CUADRODECONTRASEÑA Elvalordetypees“password”. Password: <input type="password" name="pass" value="" /> La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadoresocultaneltextoutilizandoasteriscosocírculos,porloqueesidealparaescribir contraseñasyotrosdatossensibles. CHECKBOX Elvalordetypees“checkbox”. Elige opciones <input type="checkbox" value=”1”/> Opcion 1 <input type="checkbox" value=”2”/> Opcion 2 <input type="checkbox" value=”3”/> Opcion 3 Loscheckboxo"casillasdeverificación"soncontrolesdeformularioquepermitenalusuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varioscheckboxjuntos,cadaunodeellosescompletamenteindependientedelresto.Poreste motivo,seutilizancuandoelusuariopuedeactivarydesactivarvariasopcionesrelacionadas peronoexcluyentes. Sisequieremostraruncheckboxseleccionadopordefecto,seutilizaelatributo“checked”. RADIOBUTTON Elatributotypees“radio”. 28 TEMA 20 Técnico de Soporte informático WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Promoción Interna de Técnico de Soporte Informático Elige una opción: <input type="radio" value=”op”/> Opcion 1 <input type="radio" value=”op”/> Opcion 2 <input type="radio" value=”op”/> Opcion 3 Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadasqueselepresentan.Cadavezqueseseleccionaunaopción,automáticamentese deseleccionalaotraopciónqueestabaseleccionaba. El atributo “name” se emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuandoseseleccioneotraopción. BOTÓNDEENVÍODEFORMULARIO <input type="submit" value=”Enviar”/> WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Elvalordetypees“submit”. Elnavegadorseencargadeenviarautomáticamentelosdatoscuandoelusuariopinchasobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se estableceelatributovalue,elnavegadormuestraeltextopredefinidoEnviarconsulta. BOTÓNDERESETEO Elvalordetypees“reset”. <input type="reset" value=”Borrar campos”/> Aunque su uso era muy popular hace unos años, la mayoría de formulariosmodernos ya no utilizan este tipo de botón. Se trata de un botón especial que borra todos los datos introducidosporelusuarioydevuelveelformularioasuestadooriginal. 29 Promoción Interna de Técnico de Soporte Informático Técnico de Soporte informático TEMA 20 FICHEROSADJUNTOS Elvalordetypees“file”. <input type="file" /> Losformulariostambiénpermitenadjuntararchivosparasubirlosalservidor. Elnavegadorseencargademostraruncuadrodetextodondeapareceelnombredelarchivo seleccionadoyunbotónquepermitenavegarporlosdirectoriosyarchivosdelordenadordel usuario. CAMPOSOCULTOS Elvalordetypeeshidden. <input type="hidden" /> Loscamposocultosseempleanparaañadirinformaciónocultaenelformulario. Los campos ocultos no se muestran por pantalla, de forma que el usuario desconoce que el formulariolosincluye. Normalmenteloscamposocultosseutilizanparaincluirinformaciónquenecesitaelservidor peroquenoesnecesarioonoesposiblequelaestablezcaelusuario. BOTÓNDEIMAGEN Elvalordetypees“image”. <input type="image" src=”acepta.png” /> Elaspectodelosbotonesdeformulariosepuedepersonalizarporcompleto,yaqueinclusoes posibleutilizarunaimagencomobotón. ElatributosrcindicalaURLdelaimagenquedebemostrarelnavegadorenlugardelbotón normal. Su principal ventaja es que permite personalizar por completo la estética de los botones y mostrarlosconunaspectohomogéneoentodoslosnavegadores.Elprincipalinconvenientees queralentizalacargadelformularioyquesisequieremodificarsuaspecto,esnecesariocrear unanuevaimagen. BOTÓN Elvalordetypees“button”. 30 Promoción Interna de Técnico de Soporte Informático Técnico de Soporte informático TEMA 20 <input type="button" value=”Guardar cambios” /> WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar HTML/XHTMLdefineunbotóndetipogenérico. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript.SilapáginaincluyecódigoJavaScript,losbotonesdeestetiposepuedenprogramar paraquerealicencualquiertareacomplejacuandosepulsasobreellos. ÁREADETEXTO Esteeselprimerelementoquevemosquenoutilizaetiqueta<input> Eláreadetextoutilizalaetiqueta<textarea> Observaciones: <br /> WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES <textarea rows="8" cols="40"></textarea> Lasáreasdetextosonútilescuandosedebeintroducirunagrancantidaddetexto,yaquees muchomáscómododeintroducirqueenuncampodetextonormal. Los atributos más utilizados en las etiquetas <textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo cols, que indica las columnasonúmerodecaracteresquesepodránescribircomomáximoencadafila.Laaltura del área de texto se controla mediante rows, que indica directamente las filas de texto que seránvisibles. LISTADESPLEGABLE Utiliza la etiqueta <select> para definir la lista y <option> para definir cada uno de los elementos.Haydiferentestiposdelistasdesplegables:listasquesolomuestranunvalorala vez y solo permiten seleccionar un valor, listas que muestra varios pero solo permite seleccionarunoyporúltimolistasquemuestranypermitenseleccionarvarioselementos. Laetiqueta<select>definelalistayencierratodaslasopcionesquemuestralalista.Cadauna delasopcionesdelalistasedefinemedianteunaetiqueta<option>.Elatributovaluedecada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el 31 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo selectedalaopcióndeseada. 32 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 5.1ACCESIBILIDAD WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES 5. ACCESIBILIDAD,DISEÑOUNIVERSALYUSABILIDAD El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario, independientementedeltipodediscapacidadquesufra,elaccesoaloscontenidosdelsitioy permitirlelanavegaciónnecesariapararealizarlasaccionesdeseadas. Los sitios web accesibles no solamente facilitan el acceso de sus contenidos a los usuarios discapacitados, sino que también permiten ofrecer la misma funcionalidad con dispositivos muylimitados(dispositivossinpantallaoconpantallasminúsculas,dispositivossintecladoni ratón,etc.). Las cuatro principales ventajas de diseñar un sitio web completamente accesible son las siguientes: Lossitiosaccesiblesseparancompletamentediseñoycontenido. Un sitio accesible puede ser accedido por multitud de dispositivos diferentes sin necesidaddereescribirelcódigoHTML. Lossitiosaccesiblessonlosúnicosconunaaudienciapotencialglobal,yaquepermiten elaccesoatodoslosusuariosyatodoslosdispositivos. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES Generalmente,lossitiosaccesiblessonmásfácilesdeutilizartambiénparalosusuarios sindiscapacidades. La creación de sitios accesibles puede realizarse siguiendo las recomendaciones establecidas por el W3C y que se recogen en el documento Web Content Accessibility Guidelines (http://www.w3.org/WAI/intro/wcag.php)(WCAG). LasrecomendacionesdelWCAG1.0estánformadaspor65requisitosqueunsitiowebdebe cumplirparaconsiderarseaccesible.Losrequerimientosseagrupanenprioridades. Los requisitos de prioridad 1 son de obligado cumplimiento, los de prioridad 2 son recomendablesylosdeprioridad3sondeseables. Si un sitio web cumple con todos los requisitos de prioridad 1, se considera que el sitio es conformealnivelAdeaccesibilidad.ElnivelAAdeaccesibilidadestáreservadoparalossitios que cumplan todos los requisitos de prioridad 1 y prioridad 2. Finalmente, los sitios que cumplenlos65requisitos,sonconformesalnivelAAAdeaccesibilidad. 33 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 5.2.DISEÑOUNIVERSAL Elobjetivodeldiseñouniversales“simplificarlarealizacióndelastareascotidianasmediante laconstruccióndeproductos,serviciosyentornosmássencillosdeusarportodaslaspersonas ysinesfuerzoalguno.Eldiseñouniversal,asípues,beneficiaatodaslaspersonasdetodaslas edadesyhabilidades.” Consta de siete principios básicos que deben cumplir estos servicios y productos, entre ellos laspáginasyaplicacionesweb.Lossieteprincipiosysuspautasparaquesecumplanson: 1)Principio:Usoequiparable Eldiseñoesútilyvendibleapersonascondiversascapacidades. PautasparaelPrincipio1: 9 Queproporcionelasmismasmanerasdeusoparatodoslosusuarios:idénticascuando esposible,equivalentescuandonoloes. 9 Queevitesegregaroestigmatizaracualquierusuario. 9 Las características de privacidad, garantía y seguridad deben estar igualmente disponiblesparatodoslosusuarios. 9 Queeldiseñoseaatractivoparatodoslosusuarios. 2)Principio:Usoflexible Eldiseñoseacomodaaunampliorangodepreferenciasyhabilidadesindividuales. PautasparaelPrincipio2 9 Queofrezcaposibilidadesdeelecciónenlosmétodosdeuso. 9 Quepuedaaccederseyusarsetantoconlamanoderechacomoconlaizquierda. 9 Quefacilitealusuariolaexactitudyprecisión. 9 Queseadaptealpasooritmodelusuario. 3)Principio:Simpleeintuitivo El uso del diseño es fácil de entender, atendiendo a la experiencia, conocimientos, habilidadeslingüísticasogradodeconcentraciónactualdelusuario. PautasparaelPrincipio3 9 Queeliminelacomplejidadinnecesaria. 34 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 9 Queseaconsistenteconlasexpectativaseintuicióndelusuario. 9 Quedispenselainformacióndemaneraconsistenteconsuimportancia. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES 9 Queseacomodeaunampliorangodealfabetizaciónyhabilidadeslingüísticas. 9 Queproporcioneavisoseficacesymétodosderespuestaduranteytraslafinalización delatarea. 4)Principio:Informaciónperceptible Eldiseñocomunicademaneraeficazlainformaciónnecesariaparaelusuario,atendiendoa lascondicionesambientalesoalascapacidadessensorialesdelusuario. PautasparaelPrincipio4 9 Que use diferentes modos para presentar de manera redundante la información esencial(gráfica,verbalotáctilmente) 9 Queproporcionecontrastesuficienteentrelainformaciónesencialysusalrededores. 9 Queamplíelalegibilidaddelainformaciónesencial. 9 Que diferencie los elementos en formas que puedan ser descritas (por ejemplo, que hagafácildarinstruccionesodirecciones). 9 Queproporcionecompatibilidadconvariastécnicasodispositivosusadosporpersonas conlimitacionessensoriales. WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES 5)Principio:Contoleranciaalerror El diseño minimiza los riesgos y las consecuencias adversas de acciones involuntarias o accidentales. PautasparaelPrincipio5 9 Que disponga los elementos para minimizar los riesgos y errores: elementos más usados,másaccesibles;yloselementospeligrososeliminados,aisladosotapados. 9 Queproporcioneadvertenciassobrepeligrosyerrores. 9 Queproporcionecaracterísticassegurasdeinterrupción. 9 Quedesalienteaccionesinconscientesentareasquerequierenvigilancia. 6)Principio:Queexijapocoesfuerzofísico Eldiseñopuedeserusadoeficazyconfortablementeyconunmínimodefatiga. PautasparaelPrincipio6 9 Quepermitaqueelusuariomantengaunaposicióncorporalneutra. 35 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático 9 Queutilicedemanerarazonablelasfuerzasnecesariasparaoperar. 9 Queminimicelasaccionesrepetitivas. 9 Queminimiceelesfuerzofísicocontinuado. 7)Principio:Tamañoyespacioparaelaccesoyuso Que proporcione un tamaño y espacio apropiados para el acceso, alcance, manipulación y uso,atendiendoaltamañodelcuerpo,laposturaolamovilidaddelusuario. PautasparaelPrincipio7 9 Queproporcioneunalíneadevisiónclarahacialoselementosimportantestantopara unusuariosentadocomodepie. 9 Que el alcance de cualquier componente sea confortable para cualquier usuario sentadoodepie. 9 Queseacomodeavariacionesdetamañodelamanoodelagarre. 9 Que proporcione el espacio necesario para el uso de ayudas técnicas o de asistencia personal. Fuente: Centro para el Diseño Universal (NC State University, The Center for Universal Design, an initiative of the CollegeofDesign) Traducciónyadaptación:FundaciónSidar 5.3.USABILIDAD SegúnlaOrganizaciónInternacionalparalaEstandarización(ISO)lausabilidadpuededefinirse dedosmaneras: ISO/IEC9126: “Lausabilidadserefierealacapacidaddeunsoftwaredesercomprendido,aprendido,usado yseratractivoparaelusuario,encondicionesespecíficasdeuso” ISO/IEC9241: “Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicosausuariosespecíficosenuncontextodeusoespecífico” La usabilidad implica preguntarse cosas como las siguientes, que pueden responderse realizandoanálisisdeusuarios/visitantesytareasalplanificarunproyectoweb: 36 Promoción Interna de Técnico de Soporte Informático TEMA 20 Técnico de Soporte informático ¿Quiénessonlosusuarios,cuálessusconocimientos,yquépuedenaprender? ¿Cuáleslaformacióngeneraldelosusuarios? ¿Cuáleselcontextoenelqueelvisitanteestátrabajando? ¿Quédebedejarsealamáquina?¿Quéalusuario? Otrasconsideracionesincluyen: WWW.ECLAP.JCYL.ES WWW.ECLAP.JCYL.ES ¿Quéquierenonecesitanhacerlosvisitantes? ¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las tareasprevistasalavelocidadesperada? ¿Cuántapreparaciónnecesitanlosvisitantes? ¿Qué documentación u otro material de apoyo están disponible para ayudar al usuario?¿Puedeéstehallarlasrespuestasquebuscanenestosmedios? ¿Cuálesycuántoserrorescometenlosusuarioscuandointeractúanconelproducto? ¿Puedeelvisitanterecuperarsedeloserrores?¿Quéhadehacerparaello?¿Ayudael productoarecuperarsedeloserrores?Porejemplo,¿muestraelsoftwaremensajesde erroresinformativosynoamenazantes? ¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades?(Esdecir,¿sehatenidoencuentalaaccesibilidad?) WWW.ECLAP.JCYL.ES Losprincipiosbásicosenlosquesebasalausabilidadson: WWW.ECLAP.JCYL.ES Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus visitantes vuelvanunayotravez,puestoquealponerlesfácillanavegaciónportusitiomejorarásmucho laimagendetuweb. Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la sintetización, familiaridad,lageneralizacióndelosconocimientospreviosylaconsistencia. Flexibilidad:relativaalavariedaddeposibilidadesconlasqueelusuarioyelsistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimizaciónentreelusuarioyelsistema. Robustez:eselniveldeapoyoalusuarioquefacilitaelcumplimientodesusobjetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de informaciónydeajustedelatareaalusuario. 37 Promoción Interna de Técnico de Soporte Informático TEMA 20 BIBLIOGRAFÍA Ͳ JenniferNiederstRobbins.DiseñoWeb,guíadereferencia. Ͳ DesarrollodeAplicacionesWebDinámicasͲUNED PÁGINASWEBCONSULTADAS Ͳ http://www.sidar.org/(FundaciónSidar) Ͳ www.w3c.es Ͳ www.accesible.es Técnico de Soporte informático 38