interacción web para crear una pagina
DESCRIPTION
ÂTRANSCRIPT
Politécnico Salesiano Sagrado Corazón de Jesús
Nombre:
Engel De Jesús Rodríguez Gómez
Número:
16
Curso:
4to Técnico de Informática
Módulo:
Diseño de Páginas Web
Profesor:
Ing. Luis de Jesús Martínez
Tema:
Interacción web para crear una página
Fecha de entrega:
Viernes 17 de Abril del 2015
ÍNDICE
Introducción………………………………………………………………… Pág. 1
¿Cómo se optimiza una página web? …………...……………………….Pág. 3
¿Qué función delegan los botones de los navegadores web? ……..... Pág. 13
¿Cuál es la utilidad de los Pop Ups o Ventanas emergentes?
...………………………………………………………………………….… Pág. 16
¿Cuál es la importancia del navegador en la página de internet?
……………………................................................................................ Pág. 17
Funcionalidad de las animaciones en una página de internet………... Pág.18
Conclusión…………………………………………………………………. Pág. 19
Bibliografía………………………………………………………………… Pág. 21
Pág. 1
INTRODUCCIÓN
Pág. 2
En este documento se hablará acerca de la interacción web para crear una página
de internet. Se emitirán recomendaciones con el objetivo de lograr optimizar al
máximo el sitio web, esperando que sean seguidas al pie de la letra para lograr
obtener los resultados deseados.
Se explicaran, con imágenes, la funcionalidad de los botones de los navegadores
web y la importancia de los mismos. Se definirá el concepto Pop up o Ventana
emergente; su importancia, su objetivo o finalidad, y su razón de ser.
También se abundarán informaciones acerca de los navegadores web o browsers;
así como su relevancia, el papel que desempeñan, las ventajas de utilizar un buen
navegador web, y las facilidades que ofrecen.
Y por último, se mostrará una breve investigación de la funcionalidad de las
animaciones en una página de internet.
Pág. 3
A continuación se explicaran varias opciones para optimizar una
página web:
1- Declarar el DocType (Tipo de Documento) correcto
Es muy importante realizar la declaración del DocType, ya que por medio de
éste, el navegador interpreta correctamente los códigos que se tiene en cada
página sea HTML o XHTML.
Parecerá a veces innecesario declarar el DocType, porque el navegador en
algunos casos interpreta correctamente el código sin presencia de éste; pero
esto no ocurre siempre y será complejo a la hora de validar.
La gran mayoría de los editores Web agregan el DocType de forma
automática, por lo que no hay que preocuparse. Sin embargo, nosotros lo
podemos añadir de forma manual, siempre al inicio del documento, es decir,
antes de la etiqueta <html>.
2- No estilizar dentro de las etiquetas
Aunque la mayoría de diseñadores web han adoptado y adaptado por la gran
mayoría de diseñadores Web, siempre hay por ahí algún caso que cae en el
error, por lo que es bueno recordarlo.
Pág. 4
Ejemplo de forma correcta:
En una hoja de estilo externa, declarar:
p{
color:blue;
font-family:Arial;
}
O bien, en la misma hoja de estilo externa, declarar:
.estilo1{
color:blue;
font-family:Arial;
}
Y luego, en nuestro HTML:
<p class=”estilo1″>Pagina de Engel</p>
Ejemplo de forma incorrecta:
<p style:=”color: black; 7ont-family:Arial;”>Pagina de Engel</p>
Pág. 5
3- CSS al comienzo. Javascript al final.
Lo recomendable para las hojas de estilo externas en CSS es siempre
cargarlas al inicio del documento, entre las etiquetas <head> y </head>. Esto
nos asegura tanto una carga más rápida de la página propiamente tal, como
asegurar que siempre los estilos se carguen junto al documento y no luego
de que se ha cargado el contenido, ya que si el usuario detiene la carga de
la página, o su conexión se cae, se desplegará el contenido sin ningún estilo
aplicado, entregando una experiencia visual bastante mala.
Ejemplo de forma correcta:
<head>
<title>Sitio Web de Engel</title>
<link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen”>
</head>
Desde otro lado, las librerías en Javascript, al pesar más que muchos
contenidos que pueda tener la página web, es preferible colocarla al final en
los códigos; ya que ésta empezará a cargar luego de haberlo hecho el resto
de la información. Esto es así porque los códigos van cargando en orden, y
al colocarla al final, habrá cargado el resto del contenido.
Pág. 6
Mientras la librería se carga el usuario puede visualizar el resto de la
información.
Un ejemplo sería así:
</div>
<script type=”text/javascript” src=”libreria.js”>
</body>
</html>
La librería se cargara de cualquier forma, pero se le dará una mayor prioridad al
contenido y estilo de la página.
4- Diseñar para cada navegador
Ningún navegador despliega contenidos de páginas web igual que otro;
porque son diseñados por empresas distintas y usan motores diferentes, a
menos que sean estos de mismas empresas.
Debemos de asegurarnos probar nuestros diseños de páginas web en todos,
o por lo menos en la mayoría, o los más visitados navegadores. Aun después
de esto no se puede garantizar la compatibilidad completa entre los
navegadores y la página web, porque debemos definir hojas de estilo para
cada uno de ellos e indicarle al documento que junto con detectar el
navegador, cargue el estilo correspondiente.
Pág. 7
Ejemplo:
<!– [if lte IE 7]>
<link rel=”stylesheet” media=”screen” type=”text/css” href=”estiloie7.css”>
<!– [endif]–>
El código anterior indica que si el navegador es IE 7 o alguna versión inferior,
entonces cargue la hoja de estilo correspondiente. Esto lo definimos con el
parámetro lte, el cual significa less than or equal (menor a o igual a). En caso de
solo querer cubrir versiones anteriores a IE 7, cambiamos el parámetro por lt.
5- En lo posible, cargar todo localmente
Actualmente, con toda la información disponible en Internet, es posible para
los diseñadores y desarrolladores Web contar con un gran número de
librerías de acceso libre y gratuito para utilizar en sus sitios.
Sin embargo, muchas de estas librerías requieren ser cargadas desde sitios
Web de terceros, lo que inevitablemente aumentará el tiempo final de carga
de nuestro sitio y por ende empeorará la experiencia del usuario.
Es por esto, que en lo posible, lo recomendable es tener todas, o el mayor
número posible, de librerías y hojas de estilo en el mismo servidor donde está
el sitio, para que la carga se haga de forma local y mucho más rápida.
Pág. 8
6- Añadir descripciones a las imágenes
Es cierto que aunque no se coloquen las descripciones de las imágenes en
el sitio web, el contenido carga correctamente; pero es mucho mejor
colocarlas, porque, inmediatamente, las personas sabrán que expresan
estas y no tienen que cargar otra página del sitio web para averiguarlo, lo que
evita pérdida de tiempo y ofrece optimización al uso de éste.
También, poniendo la descripción, se permite que personas no videntes
puedan acceder al sitio web y queden satisfechos, ya que los sistemas de
navegación para ciegos explican el contenido, y de no tener la descripción
no hay forma de que explique una imagen más que mencionándola.
Un ejemplo de cómo hacer esto sería:
<img src=”imagen.jpg” alt=”Cualquier imagen de Engel”>
Adicionalmente, hay algunos navegadores que en vez del atributo alt,
reconocen title, por lo que nunca está demás agregar ambos.
7- Siempre cerrar las etiquetas
Los lenguajes de programación de páginas web HTML y XHTML se basan
totalmente en tener una estructura bien definida y organizada. Puede que en
algunas ocasiones los navegadores no tomen en cuenta cuando se cierra
una etiqueta, pero esto nos garantiza una buena organización y buen
Pág. 9
Funcionamiento de ellas; aparte de que si otra persona manipulara los
códigos no se pierda dentro de todas las etiquetas, y sepa cuando comienza
y termina cada una para no ligarlas ni confundirlas.
Ejemplo de forma incorrecta:
<p> Cualquier párrafo de texto
<p> Otro párrafo de texto
<p> Y otro más
Ejemplo de forma correcta:
<p> Cualquier párrafo de texto </p>
<p> Otro párrafo de texto </p>
<p> Y otro más </p>
Con XHTML además, tenemos la posibilidad de cerrar la etiqueta en la misma de
apertura y es considerado una práctica correcta:
Esto es una etiqueta abierta y cerrada
<br /> Saludos Luis
8- Utilizar PNG por sobre JPG, y el entrelazado
El formato más utilizado para tratar imágenes es el JPG, pero esto no implica
que sea el mejor.
Pág. 10
Cuando se utiliza dicho formato ya sea para agrandar, achicar, recortar,
agregarle un filtro o cualquier otra modificación, siempre después de cada
una de éstas, la imagen va perdiendo calidad; y llegará un punto en que
después de haberle realizado una X cantidad de modificaciones, ésta tendrá
una significativa diferencia de menor calidad notable en comparación con la
original.
Esto no sucede cuando implementamos una imagen PNG. Este formato se
encarga de mantener la calidad a medida que se realicen modificaciones en
la imagen, garantizándole al usuario no perder la calidad a raíz de editar la
imagen. Por esa razón se recomienda el uso de las imágenes PNG, y más
aún si las imágenes son el principal recurso del sitio web.
Al utilizar PNG existe una técnica bastante buena para cargar las imágenes
en el sitio web. Ésta es guardar las imágenes con entrelazado. El
entrelazado añade características a la imagen para que ésta se cargue de
forma distinta a que si se guardara convencionalmente.
Ejemplo:
Si tenemos una imagen sin entrelazado y la insertamos en un documento
Web, la carga de ésta se realizará de forma vertical, de arriba hacia abajo.
Pág. 11
Entonces, si la conexión es lenta, o la imagen muy grande, se irá viendo
cómo se carga, trozo por trozo, de arriba hacia abajo.
Por otra parte, con el entrelazado, la modalidad de carga cambia, y en vez
de realizarse de forma vertical como el caso anterior, esta se va realizando
por capas, desde el fondo hasta el frente de la imagen, cargando en una
primera etapa la imagen completa, viéndose como si estuviese pixeleada y
eventualmente cargando capa tras capa encima de ésta, de cierta
forma despixeleándose. Con esto, el contenido de la imagen puede ser
apreciado antes que termine de cargarse, y por lo general se muestran de
forma mucho más rápida que de forma convencional.
9- Tabla para los datos, nunca para el diseño.
Hace unos 10 años, la mayoría de los sitios eran diseñados utilizando 2
técnicas: Frames o Marcos y con Tablas.
Estos métodos eran bastante útiles, ya que permitían hacer una organización
del contenido de forma sencilla y bastante práctica y ordenada. Por una parte
los frames permiten separar el sitio en secciones y trabajar cada una de ellas
a través de archivos independientes y por otra, las tablas, permiten definir
una estructura segmentada y ordenada mediante filas, columnas y celdas,
detallando contenido en ellas tal como si fuese un rompecabezas.
Pág. 12
Pero con el tiempo y evolución que ha tenido HTML, hace bastante que no
es visto con buenos ojos definir el diseño de un sitio mediante alguna de
estas 2 técnicas, y es recomendable hacer el uso de bloques para hacer el
diseño propiamente dicho, utilizando posicionamientos en CSS y dejar las
tablas solamente para presentar información tabulada.
Sin duda que el dominar de forma correcta el uso de bloques puede ser
tremendamente complejo al compararlo con lo que hacíamos mediante
tablas, pero a medida que se va teniendo un mejor entendimiento de cómo
funcionan es posible alcanzar un mejor grado de ubicación de cada
componente, así como un orden ideal.
Es por esto que si sus sitios están actualmente diseñados bajo una estructura
de tablas, es recomendable empezar a actualizar los conocimientos y hacer
los traspasos necesarios, todo con el fin de tener un sitio mejor adaptado a
lo que hoy es considerado correcto.
10- Validar los códigos
La expresión “validar un sitio’’ se refiere a inspeccionarlo con el fin de
determinar que toda la codificación haya sido hecha de forma correcta, y de
esa forma asegurarnos que cada navegador graficará exactamente lo que
queremos mostrar. De esta forma podemos asegurarnos que los usuarios
Pág. 13
Tendrán una buena experiencia visualizando el sitio y también ayudaremos
a que los buscadores indexen de mejor forma en sus resultados.
Para validar tenemos varias opciones, como por ejemplo:
El Validador Oficial De La W3C, en el cual al ingresar la URL de nuestro sitio nos
entregará un detalle de cualquier problema que haya.
¿Qué función delegan los botones de los navegadores?
Botones Atrás y Adelante
Con estos botones se moverá hacia atrás o adelante, en orden, a través de las
páginas que haya visitado durante su actual sesión con el Internet Explorer.
Los botones se verán griseados si todavía no ha estado en ninguna parte. Cada uno
tiene adjunta una lista que desciende, que muestra las páginas visitadas, con
respecto a la página en la que se encuentra en ese momento.
Pág. 14
Botón Actualizar
Cuando se abre una página nueva en el navegador, algunas veces
se va encontrar que no se completó el contenido, es decir, que no
aparecen algunas imágenes, no puedes reproducir los videos o hace falta una parte
del texto. En este caso debemos hacer clic en el botón Actualizar para que la página
vuelva a cargar todo su contenido. También puede ser que deseamos que se
actualice la información que tiene la página web.
Botón Detener
La función de este botón es interrumpir el proceso de carga de una
página.
Botón de Página principal o Home
La página principal es que aquella que siempre aparece cuando se
abre el navegador.
Al hacer clic en el ícono de la casa o Home se abrirá tu página principal.
Botón Favoritos
Puedes guardar tus sitios web preferidos marcándolos como
favoritos y, de esta forma, no tener que escribir su dirección cada
vez que los necesites.
Pág.15
Botón Herramientas
Con este botón accederás a todas la funciones que ofrece tu
navegador. Desde allí, puedes hacer cosas como: Imprimir, hacer
Zoom, configurar la seguridad de tu navegador, entre muchas otras.
Botón Búsqueda
El botón Búsqueda abre un cuadro a la izquierda del navegador, mostrando el motor
para buscar, que usó por última vez desde esa ventana.
Botón Historial
El botón Historia abre un cuadro a la izquierda de la
ventana que tiene una lista de las páginas web que ha
visitado recientemente.
Están agrupadas por fecha. Haga clic en un día o desplácese hacia abajo para ver
los links y la fecha que ingreso a ellos. Haga clic en los links para ver nuevamente
esa página. Desde luego que deberá estar conectado con Internet, a menos que los
accesos directos sean hacia un archivo que está en su propia computadora.
Pág. 16
Botón Nueva Pestaña
Este botón generalmente se encuentra en la parte superior al lado de cada
pestaña. Como se puede visualizar en la imagen, el botón es el que tienen el borde
rojo. Sirve para abrir otra pestaña de navegación y permanecer con la anterior
abierta.
Botón Búsqueda por voz
Este botón no se encuentra en todos los navegadores. Tiene
forma de micrófono. Si el dispositivo que utiliza posee la
versión de algún navegador que tenga este botón, se le da clic y se empieza a
grabar la voz automáticamente, traduciendo a texto lo que se desea buscar en el
navegador.
¿Cuál es la utilidad del Pop Up o Ventana Emergente?
El término anglosajón pop-up (en español: ventana emergente) alude un elemento
emergente que se utiliza generalmente dentro de terminología web. Denomina las
ventanas emergentes sin que el usuario lo solicite, para mostrar generalmente
Pág. 17
Publicidad intrusiva. Una técnica relacionada a ésta es la denominada pop-under,
la cual consiste en abrir de manera intempestiva nuevas ventanas que se sitúan
detrás de la ventana en uso).
¿Cuál es la importancia del navegador web en las páginas web?
También llamado browser o simplemente navegador, es el software que permite el
acceso a internet, interpretando la información de distintos tipos de archivos y sitios
web para que éstos puedan ser visualizados.
La función básica de un navegador web es permitir la visualización de documentos
de texto, muchas veces con recursos multimedia incrustados. Además, permite
visitar páginas web y hacer actividades en ella, es decir, podemos enlazar un sitio
con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Gracias a los navegadores de internet, las personas pueden comenzar a viajar a
lugares cada vez más lejanos en la web, y aprovechar así todo el potencial de la
red.
Pág. 18
Funcionalidad de las animaciones en una página de internet
Las animaciones web suelen utilizarse para publicidad, banners, detalles de diseño,
efectos, botones animados, entre otras opciones.
Son importantes porque la página se vuelve más interactiva con los usuarios, sirven
para llamar la atención del usuario, y en cierto modo incitarlo a que vuelva a visitar
la página.
Pág. 19
CONCLUSIÓN
Pág. 20
Observando el documento anterior, se pueden visualizar 10 sugerencias de cómo
optimizar páginas web, tales como:
Declarar el DocType correcto
Nunca estilizar dentro de etiquetas
Utilizar CSS al comienzo y Javascript al final
Diseñar la interfaz para cada navegador
En lo posible, cargar todo localmente
Añadir descripciones a las imágenes
Siempre cerrar las etiquetas
Favorecer PNG por sobre JPG, y el entrelazado
Tablas para los datos, nunca para el diseño
Validar los códigos
Se mencionó que gracias a los botones de los navegadores web podemos
desplazarnos de una página a otra, marcar nuestras páginas favoritas, navegar por
voz, crear nuevas pestañas, actualizar las páginas web, ver el historial de nuestro
navegador, entre otras opciones.
Se habló acerca de los Pop Ups o Ventanas Emergentes: un elemento emergente
que se utiliza generalmente dentro de terminología web para mostrar publicidad.
Pág. 21
También se explicó que la utilidad de los navegadores web o browsers es permitir
la visualización de documentos de texto, muchas veces con recursos multimedia
incrustados; y que sin ellos se podría navegar en la red ni visualizar los contenidos
de las páginas de internet.
Finalmente se mostró una breve investigación explicando que las animaciones web
suelen utilizarse para publicidad, banners, detalles de diseño, efectos, botones
animados, entre otras opciones.
Pág. 22
BIBLIOGRAFÍA
Pág. 23
- http://www.comolohago.cl/como-optimizar-tu-sitio-web-en-10-pasos/
- http://www.jegsworks.com/Lessons-sp/web/basics/toolbar-allparts.htm
- http://www.gcfaprendelibre.org/tecnologia/curso/internet_explorer_9/empeza
ndo_con_internet_explorer_9/6.do
- http://www.gcfaprendelibre.org/tecnologia/curso/internet_explorer_9/empeza
ndo_con_internet_explorer_9/7.do
- http://es.wikipedia.org/wiki/Ventana_emergente
- http://es.wikipedia.org/wiki/Navegador_web
- http://impdelosnavegarespax.blogspot.com/
- http://www.alegsa.com.ar/Dic/animacion%20web.php