«| EDITORIALEDITORIAL MACRO’ Disefio web con HTMLS y CSS3 Autor: Manuel Angel Torres Remén © Derecho de autor registrados: Empresa Editora Macro E.L.R.L © Derecho de edicién, arte grafico y diagramacién reservados Empresa Editora Macro EIRL Corrector de estilos: Milton A. Gonzales M. Coordinador de arte y disefio: Alejandro Marcas Leén Diagramacion: Sebastian Alvarez Sanchez. Edicién a cargo de: Empresa Editora Macro EIRL Ay, Paseo de la Republica N° S613 , Miraflores, Lima, Peri © (511) 748 0560 © ventas@editorialmacro.com ‘® wwweditorialmacro.com Primera edicién: junio 2014 Tiraje 1 000 ejemplares Impresién: Talleres Graficos de la Empresa Editora Macro EIRL Jr. San Agustin N.° 612-624, Surquillo, Lima, Pera Lima, Pert ISBN N@ 978-612-304-207-3, Hecho el Depésito Legal en la Biblioteca Nacional del Per N° 2014-08317 Prohibida la reproduccién parcial 0 total, por cualquier medio 0 método, de este libro sin previa autorizacién de la Empresa Editora Macro EIRL.aor Te CML CSU Lk Sed Ellicenciado Manuel Torres estudié en el Instituto de Educacién Superior “Manuel Arévalo Céceres” y en la Universidad Alas Peruanas. Actualmente se desempefia como consultor tecnolégico de empresas como TopyTop y Nestlé. Asimismo, imparte los cursos de Programacién, Analisis y Disefio de Sistemas y Base de Datos en instituciones educativas, como el instituto “Manuel Arévalo Caceres’, Cibertec y Unimaster, de la Universidad Nacional de Ingenieria. Ha publicado los libros de programacién: Desarrollo de aplicaciones con Java, Programacién orientada @ Objetos con Visual Basic 2012, Fundamentos de Programacién con Visual Basic 2012 y Programacién Transact con SQL Server 2012. Si tuviera alguna duda o sugerencia sobre el material, se le puede escribir al siguiente correo: manuel.torresr@hotmail.comLicenciasle Manue! Terres En algunos casos, sobre todo en el uso de cédigos, se han omitido las tildes (’) por decisién del autor. Por ello algunas palabras que forman parte de las imagenes no aparecen tildadas.Yee teller Siempre he pensado que redactar un libro brinda la posibilidad de exponer a los demas un poco de las experiencias ganadas en el trabajo mismo. Por ello, mi primer agradecimiento es para ustedes, estimados lectores, pues los comentarios que me envian, tanto desde de mi querido Per como desde el exterior, me hacen sentir que mi trabajo es apreciado y que valié la pena todo sacrificio. Todo ello me motiva a continuar con la creacién de més materiales de apoyo como este. Seguidamente quisiera agradecer a la familia Macro por haberme dado la oportunidad de exponer mis experiencias y conocimientos en este nuevo libro, siempre estaré agradecido por ello, ya que cuento con el respaldo de una gran y prestigiosa editorial, como esta. Finalmente, quiero agradecer a las personas a quienes, para poder elaborar este material, he privado de un tiempo que siempre les pertenecié, como a mis pequefias Angela Victoria y Fernanda Ximena Torres Lazaro, y, claro est, a Luz, mi compafiera de toda la vida, quien comprende mi labor y es para mi una esposa formidable.Capitulo 1 Introduccién al disefio web con HTML 5 y CSS3... 219 1.1 Las versiones del HTML.. 1.2. Los navegadores y sus diferencias 20 1.2.1 Tiempo de carga... 1.2.2 Entorno de trabajo... 1.23. Ventanas emergentes 13. HTMLS y sus novedades.. 1.4 HTMLS y las Hojas de Estilo en Cascada 1.5. HTMLS y JavaScript..... 1.6 HTMLS y jQUery on. 1.7 HTMLS y los dispositivos méviles. ; 18 Cudl es la diferencia entre W3C y WHATWG.. 1.9. Requerimientos minimos del sistema 1.10 Cémo determinar si mi navegador esté preparado para HTMLS... 1.11 Comprendiendo la URL 1.12 Implementando un documento web HTMLS con Bloc de Notas .. 1.13 Implementando un documento web HTMLS con Komodo Edit: 1.14 Implementando un documento web HTMLS con Sublime Text 23 Capitulo 2 Estructurando documentos para la web 2.1. Estructura de una etiqueta HTMLS 2.2. Etiquetas obsoletas para HTMLS .. 2.3 Elementos que cambian su significad. 2.4. Los atributos de una etiqueta HTMLS.. 2.5. Identificacién de los atributos en una etiqueta HTMLS..... 25.1 Atributo id 25.2 Atributo class 25.3 Atributo title . 25.4 Atributo style 255 Atributo dir 2.5.6 Atributo lang. 2.6 Especificacién DOCTYPE. 2.7 Laetiqueta HEAD. 28 La etiqueta TITLE 29 Laetiqueta LINK 2.10 La etiqueta BODY ; 2.10.1 Qué elementos podemos colocar dentro del BODY... 48 522.11 Comentarios en HTMLS. 2.12. Trabajando con etiquetas grupales . 212.1 La etiqueta DIV.nnnnneennnnennse 2.12.2 La etiqueta HEADER... 2.12.3 La etiqueta HGROUP. 2.12.4 La etiqueta NAV. 2.12.5 La etiqueta SECTION ..... 2.12.6 La etiqueta ARTICLE 2.12.7 La etiqueta HR. 2.12.8 Introduccién a la etiqueta BLOCKQUOTE. 2.12.9 Introduccion a la etiqueta CITE... 2.12.10 La etiqueta ASIDE 2.12.11 La etiqueta FOOTER. 2.12.12 La etiqueta ADDRESS... 2.13 Trabajando con etiquetas de listas... 2.13.1 La etiqueta UL - Lista desordenada .. 2.13.2 La etiqueta OL Lista Ordenada ... Capitulo 3 Formateando un texto web .... 103 105 107 110 112 115 118 3.1 Formato basico de un texto .. 3.1.1 La implementacién de cabeceras con la etiqueta Hn 3.1.2 Laetiqueta de parrafo P 3.1.3 Laetiqueta de cambio de linea BR . 3.1.4 La etiqueta de preformato de texto PRE .. 3.2 La seméntica de los textos ... 3.2.1 La etiqueta SPAN. 118 3.2.2 La etiqueta EM....... 120 3.23. La etiqueta STRONG. 122 3.24 Laetiqueta B. 123 3.25 Laetiqueta 123 3.2.6 La etiqueta SMALL... 124 3.2.7 Laetiqueta CITE 124 3.2.8 LaetiquetaQ 125 3.29 La etiqueta

.. 125 3.2.10 Laetiqueta DEN 127 3.2.11 La etiqueta ABBR.... 127 3.2.12 La etiqueta TIME -130 3.2.13. La etiqueta CODE... 133 3.2.14 La etiqueta FIGURE y FIGCAPTION. 135 3.2.15. La etiqueta VAR. .138 3.2.16 La etiqueta SAMI 138 3.2.17 La etiqueta KBD...... 1383.2.18 La etiqueta SUP. 3.2.19 La etiqueta SUI 3.2.20 La etiqueta MARK .. 3.3. Usando caracteres especiales .. 141 141 143 146 Capitulo 4 149 152 153 153 154 Enlaces y navegacion 4.1. Estructura de la URL 42 Enlaces basicos 4.2.1 Enlazando a otra pagina web. 4.2.2 Enlazando a un e-mail. 43 Tipos de URL... 156 4.3.1. URL absoluta. .156 4.3.2. URL relativa .156 44 Laetiqueta BASI 45 Atributos de la etiqueta A... 46 Implementacién de enlaces por ancla: .157 .160 176 Capitulo 5 Imagenes, audio y video 5.1 Seleccionando de manera correcta las imagenes .. 185 5.1.1 Imagenes GIF 187 5.1.2. Imagenes JPG. 187 5.1.3 Cémo podemos encontrar imagenes de alta calidad en el buscador Google........188 5.1.4 Imagenes PNG . 190 5.2 Agregando imagenes con la etiqueta IMG 191 5.2.1 Atributo SR -192 5.2.2. Atributo AL .193 5.2.3. Atributo HEIGHT y WIDTH. Defi 193, 5.3. Usando imagenes como enlaces .. 193 5.3.1 Definicién de mapas 196 5.3.2 Laetiqueta MAP weno .197 5.3.3. Asociacién entre la imagen y los mapas e099 5.4 Agregando videos de YouTube 201 5.4.1 Cémo se insertan los parametros de Youtube 202 5.5 Agregando audio y video con HTMLS 205 5.5.1 La etiqueta VIDEO 205 5.5.2 Laetiqueta AUDIO .210 5.5.3 Laetiqueta OBJECT. 211 5.5.4 Laetiqueta PARAM .. 212 ién de alto y ancho de una imagenCapitulo 6 Manejo de tablas para la web 221 6.1 Introduccién a las Tablas Web .. 223 6.2. Elementos basicos y atributos de una tabla .. 225 63 Laetiqueta TABLE .... .226 64 Etiqueta TR .... 234 65 Etiqueta TD y TH . .237 6.6 Atributo ROWSPAN .... 239 6.7 Atributo COLSPAN 240 68 Atributo HEADERS 241 6.9 Atributo SCOPE ... 242 6.10. Dividir la tabla en HEAD, BODY y FOOT .. 6.11 Agrupando columnas — Etiqueta COLGROUP 6.12 La etiqueta CAPTION 243 245 247 Capitulo 7 Manejo de formularios para la web 7a 72 253 Introduccién a los formularios web 255 7.1.1 Formulario de contacto .. 255 7.1.2 Formulario de encuesta de satisfaccién.. 255 7.1.3 Formulario de solicitud de empleo o registro de datos. 256 7.1.4 Formulario de reserva 256 Creando un formulario — etiqueta FORM ... .258 7.2.1 Atributo ACTION... .258 7.2.2. Atributo METHOD. .259 7.23. Atributo ID... 7.2.4 Atributo NAME 7.25. Atributo ENCTYPE..... 7.2.6 Atributo ACCEPT-CHARSET. 7.2.7 Atributo NOVALIDATE 7.28 Atributo TARGET...... 7.29 Atributo AUTOCOMPLETE... 73 7.3.1 Etiqueta LABEL. 260 261 261 262 263 263 264 264 264 Control de textos para formula 7.3.2. Cuadro de texto simpl 266 7.3.3. Cuadro de texto multiple. .270 7.3.4 Cuadro de password. 271 7.35, Entrada de teléfono .272 7.3.6 Entrada de correo electrénico... sents 272 7.3.7. Entrada de COlOM ..coesee sosesenensesein TB 7.3.8 Entrada de fech 2747.3.9 Etiqueta NUMBER. 7.3.10 Etiqueta URL... 277 7.3.11 Etiqueta RANGE cscs 278 7.4 Control de botones para formularios 279 275 7.4.1 Usando imagenes para botones... 282 7.4.2 Etiqueta Output 283 7.5. Control de cuadros de chequeo .. 283 7.6 Control de botones de radio 7.7 Control de cuadro combinado 78 Control de cuadro de lista 7.9 Etiqueta DATALIST 7.10 Control de archivos 7.11 Control de datos ocultos 285 .286 287 291 .293 Capitulo 8 Hojas de Estilos en Cascada CSS3 8.1 Breve historia de CSS 8.2. Soporte de CSS3 en los navegadores 83. Especificacién oficial .. 8.4 Cémo se compone un estilo CSS3 .. 8.5. Funcionamiento basico de CSS3 .... 295 2297 .298 .299 .299 8.6 Cémo incluir CSS en un documento HTML 300 8.6.1 Estilo aplicado a una etiqueta HTML .. 301 8.6.2 Estilo a nivel de pagina .. 301 8.6.3 Estilo externo al documento HTML 302 8.6.4 Estilo importado al documento HTML 303 87 Los medios aplicados con CSS .. 88 Los comentarios en CSS 8.9 Sintaxis que define una propiedad en CSS 8.10 Selectores basicos 8.10.1 Selector universal 305 306 306 8.10.2 Selector de etiqueta.. 307 8.10.3. Selector de descendenci 309 8.10.4 Selector de clase «ese 310 8.10.5 Selector de identificacién. 311 8.11 Selectores avanzados ... 311 8.11.1 Selector hijo. 311 811.2 Selector adyacente. 312 8.12 Agrupacién de reglas CSS 313 8.13 Anchura y altura 314 8.13.1. Unidades relativas.. 314 8.13.2. Unidades absolutas... 3158.14 Recomendaciones para el uso de medidas 317 8.15 Mérgenes y rellenos..rnsnseste - .317 8.15.1 Elementos de BIOQUE ....rssemurneneninneneninenennnanentnnenennenenneee STD 8.15.2 Elementos de linea. 318 8.16 Bordes 318 8.16.1 Ancho de borde «...cuscsiensiennsnnientnnsnennnnanennnnnienninanennnnseneniesen S18 8.16.2 Color de borde...... = z 319 8.16.3 Estilo de borde 319 8.17 Fondos. 320 8.17.1 Backgroudn-color. 320 8.17.2. Background-image 321 8.17.3 Background-repeat 321 8.18 Posicionamiento CSS 322 8.19 Tipos de elementos. 323 8.20 Posicionamiento.. 323 8.20.1 Posicionamiento normal.. 324 8.20.2 Posicionamiento relativo 324 8.20.3 Posicionamiento absoluto. 325 8.20.4 Posicionamiento fijo 326 820.5 Posicionamiento flotante. 326 8.21 Casos desarrollados 327 Capitulo 9 337 339 339 340 341 342 345 345 345 Estilos para selectores.. 9.1 Tipografia 9.1.1 Propiedad Font-Family 9.1.2. Propiedad Font-Size. 9.1.3. Propiedad Color. 9.1.4 Propiedad Font-weight .. 9.2 Vinculos basicos .. 93 Pseudo-clases 9.4 Aplicando decoracién al vinculo 4.4.1 Asignar un color a los diferentes estados de un vinculo 9.4.2 Asignar propiedades al vinculo por identificador 9.5. Vinculos avanzados-implementacién de un ment de opciones de forma vertical 348 9.6 Implementacién de un mend de opciones de forma horizontal 350 350 351 9.7 CSS para imagenes .. 9.7.1. Establecer la anchura y altura de las imagenes... 9.7.2. Establecer imagenes con posicionamiento flotante 9.7.3. Establecer un borde o marco a una imagen 351 9.7.4 Asignar sombra a la imagen... 352 9.7.5. Agrupar dos o més imagenes en una misma etiqueta. 353 9.7.6 Efectos especiales de la imABeN....nennnnenee 354dice Hasta hace unos afios atrés el disefio web dependia completamente de Adobe, debido a la aplicacién Flash que permitia implementar sitios web completos y con un alto nivel de profesionalismo. Pero como todo tiene un inicio y un fin, el uso de Flash se dejé de lado cuando los dispositivos méviles permitieron el acceso a las paginas web y estas no se mostraban amigables con dichos dispositivos. Debido a ello, la misma empresa Adobe manifesté que ya no continuaria con el desarrollo de Flash. Es aqui justamente donde ingresa el HTMLS, que suple casi todas las necesidades de los disefiadores web y, lo mas importante, es absolutamente compatible con todos los dispositivos que permitan ver un documento web. HTMLS es la tecnologia del futuro que permitiré modernizar la web. Ha provisto de muchas funciones que suplen fécilmente a Flash, y lo més importante es que no requiere la instalacién de ningun plugin para ser usado, ya que es compatible con la mayoria de dispositivos. Con respecto a los desarrolladores web, estos podrian experimentar cambios en el navegador, ya que HTMLS provee nuevas funciones. Asimismo, estas funciones hacen que “la cultura HTML” sea mucho més ordenada en comparacién con su predecesor. Es asi que la W3C, la cual define estandares técnicos y directrices, sigue trabajando en HTMLS para poder elaborar un nuevo esténdar que sea compatible con cualquier navegador web; para ello agrega incluso funciones tactiles a su lenguaje. ‘También debemos considerar que para realizar un trabajo profesional en la web, HTMLS no trabaja solo: necesita de otras tecnologias de apoyo, como JavaScript, JQuery, CSS3, etc., juntos alcanzan un desarrollo eficaz en el disefio web. En este libro se ha planteado el objetivo principal de conocer todos los elementos que componen al HTMLS y al CSS3, que son las herramientas fundamentales para el disefio de la interfaz. Por todo lo mencionado anteriormente, podemos decir que en poco tiempo HTMLS serd considerado como el tinico lenguaje de programacién que permitiré implementar webs répidas y ligeras, lo cual es importante para los dispositivos méviles. Esto es posible gracias a sus nuevas etiquetas. ‘Ademiés, se podré navegar por un documento que no necesariamente esté registrado en un servidor web, y podrd ser trabajado localmente, es decir, de manera offline. Hay muchas funciones que se seguirén implementando para HTMLS, las cuales debemos tomar en cuenta para obtener un buen desempefio en la elaboracién de sitios web. La importancia de un libro como este radica en que se propone instruir de manera sencilla, pero rigurosa, el modo de implementar paginas web profesionales mediante HTMLS y CSS3. Por ello el puiblico al que va dirigido esté conformado por personas que s in en el disefio de paginas web, estudiantes de informatica y publico en general. Asimismo, encontraran que el libro se divide en nueve capitulos, en los cuales se expondran los conceptos bisicos del disefio web, y también se presentardn algunos casos desarrollados que ilustraran cada uno de los procesos.Introduccié6n al disefio web con HTML5 y CSS3Hoy en dia, la Internet se ha vuelto un elemento muy importante de nuestras vidas. éSe ha puesto a pensar cémo era su vida cotidiana antes de que se generalizara el uso de Internet? Recuerde que no teniamos redes sociales, usdbamos la linea telefénica para formar una red; ni teniamos videos de YouTube, comprébamos CD, DVD y, si somos personas de mas experiencia, podriamos hablar de videos en VHS. Tampoco tenfamos televisidn digital en linea; nosotros hemos visto videos en television de blanco y negro. incluso si solo tomamos en cuenta el concepto de escuchar musica en cualquier lugar donde nos encontremos, nos daremos cuenta de que hacemos las mismas actividades que antes, pero ahora usamos elementos muchos mas modernos y répidos. Por ejemplo, las paginas web, que también cambiaron su concepto inicial, que era el de informar solamente por medio de textos e imagenes, para convertirse en un medio importante tanto en nuestra vida personal como laboral. Dentro del grupo de personas que influyeron en esta tendencia estuvo Tim Berners-Lee, que introdujo la idea del HTML, en 1989. Su idea surgié debido a las deficiencias que presentaba la bisqueda de informacién en la Internet y debido, también, a la necesidad humana de mejorar lo que se tiene. Berners-Lee propuso dos tecnologias para mejorar la experiencia en la web: el HTTP y el HTML. Si analizamos el concepto de HTTP veremos que guarda relacién con la necesidad de transferir informacién decualquiertipo porlaweb.Sunombre proviene de las iniciales de HyperText Transfer Protocol. El HTTP es un protocolo de transferencia usado para las computadoras que son servidores web; estas reciben una peticién de usuario, como, por ejemplo, visualizar una determinada pagina web. Notaremos que siempre inicia con “http://", Fig. 1.1 Tim Berners-Lee Fuente: lo cual hace referencia al protocolo que se usard cuando se realice la peticién al servidor web, con lo que se convertiré y mostraré un documento HTML en el navegador web del usuario, ya sea Internet Explorer, Google Chrome, Mozilla Firefox, etc. La segunda tecnologia propuesta fue el HTML, que representa un lenguaje de marcado basado en etiquetas. Su principal labor es indicarle al navegador web cémo debe mostrar el documento web solicitado por un determinado usuario. HTML abrié el camino a lo que hoy conocemos como navegar por la web, pues contiene etiquetas que permiten configurar una navegacién fluida entre muchos documentos web que se encuentran en la red. La unién de las dos tecnologias mencionadas hace que la experiencia de usar Internet sea répida y sencilla, lo que hace que el usuario navegue lo mas cémodamente posible. Tim Berners-Lee fund6 el W3C (llamado as/ por las iniciales del Consorcio World Wide Web), que instruyé a los usuarios de todo el mundo en el el uso del HTML. Ofrecié 4 versiones iniciales y un nuevo esténdar, llamado HTMLS, el cual permitiré revolucionar la experiencia web en el planeta. Este libro est preparado para explicar los nuevos lineamientos que presenta HTMLS, ademés contiene guias practicas que han sido desarrolladas paso a paso tomando en cuenta las aplicaciones estdndar y de mayor demanda entre los disefiadores web.BE Las versiones pe. HTML) Se puede decir que HTMLS surge de la iniciativa que tuvo la empresa IBM, que propuso su lenguaje web llamado GML (Generalized Markup Language), en espafiol: Lenguaje Generalizado de Marcado. Este definfa cémo debian comportarse los lenguajes de marcado, pero no proponia el uso de etiquetas, yes as{ como empieza a desarrollarse HTML. A continuacién, presentamos algunas versiones del HTML de acuerdo a su afio de aparicién: 1995 ‘Se formaliza el HTML 2.0, y con ello la sintaxis y la mayoria de las reglas que se encuentran ‘actualmente implementadas. 1997 HTML 3.2 fue ignorado durante mucho tiempo por las empresas que provelan navegadores, debido a que ellas implementaban sus propias etiquetas. 1998 Bajo la presion de la adopcion de los estandares web, se otorga peso a las recomendaciones del WSC y se promocionan navegadores basados en dichos esténdares. 1999 ‘Se estabilza la sintaxis y la estructura del HTML 4.0, el cual se convierte en el modelo estandar para la web. 2000 Nace el XHTML 1.0, disefiado para adaptar el HTML a XML. Uso de DTD para renderizar como HTM, 2000-2004 _Elincremento de las conexiones en el ancho de banda es alto, lo que produce una demanda fen el campo del desarrollo de aplicaciones y multimedias, donde tecnologias como Flash y Ajax obligaban a trabajar en la especificacion XHTML 2.0. 2004 No satisfechos con la direction de XHTML, Apple, Mozilla y Opera proponen evolucionar et festéndar HTML 4.0. Aunque son rechazados, forman el WHATWG (Web Hypertext Application Technology Working Group). 2008 ‘Se publica el borrador de trabajo Web Applications 1.0 2007 EI WAC adopta el trabajo de WHATWG en un nuevo capitulo, y publican lo que sera el borrador e trabajo de HTML. 2009 {tuma tamada expedida para el proyecto de trabajo de HTMLS. E1 WSC no renueva XTML 2.0 2010 Este ato se presenta el primer borrador HTMLS y se prevé un alcance total para el 2022. 638 Los NAVEGADORES Y SUS DIFERENCIAS Empezaremos por explicar el porqué del término “navegador”. Intentemos ubicarnos imaginariamente en el espacio marino. Sabemos, por légica, que en él podemos desplazarnos mediante un barco o un bote. Si nos ubicamos en algo més cercano a nosotros, como una autopista, nos daremos cuenta de que, en ese entorno, nada mejor que un automévil para desplazarnos. Sucede algo parecido en la Internet, porque es como una autopista de informacién por la que debemos desplazarnos de la mejor manera posible. De alli proviene el término navegador: cuando estemos en busca de informacién, emplearemos uno para “navegar” por las distintas paginas web. Aprovecharemos para mencionar el navegador més veloz del mundo llamado Earthrace, cuyo disefio es un ejemplo eficiente del uso de tecnologias amigables para el medio ambiente y el uso de biocombustibles, tales como el biodiesel. Sus motores fueron disefiados para mantener bajas emisiones de gas, e incluyen caracteristicas tales como pintura no t6xica para el medio ambiente y un disefio eficiente en el casco.Fig. 1.2 Earthrace Fuente: < http://inhabitat.com/earthrace-boat-travels-around-the- worl: in-60-days/> Fue construido para romper el record de circunnavegacién del globo terraqueo usando solo combustibles renovables, el record actual es de 74 dias, 20 horas y 58 minutos, impuesto por el barco briténico “Cable & Wireless” en 1998. La Internet es una red de redes que comparte gran cantidad de contenidos, es por este motivo que necesitamos un buen navegador. Seguramente usted ha usado muchos navegadores web y, al final, ha elegido uno 0 quizés dos; por ejemplo, nosotros optamos por usar el Google Chrome o Mozilla Firefox solo por cuestiones de comodidad. Desde este punto de vista, debemos agradecer a las empresas que se dedican a desarrollar navegadores (como Microsoft 0 Google) porque nos brindan facilidades para utilizar la Internet. ‘Veamos a continuacién una imagen que muestra cudles son los navegadores mas usados; le invitamos a visitar la URL http://gs.statcountercom, donde podré apreciar la estadistica global entre los navegadores mas usados. + Global Stats| stat Browser (Deeitop, Ta. Region: Weta 1) Penos: Ape 2013 0 pe 2014 ea) Fig. 1.3 Estadistica global entre los navegadores més usados Fuente: DISENO WEB CON HTMLS Y CSS3 Los navegadores més usados, como Chrome o Firefox, no estén fuera de nuestro alcance; hoy en dia existen sitios web en los que se pueden descargar sus versiones mas actualizadas. Si_nos preguntamos qué atributos o caracteristicas deben presentar los navegadores web, hay mucho por considerar. Le ayudaremos mostrando cudles son algunas de las caracteristicas importantes, como: Fig. 1.4 Google Chrome versus Mozilla Firefox Fuente: < 1.2.4 [Tiempo de carga] Cuando un navegador muestra rapidez en la entrega de su informacién, aumenta la satisfaccién del usuario y mejora la Chrome suele ser mas El tiempo de carga de IE tiene un tiempo de carga calidad general de 'Pido, con un tiempo de Firefox es de 6.395 de6.392enla version E10; la web. No debemos _°"92€ 6.006 segundos segundos. las versiones anteriores cea a leone eran demasiago tentas. que este factor no solo es tarea del navegador, sino también del tipo de computadora, de la velocidad de su proveedor de Internet, etc. Sin embargo, aun asi podemos distinguir diferencias entre los navegadores. Gooste CHROME erence east En el siguiente cuadro se pueden observar los tiempos de renderizacién: Tiempos de renderizaci6én Opere at safaris Google Chrome 12, | Internet Explorer 9 Firefox | Fig. 1.5 Velocidad de carga entre los navegadores web Fuente: 122 [Entorno de trabajo Se puede decir que estamos acostumbrados al entorno que nos ofrece Microsoft en todas sus aplicaciones, pero los navegadores han propuesto algunos cambios que los hacen atractivos para el usuario, tal como se puede observar en el siguiente cuadro:eerettenens erence easy Chrome cuenta con una interfaz Firefox muestra una barra de IE no ha cambiado mucho muy simple yligera. Cuando se abre direcciones que registra todas las desde sus versiones tna pestafia, se muestra la pagina aplicaciones de uso frecuente, Cuenta anteriores, pero hoy en de inicio del navegador y, a la vez, con un menii de opciones que permite dia ya no presenta barra las miniaturas de los 9 ultimos administrar el texto mostrado; permite, de herramientas ni mend sitios web. También presenta una por ejemplo, seleccionar para arrastrar, visible de opciones. barra de direcciones que permite 0 copiarlo. Cuenta también con un autocompletar texlo y sugiere la cuadro combinado que muestra una busqueda de paginas populares, _lista predeterminada de sitios web, 1.23 [Ventanas emorgentes] Seguramente alguna [ctf Taatet ls Died Cassie vez, cuando navegaba por Internet, le aparecié una ventana pequefia. Estas son las ventanas emergentes Chrome, mediante la Fitefox tiene, por defecto, IE muestra todas las opcion “Herramientas’, inhabiltadas las ventanas ventanas _emergentes © pop-ups, y pueden oiege inhabilitar las emergentes, pero esto posibles en la version ser administradas por ventanas emergentes. puede ser modificado E10; no obstante, se los navegadores de las desde su mend de puede modificar esta siguientes maneras: opciones. ‘accion mediante sus. Herramientas" BEM HTMLS v sus novepanes | HTMLS es la quinta versién del lenguaje HTML; principalmente, representa la | [MIL forma en que se mostraré la informacion en el navegador de Internet y determina la manera en la que los usuarios podran interactuar con ella. Ha sido desarrollado Por lan Hickson, representante de Google Inc., y David Hyatt, de la no menos conocida Apple Inc. HTMLS es el resultado de agrupar las especificaciones (entiéndase por especificacién un lenguaje probado y usado) relacionadas al desarrollo web, como: | Segun S. Ezerzer, HTML, 0 Lenguaje de Marcado de Hipertexto, es el lenguaje madre ¥y basico de todos los sitios web. Su funcién principal es dar formato, especialmente a los textos que forman parte de un dacumento web, todo esto basado en un conjunto de ‘etiquetas con funciones especificas E! HTML contribuye al aspecto de los textos, lo cual hace mas llamativo a un documento ‘web y, ademas, muestra contenides como videos, sonido o imagenes. Por otra pa tiene la capacidad de interactuar con variables 0 bases de datos, como lo hace realmente tun Lenguaje de Programacion. ‘Aun los sitios web con contenidos complejos (por ejemplo, sistemas de desarrollo, que ‘mangjan bases de datos y contenidos dinamicos promovides por lenguajes de programacion ‘web como PHP 0 ASP), envian al navegador web un cédigo HTML puro (Ezerzer, 2012),XHTML es también conocid como la extension de! HTML inicial, pues presenta nuevas caracteristicas en el lenguaje, como la adaptacién al lenguaje XML, el cual es muy usado or desarrolladores en la actualidad. DOM es el Modelo de Objetos de! Documento, también llamado Modelo en Objetos para la Representacién de Documentos. Se podria definir como una estructura lagica de los documentos web, porque permitira administra los datos u objetos que componen un documento web, pom Eguiluz (2013) sostiene que “CSS es el mecanismo que nos permiti~a separar los ontenidos definidos mediante el lenguaje XHTML y el aspecto visual que deben presentar esos contenidos”. Contenidos + ——> | xm | | css. Presentacién (Contenidos) (Presentacién) HTML Veamos, a continuacién, una pagina web realizada completamente en HTMLS: helping children to fate] , donate no Farwy rogem Latest news Fig. 1.6 Modelo web con HTMLS Fuente: < http://wwu.free-htmiS-templates.net/charity-centre-free-htmiS-css3-template/>Analizaremos algunos cambios notables que presenta HTMLS con respecto a las versiones anteriores: HTML5 presenta etiquetas nuevas y usa algunas provenientes de sus versiones anteriores, que nos permiten tener una mejor distribucién del documento web, mucho mas ordenado para el disefiador, y con mayor rapidez para el navegador. Con ello se ‘consigue un aumento en el dinamismo de la pagina web. HTMLS no promueve el cambio total de las etiquetas sino, mas bien, implementa nuevas. Asi, deja obsoletas solo algunas etiquetas HTML4 Battle aed es Con respecto a su A Pet

estructura Perreau