Planificación de un sitio web
El trabajo de construcción de una web exige una planificación exhaustiva (o una planificación básica y un buen programa para manejar todo el sitio), crear adecuadamente los contenidos y estructurarlos bien en forma de páginas, y edificar todo colocando las páginas en el servidor web. Posteriormente, será necesario que la web pueda actualizarse, ampliarse y modificarse de la forma más fácil posible.
Trabajo previo
boceto en papel de una página webEl paso previo es planificar detalladamente los contenidos y la estructura de la web. Aquí se trabaja mejor con lápiz y papel, y deben anotarse todas las ideas que surgen. Ya se verá si son o no aplicables. Debemos meditar bien la estructura de la web, para que los cambios que se deban introducir después de empezar no supongan demasiadas complicaciones. Para empezar a preparar el diseño de las páginas conviene utilizar papel cuadriculado, para tener una idea exacta de las proporciones y la composición. Podemos buscar inspiración e ideas viendo qué hacen en otros sitios web: qué estructura de navegación tienen, qué colores emplean, el tratamiento tipográfico...Debemos preparar una lista de las secciones y pensar un orden lógico para estructurarlas. Existen diversos modelos de navegación; lineal, en red, en árbol... el menos flexible y desaconsejable es el lineal, excepto si el sitio tiene un contenido narrativo, puesto que hace más difícil moverse de una parte de la web a otra.
Producción
Una vez decidida la estructura de base, debemos crear el contenido. Para preparar el texto y las imágenes, podemos utilizar los programas habituales. El texto podemos escribirlo en el procesador o editor habitual, para después copiar y pegar en el editor de páginas web. También es posible escribir directamente dentro de éste.
Los gráficos deberemos prepararlos en un programa capaz de exportar las imágenes en los formatos adecuados, gif o jpeg. Tendremos especial cuidado con el tamaño resultante de los ficheros y su resolución. Las imágenes pueden ser originales creados en el pc, o bien procesadas de una fotografía o un dibujo. Para aquellos que no se defienden mucho con los gráficos, existen servicios online gratis que generan las imágenes con texto que precisemos: botones, títulos... y abundantes colecciones de imágenes listas para usar o clipart. Tenemos una lista de este tipo de servicios en la página de Sugerencias.
Cuando empezamos a tener todas las piezas sueltas necesarias -gráficos y texto- pasamos al editor de html y damos forma individualmente a las páginas. Debemos tener siempre presente la estructura del sitio íntegro, para introducir los enlaces necesarios de unas secciones a otras, según los criterios que hemos apuntado en la página previa. Es importante probar el correcto funcionamiento de los enlaces, verificar el tamaño y calidad de las imágenes, ver como se muestran las páginas en diferentes navegadores y a distintas resoluciones de pantalla...
Para que las modificaciones y actualizaciones del sitio web no sean una pesadilla, es necesario aprovechar funciones como las plantillas que permiten determinados programas (modificando una sola plantilla, todas las páginas basadas en ella se actualizan automáticamente.), hojas de estilo CSS para dar formato rápidamente a conjuntos de páginas y otras prestaciones de los programas. Los modernos editores de páginas web incorporan utilidades muy ingeniosas, tal como comentamos en la sección correspondiente.
Publicar la web.
Hasta que coloquemos los ficheros en el servidor, nuestra web existirá sólo en nuestro ordenador. Debemos, pues, transferir todos los ficheros necesarios, y con la estructura exacta que hemos creado en nuestro disco. Las mismas carpetas y subcarpetas, los mismos nombres y extensiones... ftpLos programas de FTP (de file transfer protocol) son sencillos programas que realizan el trabajo de transferencia de ficheros desde nuestro ordenador a uno remoto, a través de Internet. Es la forma más corriente de pasar los ficheros de una página web al servidor que los alberga. Estos programas suelen funcionar con dos ventanas: a la izquierda los directorios y carpetas de nuestro pc y a la derecha lo mismo, pero en el servidor (según se muestra en la imagen a la izquierda.) Pasamos ficheros de un ordenador a otro seleccionándolos y pulsando la flecha en la dirección en que se han de transferir. Será necesario que estemos autorizados a efectuar estas transferencias (en forma de nombre de usuario y contraseña proporcionados por el proveedor de acceso a Internet o ISP).También se pueden hacer operaciones de borrado, cambio de carpetas, cambio de nombre...
Muchos editores de html tienen una función de subir los ficheros al servidor sin que sea necesario un programa de ftp. También es posible realizar las operaciones desde Internet Explorer, arrastrando y soltando los archivos que se han de transferir desde la ventana local a la ventana que muestra los archivos en el servidor. De todos modos, la mayoría de estos son gratis o económicos, como WS_FTP, uno de los más usados. Otras alternativas muy usadas son CuteFTP, Nico FTP, FTP explorer.
organización de archivos
Esta imagen muestra una organización típica de las carpetas en un servidor, como réplica de la que hemos creado en nuestro propio sistema. Una vez transferidos los ficheros de la web, debemos comprobar el buen funcionamiento online de la web y asegurarnos de que no falta ningún fichero necesario y que la estructura de carpetas es la correcta. Cuando introducimos cambios en las páginas, por ejemplo, sustituimos un gráfico por otro, debemos asegurarnos que el nuevo gráfico tiene el mismo nombre, tamaño y formato que el que reemplaza. Si no es así, será necesario también actualizar la página en la que se encuentra. Para cambios globales en el estilo de las páginas, como hemos comentado, la forma más cómoda y extremadamente útil es emplear las hojas de estilo en cascada (CSS.)
Es muy sencillo, lo único que debemos hacer primero es elegir la ubicación donde queremos que se presente el elemento multimedia y escribimos el código html en el cuerpo de la pagina. Además de esto el archivo de multimedia debe estar guardado en la carpeta donde se encuentre guardado nuestra pagina.
El código HTML para agregar elementos multimedia es el siguiente.
EMBED SRC="clock.avi" HEIGHT="300" WIDTH="400" AUTOSTART="TRUE" LOOP="FALSE"
En este caso es de un video.
Y este otro es de un sonido mp3.
EMBED SRC=" desafio.mp3" HEIGHT="300" WIDTH="400" AUTOSTART="TRUE" LOOP="FALSE"
Espero les alla servido.
Insercion de Gif animados en una pagina web.
Para insertar una imagen animada de formato gif, el código HTML es:
img src="chess_spin_w.gif" width=180 height=131 align="left" alt="error no se cargo la imagen"
La imagen debe estar guardada en la carpeta que este nuestra página.
Especificación de un texto alternativo para una imagen.
Puede especificar texto alternativo (texto alternativo: utilizado por los exploradores Web para mostrar el texto durante la descarga de imágenes para usuarios que tengan desactivada la opción para gráficos y usuarios que se basen en software de lectura en pantalla para convertir gráficos de la pantalla en texto oral.). HTML utiliza etiquetas para indicar cómo deben mostrar los exploradores Web los elementos de página, como texto y gráficos, y cómo deben responder a las acciones del usuario.), como .htm o .html, o bien, si utiliza un lector de pantalla, el texto alternativo aparece cuando mueve el puntero sobre una imagen. El texto alternativo ayuda a los usuarios de lectores de pantalla a comprender el contenido de las imágenes.
En el código de la imagen al final va:
alt="presenta el nombre de la imagen"
Alt lo que hace es al posicionar el puntero sobre la imagen muestra un nombre especifico de la imagen.
Creación de vínculos graficos.
El tag HTML a puede ser usado para insertar vínculos dentro del contenido de un documento. Esto puede ayudar a los autores a recomendar otros recursos relacionados con el tópico actual, al cual los usuarios pueden, en la mayoría de los casos, acceder simplemente haciendo un click en el contenido vinculado. El contenido vinculado no es otra cosa que el contenido del tag HTML a (o sea, el pedazo de código ubicado entre los tags de apertura y cierre). Nota que los vínculos son usualmente graficados de un modo diferente por los navegadores, lo que ayuda a los usuarios a reconocerlos.
Existen muchas maneras de construir un vínculo, pero básicamente debe constar de, al menos, el contenido y la dirección del recurso (definida mediante el atributo "href"). En el ejemplo siguiente definiremos un vínculo básico:
ahref="http://www.htmlquick.com/es/reference/tags/a.html"
img src="http://www.htmlquick.com/es/img/links/button.jpg" width="88" height="31" alt="HTMLquick.com logo" /br
tag HTML a
/a
Insertar un gif en tu web
*Has de tener en cuenta que no debe ser demasiado grande, si "pesa" demasiado en Kilobytes recargará la página y hará que tarde más en descargarse de la red
*El codigo a insertar para que salga una imagen en tu web es:
<imgsrc="ejemplo.gif"WIDTH="9" HEIGHT="9">
* Width es el ancho de la imagen
*Height es el alto de la imagen
*Recuerda que la imagen debe estar situada dentro del mismo directorio que el documento HTML que será la página. Sino en lugar de ejemplo gif debes poner la ruta URL=http://www.ejemplos.com/miweb/ejemplo.gifCreación de un mapa de imágenes
En este tema aprenderemos a hacer mapas de imágenes. Los mapas de imagen no son más que gráficos sobre los cuales se han definido determinadas áreas sensibles al ratón. Estas áreas se pueden vincular con otras páginas y visitarlas al hacer clic sobre ellas.
En ImageReady crear mapas de imágenes es muy sencillo. Lo primero que deberás hacer será abrir el archivo sobre el que definirás el mapa. Puedes escoger un archivo del formato que desees pues los mapas de imagen no dependen del gráfico que incluyas sino que se tratan de una definición de áreas sobre la imagen que se establece mediante el código HTML que ImageReady creará cuando guardes el mapa.
Una vez abierta la imagen selecciona una de las herramientas de Mapa de imágenes.
Los mapas de imagen permiten áreas rectangulares, circulares y poligonales. Así que puedes combinar las herramientas para crear mapas bastante complejos.
Para hacer aparecer el menú contextual del grupo de herramientas deberás hacer clic sobre el icono en el Panel de Herramientas y dejarlo presionado (en Photoshop accedíamos a él haciendo clic derecho). Si pulsamos el triángulo al pie del menú, el grupo de herramientas se establecerá en una ventana flotante para que puedas trabajar con más comodidad.
Una vez hayas creado todas las áreas que tendrá el mapa, la ventana Contenido de Web tendrá un aspecto parecido a este:
Ahora podremos utilizar la herramienta de Selección de mapa de imágenes 
para seleccionar las áreas que hemos definido.
Esta sería la barra de Opciones de herramientas que veríamos:
Desde el botón 
o haciendo doble clic sobre la miniatura del área en la ventana Contenido de Web podemos acceder a las propiedades de la zona sensible.
Aquí podremos darle al área seleccionada un nombre que se visualizará en la ventana Contenido de Web para reconocerla mejor y rellenar los siguientes campos:
-
URL: indica la página que se abrirá al hacer clic sobre el área seleccionada.
-
Alt: configura el texto de ayuda que se mostrará al pasar el ratón sobre dicha área.
-
Destino: este campo decide dónde se abrirá la página vinculada. Puede tomar los siguientes valores:
-
_blank: abre la página en una nueva ventana del navegador.
-
_self: abre la página en el mismo marco donde se está visualizando el mapa.
-
_parent: abre la página en el marco padre de dónde se está visualizando el mapa.
-
_top: abre la página en la misma ventana desde la que se está visualizando el mapa.
-
Podemos utilizar estos botones en la barra de opciones para decidir el nivel de importancia de las áreas sensibles.
Si dos áreas coinciden en un punto, la página vinculada será aquella del área que se encuentre por encima de la otra.
Con estos botones, entonces, podrás desplazarlas hacia arriba 
, hacia abajo 
, colocarlas encima de todas 
o debajo 
.
Una vez tengas el mapa acabado deberás proceder a guardarlo. Utiliza el comando Guardar optimizada como para que se abra este cuadro de diálogo:
En el desplegable Tipo selecciona HTML e imágenes para que el programa genere el código del mapa.
NOTA: Para informacón especifica sobre cómo utilizar este programa consulte la seccion de soporte de Microsoft.
Soporte de frontpage
Extensiones del servidor
Instalar las extensiones.
Costo
2.Utilización del disco
3.Precauciones
Bots
Algunos, tales como Include y Subsitution, permiten introducir una vez algún elemento del web e incluirlo a cualquiera o a todas las páginas insertando un componente Bot que referencie ese elemento. Los cambios en el elemento
|
LOS FORMATOS DE SONIDO MÁS COMUNES EN LA WWW
Los archivos de audio tienen diferentes formatos y estos dependen generalmente del con qué, del cómo y del para qué fueron creados.
Cuando se trabaja con una aplicación, el software asigna una extensión al tipo de archivo que esta creando con el fin de identificarlo, por ejemplo .doc para el Word, .xls para Excell, etc.
De la misma manera, los formatos de los archivos de sonido se caracterizan por su extensión, a continuación se presentan algunos de los más usuales así como algunas de sus características.
WAVE
Extensión: .wav
Creado por: Microsoft
Muestras por segundo (sampling rates): multiples
Soporte de canales: mono y estéreo
Resolución: 8 y 16 bit
Información: fue introducido en Windows 3.1, estos archivos son de los más usuales y debido a esto, múltiples software lo pueden reconocer y procesar. Estos archivos ocupan una cantidad considerable de espacio en disco ya que almacenan la información de la conversión A/D de la forma de, por ejemplo, un archivo de un minuto de alguna melodía musical puede ocupar más de 1 MB.
Lógicamente la cantidad de espacio y la calidad del audio dependen de las características del muestreo con el que fueron creados los archivos.
Aún cuando este tipo de formatos fue introducido por Microsoft para sus aplicaciones en Windows, muchos programadores de Internet lo utilizan para agregar audio en sus páginas, esto es adecuado siempre y cuando los archivos sean pequeños (menor de 1 MB) pues de lo contrario se dificulta su transportación por la red.
MIDI (Music Instrument Digital Interfase)
Extensión: .mid
Creado por: Sintetizadores - PC
Información: El MIDI es el protocolo estándar de comunicación entre una PC y algunos Instrumentos musicales.
Para crear un archivo MIDI no se necesita el sampling rate, número de bits, etc. ya que no almacena la forma de onda del audio, más bien almacena los códigos de ejecución para que un sintetizador los interprete y los ejecute.
Es por esto, que este tipo de archivos ocupa muy poco espacio de memoria. Por ejemplo 10 seg. de un archivo MIDI puede ocupar 1.5KB mientras que 10 seg. a 16 bit de un archivo .WAV puede ocupar hasta 500 KB.
Para que se entienda mejor, los archivos MIDI no pueden almacenar información de voz, solo almacenan códigos que un instrumento "Lee" y lo ejecuta, por ejemplo notas, octava, volumen, tiempo, sonido, etc.
Para ejecutar un archivo MIDI se necesita del sintetizador apropiado, más sin embargo, existe software que pueden hacer esta función, lógicamente no con la misma calidad pero si aceptables.
Como este tipo de archivos puede almacenar melodías musicales completas y ocupar muy poco espacio de memoria, muchas personas guardan en su PC una variedad de estos archivos de sus melodías preferidas para escucharlas mientras trabajan en alguna otra tarea
Los programadores de Internet utilizan estos archivos para ambientar sus páginas ya que puede ser transportados más rápidamente que los archivos WAVE y con la gran ventaja que la mayoría de los visualizadores reconocen este tipo de formato.
Sun Audio
Extensión: .au
Creado por: Sun
Muestras por segundo (sampling rates): múltiples
Soporte de canales: mono y estéreo
Resolución: 8 y 16 bit
Información: Este tipo de archivos es uno de los más utilizados por Internet, ocupan casi la misma cantidad de espacio que los archivos .wav pero fueron creados exclusivamente para ser transportados por red, las características son semejantes a los WAVE.
Apple Intechange File Format
Extensión: .aif(F) y .snd
Creado por: Apple para la Mac
Muestras por segundo (sampling rates): múltiples, en fracción proporcional a 65.536 KHz
Soporte de canales: mono y estéreo
Resolución: de 4 hasta 32 bit en incremento de 1 bit
Información: Es usado solamente para la bifurcación, haciéndolo poderoso para el intercambio entre MAC y PC.
Apple Interchange File Format Compressed
Extensión: .aif(C) y .snd
Creado por: Apple para la Mac
Muestras por segundo (sampling rates): múltiples, en fracción proporcional a 65.536 KHz
Soporte de canales: mono y estéreo
Resolución: de 4 hasta 32 bit en incremento de 1 bit
Información. Es idéntico al AIFF pero es usado para la compresión de audio.
Real Audio
Extensión: .ra
Creado por: RealNetworks
Muestras por segundo (sampling rates): 8, 11.025, 16, 22.05, y 44.1 KHz.
Soporte de canales: mono y estéreo
Resolución: 8 y 16 bits
Información. Transportar un archivo de audio por la red ocupa tiempo y espacio en su disco duro. Imagine que después de esperar la transferencia de un archivo de audio descubra que no es de su agrado, bueno, tiempo perdido. Existe la solución a esto mediante la ejecución de archivos en tiempo real.
Todo archivo (.wav, .au .aiff, etc.) puede convertirse a un archivo en tiempo real mediante el proceso llamado codificación (encoder), en donde el archivo resultante, en este caso, un archivo con extensión .ra puede ser reproducido en su maquina sin ser memorizado en el disco. Dependiendo del formato original, sera la frecuencia de muestreo usada por el encoder.
Inserción de videos en pag. Web
Puede utilizar Dreamweaver para insertar películas Shockwave en los documentos. Adobe® Shockwave®, el estándar para multimedia interactivo en la Web, es un formato comprimido que permite la descarga rápida de los archivos multimedia creados en Adobe® Director® y su reproducción en los navegadores de uso más frecuente.
- En la ventana de documento, coloque el punto de inserción en el lugar en el que desea insertar una película Shockwave y siga uno de estos procedimientos:
En la categoría Común del panel Insertar, haga clic en el botón Media y seleccione el icono Shockwave del menú desplegable
.Seleccione Insertar > Media > Shockwave.
- En el cuadro de diálogo que aparece, seleccione un archivo de película.
- En el inspector de propiedades, introduzca el ancho y el alto de la película en los cuadros An y Al.
La automatización de una aplicación permite acelerar las tareas repetitivas, mejorar la gestión del flujo de trabajo, actualizar la información, realizar cálculos, ejecutar programas y verificar el correcto funcionamiento de toda la aplicación.
Es posible añadir componentes automatizados a la mayoría de los elementos de diseño de una aplicación de Domino: a una base de datos, a una página, a un conjunto de marcos, a una vista, a un formulario o a un documento. Entre los componentes automatizados se cuentan:
- Acciones
Es posible utilizar una acción en un formulario o en una vista para configurar una tarea activada por el usuario. La acción puede presentarse en el menú Acciones o en forma de botón en la barra de acciones. Por ejemplo, pueden utilizarse acciones con objeto de simular elementos de menús de Notes para los usuarios de navegadores de Web. Así, este tipo de usuarios podrá llevar a cabo tareas de Notes al acceder a bases de datos de Domino.
- Zonas activas
En un formulario o en un documento puede utilizarse una zona activa para configurar una tarea activada por el usuario. La zona activa puede ser un vínculo a otra sede Web, a una base de datos o a un elemento de una base de datos, a un botón, a un texto emergente o a una acción.
- Agentes
Utilice agentes para configurar tareas activadas por los usuarios, o tareas en segundo plano, en cualquier parte de una aplicación de Domino. Los agentes pueden ser simples, como, por ejemplo, los que mueven documentos a una carpeta, o complejos, como los que utilizan programas de Java para ejecutar múltiples tareas automatizadas a horas programadas. Los agentes se guardan con las bases de datos, pero es posible utilizarlos para ejecutar tareas automatizadas que se apliquen a vistas, documentos, campos y bases de datos.
- Programas activados por eventos
Es posible asociar una tarea automatizada a un evento que se produzca cuando se emplee un elemento de diseño. Por ejemplo, se puede crear una tarea automatizada para detectar errores cuando un usuario guarde un documento que haya creado o modificado.
Para crear las tareas relacionadas con estos componentes automatizados, pueden emplearse los siguientes elementos:
- Acciones simples
Los elementos de diseño pueden automatizarse sin necesidad de tener conocimientos de lenguajes de programación. Es posible seleccionar una o varias acciones simples de una lista. Las acciones simples no se pueden personalizar y no son compatibles con las aplicaciones para Web.
- Fórmulas
Puede escribir una fórmula con funciones @ que se ejecute de manera independiente o combinada con una acción simple. No puede combinar LotusScript® en una fórmula con funciones @. Si desea incluir algunas funciones @ en LotusScript, utilice la función Evaluate de LotusScript.
- LotusScript
LotusScript es un completo lenguaje de scripts con el que pueden diseñarse la mayoría de las tareas necesarias para las aplicaciones.
- JavaScript
Se puede hacer uso de la ejecución de JavaScript en eventos (por ejemplo, en el evento onClick al hacer clic en un botón o en el evento onLoad al cargar un formulario) para interactuar eficazmente con el usuario en tareas tales como la validación de formularios y campos o la simulación de cuadros de diálogo. Utilice JavaScript común para introducir código que funcione tanto en el cliente Notes como en Internet.
- Java
Es posible escribir programas en Java o importar archivos Java en los agentes.
Visualización de la estructura de un sitio Web
Cualquier web, incluso y especialmente la telaraña global en su conjunto, se compone básicamente de páginas (a las que llamaremos nodos) y enlaces entre ellas (a los que denominaremos arcos). Esto hace que, desde un punto de vista matemático podamos considerar la estructura de cualquier web como un grafo. Por tanto para representar la estructura de una web basta simplemente con dibujar un grafo
¿Simplemente? Me temo que no tan simplemente. La representación de grafos resulta un tema tan rico que merece un simposio internacional que se reúne anualmente, el International Symposium on Graph Drawing. De los grafos y las consideraciones sobre cómo dibujarlos ya hablamos en el número 137 titulado "Grafos" en un arranque de originalidad.
Pero no nos interesan aquí las diferentes modalidades de dibujo de los grafos en general sino cómo su visualización nos puede permitir entender la estructura de la web para tomar luego decisiones e implementarlas.
Para ello veremos algunas de las visualizaciones que han ido surgiendo al respecto. La mayoría de ellas representan la estructura como una jerarquía obviando los enlaces que se devuelven unas páginas a otras formando circuitos, con lo que la estructura se puede representar como un árbol (un grafo conexo acíclico).
Verificar mi sitio Web
1. Sites: Haz clic en "Configuración del sitio - Otras cosas" y encontrarás la caja "Verificación de las herramientas para webmasters de Google". Introduce allí tu metaetiqueta de verificación.
2. Blogger: Una vez en tu panel de Blogger, al final de la página, en la sección Herramientas y recursos, haz clic en
el enlace “Herramientas del webmaster”. En la siguiente página haz clic en “Habilitar Herramientas para Webmasters”
3. Googlepages: Verifica con la opción "Subir un archivo HTML", entonces te saldrá un nombre de
archivo parecido a esto: google3nba03bn52.html. Abre un archivo de texto y grábalo usando el nombre dado. No hace falta tener contenido en el archivo, lo importante es el título. Después entra en tu cuenta de Googlepages y al lado derecho encontrarás un vínculo para subir archivos. Haz clic en "upload" y busca el archivo de texto que acabas de crear.
No hay comentarios:
Publicar un comentario