Página Web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Página Web por Mind Map: Página Web

1. Documento de la www accesible desde los navegadores web

2. Componentes

3. Estructura

4. Diseño y Presentación

4.1. Utilizados para mejorar la percepción visual. Son los elementos necesarios para lograr comunicarnos eficazmente con el usuario. Se debe cuidar no ser muy escuetos en su uso pero tampoco saturar el sitio con elementos que distraigan demasiado al usuario. Deben ser acordes al tema del sitio

5. Comportamiento e interactividad

6. Lenguajes estructurales

6.1. Ejemplos

6.1.1. HTML

6.1.1.1. Lenguaje de marcado estándar para la creación de páginas Web

6.1.1.2. Describe la estructura de las páginas utilizando etiquetas (tags) que abren y cierran. Una etiqueta puede abrir y cerrar, pueden abrir y cerrar en la misma etiqueta, por ejemplo <br />

6.1.1.3. Las etiquetas pueden tener atributos para definir información adicional, siempre se colocan en la etiqueta de apertura

6.1.1.4. Etiquetas

6.1.1.4.1. <!DOCTYPE html> Todo documento html debe iniciar con la declaración del tipo

6.1.1.4.2. <html></html> Marcan el inicio y fin del documento

6.1.1.4.3. <head></head> Sirve para definir información del documento

6.1.1.4.4. <title></title> Sirve para definir el título del documento

6.1.1.4.5. <body></body> Sirve para definir el cuerpo (el contenido) del documento

6.1.1.4.6. Ejemplo de estructura: <!DOCTYPE html> <html> <head> <title>Título del documento</title> </head> <body> Contenido del documento </body> </html>

6.1.2. XHTML

6.1.2.1. Es HTML que sigue las reglas del XML

6.1.2.2. Está más estandarizado y por lo tanto todos los navegadores los reconocen

6.1.2.3. Más estricto que el HTML

6.1.3. XML

6.1.3.1. Permite almacenar y transportar datos

6.1.3.2. Su estructura DEBE estar bien formada

6.1.3.3. Es independiente del hardware y software

6.1.3.4. A partir de 1998, Es una recomendación de la W3C

6.1.3.5. A diferencia de HTML y XHTML, no es un lenguaje para desplegar datos

6.1.3.6. No utiliza etiquetas predefinidas

7. Lenguajes de presentación

7.1. Hojas de Estilo en Cascada (CSS)

7.1.1. Tiene tres niveles

7.1.1.1. CSS1

7.1.1.1.1. Ya está obsoleto

7.1.1.2. CSS2

7.1.1.2.1. Actualmente es una recomendación

7.1.1.3. CSS3

7.1.1.3.1. Está por convertirse en estándar

7.1.2. Utilizadas para dar formato, presentación y estilo al documento html

7.1.3. Describen cómo se mostrarán los elementos html

7.1.4. Permiten controlar el diseño del sitio completo desde un solo lugar (la cascada)

7.1.5. Sintaxis: selector {propiedad1:valor1; propiedad2:valor2;}

7.1.6. Se utilizan selectores para acceder y dar estilo a los elementos html. Se pueden utilizar combinados y en variantes

7.1.7. Selectores básicos

7.1.7.1. Selector elemento. Es el nombre del elemento. Se aplica el estilo a todos los elementos de ese tipo, por ejemplo: p {...} - todos los párrafos, div {...}- todos los divs, table - todas las tablas

7.1.7.2. Selector clase. Sólo afecta a los elementos que tengan esa clase, se utiliza de la forma .nombreClase, por ejemplo: .titulo {...} - afectará a todos los elementos con clase titulo (<div class=”titulo otrasPosiblesClases”></div>)

7.1.7.3. Selector id. Sólo afecta a los elementos que tengan el id de la cascada, por ejemplo: #nombre {...} - afectará al elemento con id=”nombre” (<input type=”text” id=”nombre” />)

8. Elementos para dar presentación a la página web

8.1. Texto. El usuario generalmente busca información de este tipo, por lo tanto, es el elemento principal

8.2. Imágenes. Muestran información de forma visual. No se debe abusar de su uso

8.3. Audio. Permite agregar sonido a las páginas, el formato más usado por su calidad y peso es el mp3

8.4. Video. Debido a la velocidad que ha ganado el internet, es posible colocar video en los sitios web

8.5. Color. Debe tenerse especial cuidado en la combinación y tonos de los colores, ya que se puede generar una página ilegible

8.6. Tipografía. De ella depende la claridad del contenido

8.7. Íconos. Debe cuidarse que expresen lo que el usuario necesita, deben ser comprensibles para todos

9. Modelo de objetos DOM

9.1. Es una de las técnicas que surgen por la necesidad de acceder y manipular eficientemente documentos XML, y con ello HTML y XHTML

9.2. Convierte la estructura del documento a una estructura en forma de árbol con nodos anidados

9.3. Es independiente del lenguaje de programación

9.4. Permite el dinamismo de la página web

10. Lenguajes de secuencia de comandos. Lenguajes del lado del cliente

10.1. Ejemplos

10.1.1. ECMAScript

10.1.1.1. Lenguaje que formó las bases para JavaScript

10.1.2. JavaScript

10.1.2.1. Lenguaje basado en Java que permite programar el comportamiento de la página web

10.1.3. VBScript

10.1.3.1. Está basado en visualBasic que sólo es funcional para internet explorer a partir de su versión 4

11. Applets

11.1. Miniaplicaciones del lado del cliente que no son independientes, es decir, se ejecutan dentro de otra aplicación mediante plugins

11.2. Tipos

11.2.1. JavaApplets

11.2.1.1. Pequeñas aplicaciones que pueden ser interactivas

11.2.2. Animaciones de flash

11.2.2.1. Animaciones que ocupan poco espacio

11.2.3. Windows Media Player

11.2.3.1. Permite mostrar videos al usuario

12. Referencias. Aranda, J. (2014). Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión. Máquinas Virtuales en navegadores. Miniaplicaciones (Applets). (pp s/n). Recuperado en https://books.google.com.mx/books?id=UD51CQAAQBAJ&printsec=frontcover&hl=es#v=onepage&q&f=false Córcoles, J. & Montero F. (2014). Diseño de interfaces web. Planificación de Interfaces Gráficas. (pp.12-18). Recuperado de la base de datos E-Brary Fernández, C. (2004). Creación de sitios Web mediante estándares. Mayo 18, 2017, de Universidad de Oviedo Sitio web: http://www.w3c.es/gira/paradas/presentaciones/Acebal_EstandaresWeb.pdf López, J. & Otero, M. (2014). Las Herramientas Tecnológicas de la Nueva Información Periodística. Proceso de Diseño de Objetos. Mensajes Hipermedia. (pp.78,79). Recuperado en https://books.google.com.mx/books?id=UD51CQAAQBAJ&printsec=frontcover&hl=es#v=onepage&q&f=false Eguiluz, J. (S/A). Introducción a AJAX. Capítulo 4. DOM (Document Object Model). Mayo 18, 2017, de LIBROSWEB Sitio web: http://librosweb.es/libro/ajax/capitulo_4.html Delgado, H. (S/A). Aprender HTML. Elementos básicos de un sitio Web. Mayo 18, 2017, de akus.net Sitio web: http://disenowebakus.net/elementos-de-un-sitio-web.php Comunidad de Madrid. (S/A). ¿Qué es una página Web? . Mayo 18, 2017, de Comunidad de Madrid Sitio web: http://www.madrid.org/cs/StaticFiles/Emprendedores/GuiaEmprendedor/tema7/F49_7.9_WEB.pdf Programacion.net. (S/A). VBScript. Mayo 18, 2017, de Programacion.net Sitio web: http://programacion.net/articulo/vbscript_54 W3Schools. (S/A). JavaScript Tutorial. Mayo 18, 2017, de W3Schools Sitio web: https://www.w3schools.com/js/js_intro.asp Mozilla Developer Network. (S/A). JavaScript language resources. Mayo 18, 2017, de Mozilla Developer Network Sitio web: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources W3Schools. (S/A). CSS Tutorial. Mayo 18, 2017, de W3Schools Sitio web: https://www.w3schools.com/css/css_intro.asp Mozilla Developer Network. (S/A). CSS. Mayo 18, 2017, de Mozilla Developer Network Sitio web: https://developer.mozilla.org/es/docs/Web/CSS W3Schools. (S/A). HTML and XHTML. Mayo 18, 2017, de W3Schools Sitio web: https://www.w3schools.com/html/html_xhtml.asp W3Schools. (S/A). Introduction to XML. Mayo 18, 2017, de W3Schools Sitio web: https://www.w3schools.com/xml/xml_whatis.asp W3Schools. (S/A). HTML5 Tutorial. Mayo 18, 2017, de W3Schools Sitio web: https://www.w3schools.com/html/default.asp

13. Actividad 1. Esquema de los elementos posibles a usar en una página de la red informática mundial Asignatura. Lenguajes y Estándares para la Red Informática Mundial Alumna. García Velasco Karla Elisa Daniela Profesora. Carmen Rodríguez