ÍNDICE

Presentación…………………………………………………………………… pág.3

Introducción……………………………………………….…………………… pág.5

¿Cómo optimizar una página web?.......................................................... pág.6-9

¿Qué función delegan los botones de los navegadores web?................. pág.10

¿Cuál es la utilidad de los pop up?........................................................... pág.10

¿Cuál es la utilidad de las ventanas emergentes?................................... pág.11

¿Cuál es la importancia del navegador en las páginas de internet?........ pág.11

Funcionalidad de las animaciones en una página de

internet……………………………………………...………………………….. pág.11

Conclusión………………………………………………..……………………. pág.13

Bibliografía……………………………………………………………………………………………………… pág.15

Politécnico Salesiano Sagrado Corazón de Jesús

Estudiante: Gladys Samarie Álvarez Ortíz

Curso: 4to Técnico en Informática

Número: 1

Módulo: Diseño de Página Web

Tema: Interacción web para crear una página

Profesor: Ing. Luís De Jesús Martínez

Mao, Viernes 17 de Abril del 2015.-

INTRODUCCIÓN

El contenido de este presente documento informa sobre diferentes temas que se utilizan al momento de la creación de una página web, entre ellos: optimización

web, hablando de lo que es y presentando pasos para realizar una buena

optimización; contiene información acerca de los botones de los navegadores

web, como por ejemplo, sus funciones; se habla de lo que son los Pop Up y de

las ventanas emergentes, también se puede hallar información acerca de la

diferencia de estas 2 ya que son bastante parecidas; de la importancia de los

navegadores en las páginas web y de las animaciones en una página de internet.

¿Cómo optimizar una página web?

Optimizar es planificar lo que se hará para obtener buenos resultados, en este

caso es cómo hacer que las páginas estén en un buen posicionamiento para así

poder tener mayor número de visitantes, es como decir, poner la página más veloz, más activa.

Ya teniendo claro lo que es optimizar, se necesitan una serie de medidas para

obtener este resultado, entre ellas:

Declarar el DocType: de esta manera el buscador interpreta de manera

correcta los códigos de la página, de lo contrario se seguirá visualizando

de manera correcta en el navegador pero se hará difícil la optimización

porque no asegura que el código se interprete bien para cada uno de los

usuarios.

Nota: si utilizan el editor Adobe Dreamweaver no tendrán esta preocupación ya

que dicho editor agrega el DocType de manera automática.

No estilizar dentro de las etiquetas: esto indica separar el estilo de los

documentos y su estructura. No se debe aplicar un estilo dentro de una

etiqueta.

Es incorrecto hacer lo siguiente:

<p style:=”color: black; font-family:Arial;”>Texto de ejemplo</p>

Lo correcto sería:

Declarar en la hoja de estilo externa:

estilo1{

color:Pink; font-family:Broadway;

}

Y luego, en su HTML:

<p class=”estilo1″>Texto de ejemplo</p>

CCS al principio, y Java script o cualquier otro programa al final:

Siempre se recomienda cargar las hojas de estilo en CCS al inicio entre las

etiquetas < head > y < /head >. De esta manera la carga de la página es más

rápida y que los estilos se carguen al mismo tiempo que el contenido y no después.

En otro sentido, las librerías de Java script es totalmente diferente, estas se

incluyen al final del documento para que se carguen después de que contenido

se visualice en la pantalla. De esta manera se puede navegar en la página aún

sin que todo el documento esté descargado.

Estilizar para cada navegador: este es uno de los pasos más

importantes, por ello, no se debe de ninguna manera, pasar por alto.

Al haber tantos navegadores diferentes, se debe estilizar para cada uno de ellos o por lo menos para los más importantes ya que en cada uno se visualiza de

manera distinta.

En el caso del Internet explore que es un caso especial porque casi no reconoce

casi todos los estilos, se debe agregar el siguiente código:

<!– [if lte IE 7]>

<link rel=”stylesheet” media=”screen” type=”text/css” href=”estiloie7.css”> <!– [endif]–>

De esta manera si el navegador es de IE, se reconocerá.

Cargar todo lo que se pueda localmente:

En este caso se recomienda que las librerías y hojas de estilo se introduzcan en el mismo servidor que la página, para que de esta forma se cargue todo

localmente y con mayor rapidez.

Agregar descripciones a las imágenes:

Esto es importante ya que facilita los efectos de acceso a cada página y la

validación del código. Con esto no se deja dicho que la página no se cargará ni

funcionará de manera correcta, pero siempre se requiere hacer las cosas de la mejor manera posible.

Ejemplo:

<img src=”imagen.jpg” alt=”Mi imagen ”>

Cerrar cada etiqueta:

Es muy útil porque aunque el navegador puede obviar esta parte, si se hace de

la manera correcta y organizada, es posible realizar las ediciones de códigos

más fácilmente y de esta forma el sitio validará de mejor manera.

Ejemplo:

<p> Un texto </p>

Utilizar PNG y el entrelazado por JPG:

Es importante saber que aunque JPG es un formato bueno para las imágenes y

el más utilizado, no es tan conveniente ya que si la imagen se guarda y vuelve y

se reutiliza, va perdiendo calidad y al final no se verá de la manera en que se ve la original. Por esto es recomendable utilizar el formato PNG ya que es mejor

que el anterior y no pierde si calidad por más arreglos que se le agreguen.

También no se puede olvidar el guardar la imagen con entrelazado, que no es

más que guardarla de manera distinta ya que este le agrega características a la

imagen al realizar dicho guardado. Cabe recalcar que el entrelazado hace que

las imágenes del sitio se carguen por capas y no verticalmente como lo hacen

de forma convencional, dejando así que las imágenes se puedan ir visualizando

mientras el contenido termine de cargar.

Usar tablas para los datos:

Esto se refiere a que se utilice bloques (o div’s) para el diseño de la estructura

en lugar de tablas ya que con este método es posible un mayor grado de

ubicación de los componentes y un orden ideal. Por otro lado, aunque sea un

poco más complejo que las tablas, es lo que las páginas actuales están

utilizando, dejándole a las tablas los datos que se van a introducir.

Validar:

Cuando se va a validar un sitio web se refiere a inspeccionar que todo este correctamente codificado y de esta manera se asegura que el navegador vea lo

que se quiere mostrar.

Para realizar la validación se puede utilizar el validador oficial de la W3C, el

cual al introducir la URL del sitio, presenta un informe de cualquier problema que

exista.

¿Qué función delegan los botones de los navegadores web?

Estos facilitan la navegación del usuario en la nube, de manera más rápida y sencilla, también facilitan la información anteriormente vista o visitada en caso de que requiera su uso.

Entre ellos se pueden destacar:

Los botones adelante y atrás: que retroceden a la página visitada anteriormente y la visitada posteriormente.

El botón detener: este detiene la carga de la página en caso de no querer que siga el proceso.

El botón inicio: este muestra la página que el navegador presenta cuando se abre por primera vez, es la que Microsoft trae por defecto pero se puede cambiar cualquier otra página de internet, todo depende de lo que el usuario desee.

El botón buscar: muestra el motor de búsqueda que utilizó por última vez desde esa ventana.

El botón historia: este se encarga de guardar o recopilar todas las páginas que se visitaron con anterioridad, incluyendo las páginas visitadas hace mucho tiempo atrás.

Entre un sin número de botones más…

¿Cuál es la utilidad de los pop up?

Para introducir se debe de saber lo que son los pop up: estos no son más que

ventanas que se abren sin autorización del usuario. Mayormente estas ventanas

son utilizadas con el fin de mostrar un anuncio publicitario intrusamente.

Estas ventanas se abren por encima de la ventana que se está visitando,

bloqueando así su tranquila navegación.

¿Cuál es la utilidad de las ventanas emergentes?

Las ventanas emergentes en términos llanos, se puede decir que son

exactamente lo mismo que los pop up: ventanas que se abren sin autorización

del usuario, y que por ende su utilidad es la misma. Lo único que se podría

recalcar o destacar es que las ventanas emergentes a diferencia de los pop up

es que estas abren una ventana nueva aparte de la que está en uso, haciendo así que el usuario tenga que ingresar a la información desde otra ventana y quizá

confundiéndolo al no saber a cuál ventana ingresó.

¿Cuál es la importancia del navegador en las páginas de internet?

Estos son los que permiten que las páginas de internet sean visualizadas por el usuario, mediante una comunicación con el servidor por medio del protocolo

HTTP y pide archivos solicitados en código HTML. Luego los interpreta y es así

como los usuarios pueden visualizar las páginas.

Funcionalidad de las animaciones en una página de internet

Las animaciones son aquellos efectos que se muestran en una página web. Sirven para embellecer las páginas y llamar la atención del usuario. Suelen

utilizarse para publicidad, banners, detalles de diseño, botones animados,

efectos, ya que el usuario observa con más facilidad, lo que está en movimiento.

CONCLUSIÓN

Para finalizar es importante hacer una síntesis y exponer que el contenido de

cómo optimizar una página de internet es de suma importancia para las personas

que están realizando su propio sitio, ya que facilita la navegación rápida del

usuario a través de una serie de pasos; la función que delegan los botones de los navegadores web son esenciales para la navegación del usuario ya que se

la facilita; que los Pop Up al igual que las ventanas emergentes, son ventanas

intrusas que se presentan en la pantalla del usuario con fines publicitarios;

también se pudo notar que sin la utilidad de los navegadores, las páginas de

internet no pueden visualizarse y por último pero no menos importantes: que las animaciones son aquellos efectos que se muestran en una página web y que

Sirven para embellecer las páginas y llamar la atención del usuario.

BIBLIOGRAFÍA

http://www.comolohago.cl/como-optimizar-tu-sitio-web-en-10-pasos/

http://www.jegsworks.com/Lessons-sp/web/basics/toolbar-allparts.htm

http://es.wikipedia.org/wiki/Ventana_emergente

http://es.wikipedia.org/wiki/Navegador_web

http://www.alegsa.com.ar/Dic/animacion%20web.php

http://www.xn--guiadiseo-s6a.com/08_cont_animaciones.php