Mejora tu Web
Mejora tu Web
En este apartado te muestro distintas formas y elementos para mejorar el aspecto de tu página web. Son tantos los temas de los que se puede hablar aquí que dudo completarlo nunca, je je je, pero vamos a intentarlo.
Primero quiero que sepas que tu participación es indispensable también en este apartado. ¿Cómo? Simplemente, si quieres una mejora para tu web que no encuentras aquí, házmelo saber en el Foro CCTW y te doy mi palabra que haré lo posible para incorporar las explicaciones oportunas.
Algunas de las mejoras que, hoy por hoy están disponibles o en camino son las siguientes:
Cómo incluir un Foro
Tenemos dos opciones dependiendo de que tu servidor te ofrezca una base de datos o no. En el primer caso puedes optar por un foro como el de CómoCrearTuWeb. En caso contrario tendrás que conformarte con otros tipos, menos buenos, pero tasmbién validos. Como siempre, paso a paso.
Una de las mejores maneras de mantener una página web viva es sin duda incluir un buen foro. Además de dar la sensación de que la web es actualizada a diario (cada día hay nuevos mensajes que leer) crea (si consigues buen ambiente en él) una especie de adicción en sus visitantes de forma que te aseguras que la gente volverá periódicamente para ver qué nuevos temas se tratan en él.
Por supuesto, para ello es preciso mimar al foro, es decir, cuidar que no aparezcan mensajes basura (spam, cosas que nada tienen que ver con el foro y que suelen molestar bastante al visitante), responder rápidamente a las cuestiones que se plantean, escuchar la opinión de tus visitas y hacerles caso cuando te propongan mejoras. En definitiva, mantenerlo saludable y con buena onda.
Existen multitud de alternativas a la hora de escoger un foro para tu página web, gratuitas en la mayoría de los casos, aunque por desgracia los mejores foros necesitan de ciertos requisitos que no todos los servidores (espacios web) te ofrecen, pero eso lo veremos ahora.
Te recomiendo que empieces verificando si tu servidor cumple los requisitos para alojar un foro tipo phpBB2 ( o phpBB3). Si es así adelante, instalate uno siguiendo las instrucciones del siguiente apartado. En caso contrario aún puedes conseguir uno de ese tipo pero instalándolo en algún otro servidor (esto lo puedes ver en la sección Otros Foros) o confórmate con un simple foro, que aunque con menos posibilidades, también ayudan a dar ese toque «vivo» a tu web. La mayoría de hosting (u hospedajes o espacios web) gratuitos no cumplen los requisitos para poder colocar un buen foro. De todas formas no creas que un hosting de pago es tan caro. Mira este por ejemplo.
Por supuesto, si no tienes algo de tiempo para dedicarle al foro, mejor no lo pongas en tu página web, pues en lugar de resultar útil a tus visitantes, será un motivo de enfado al ver que no les respondes, a no ser que cuentes con buena gente que te ayude a responder por tí…
En el menú de la izquierda de esta página encontraras las opciones que detallamos paso a paso para que puedas instalar un foro sin problemas, simplemente siguiendo las instrucciones. Si no tienes ni idea de cuál escoger fiate de mi y elige el foro tipo phpBB3.
Características de un foro tipo PhpBB2 para tu página web
La mejor manera de definiros este tipo de foros es enviaros a visitar el Foro de CómoCrearTuWeb. Es algo diferente a los foros que estamos acostumbrados a ver y que ofrecen gratuitamente por la red (melodysoft, etc) dejándote grandes opciones de configuración y personalización.
Puedes hacer que el foro (o alguna de sus secciones solamente) sea público o bien requiera de un registro en el mismo, puedes escoger moderadores que te ayuden a mantenerlo al día, puedes denegar la entrada a los spamers, crear y retocar nuevos temas o secciones dentro del mismo foro, editar mensajes ya publicados o borrarlos, seleccionar un grupo de usuarios para por ejemplo enviarles mensajes a todos a la vez anunciando cambios o lo que desees, puedes comunicarte con los usuarios registrados por privado, colocar encuestas, ver los nuevos mensajes desde tu última visita, ser informado cada vez que respondan a uno de tus mensajes…. un montón de cosas que otros foros gratuitos no te ofrecen.
Como inconveniente, necesitas que tu servidor cumpla ciertos requisitos poco usuales en un servidor gratuito. Consulta estos requisitos en el apartado siguiente y veamos si pudes insertar uno de estos. En caso contrario ve a la sección Otros Foros donde encontrarás alternativas bastante interesantes.
Cómo Configurar el foro PhpBB2 de tu página web
Abre el navegador y ve a http://dominio-de-tu-web/phpBB2/install/install.php. Aparecerá la pantalla de instalación, que te preguntará una serie de opciones de configuración. Las 3 primeras son el idioma (en este momento sólo se puede elegir Inglés), la base de datos (en nuestro caso MySQL) y si estás instalando o sólo actualizando (nosotros estamos instalando). Para las siguientes 4 opciones necesitarás la información que te haya dado tu proveedor de hosting.
Database configuration: (Configuración de la base de datos)
1.- Database Server Hostname / DSN: Es el nombre del servidor de la base de datos, este nombre tiene que dártelo tu proveedor de hosting, suele ser localhost o una IP.
2.- Your Database Name: El nombre de la base datos, también ha de dártelo tu proveedor.
3.- Database Username: Tu nombre de usuario en la base de datos (puede ser distinto al del registro en el servidor).
4.- Database Password: Contraseña de la base datos (puede ser distinta al del registro en el servidor).
5.- Prefix for tables in database: prefijo de las tablas en la base de datos. La base de datos de phpbb implica varias tablas (users, topics, posts, etc) poniendo este prefijo se llamaran phpbb_users, phpbb_topics, esto te permitirá instalar un segundo foro en la misma base de datos simplemente cambiando este prefijo.
Admin Configuration (Configuración del Administrador)
Ahora veremos como configurar tu cuenta de administrador del foro, necesaria para la puesta en marcha del mismo.
1.- Admin Email Address: Cuenta de correo del administrador, es la que utilizará el foro para mandar los mensajes a los usuarios.
2.- Domain Name: Dominio en el que está el foro, en mi caso es www.comocreartuweb.com
3.- Server Port: Puerto del servidor, a menos que tu proveedor te indique otra cosa, dejaló como está.
4.- Script path: Directorio en el que está el foro, si has colgado la carpeta phpBB2 del ráiz será /phpBB2/, pero supongamos has metido la carpeta phpBB2 dentro de una carpeta que se llama foros, en este caso sería /foros/phpBB2/.
5.- Administrator Username: Nombre de usuario del administrador.
6.- Administrator password: Contraseña del administrador.
7.- Administrator Password [ Confirm ]: Confirmación de la contraseña del administrador.
Una vez rellenados todos estos campos, pulsamos sobre «start install«.
AVISO: Si no le has dado permisos de escritura a config.php recibirás un mensaje diciendo que no puede escibir en el fichero de configuración, así que pulsamos sobre el botón «Download Config» y guardamos el archivo en nuestra carpeta de phpbb2 sobreescribiendo el archivo de configuración que teníamos previamente.
6.- Ahora, cuando te salga el mensaje: «Please ensure both the install/ and contrib/ directories are deleted«, borra las carpetas «install» y «contrib» abriendo el ftp y eliminándolos del servidor. Esto es para evitar que alguien pueda entrar, leerlos y ver allí tus datos para hacerse con el control del foro. Si los eliminas del servidor no ocurrirá esto.
Cómo Configurar el foro PhpBB2 de tu página web
Abre el navegador y ve a http://dominio-de-tu-web/phpBB2/install/install.php. Aparecerá la pantalla de instalación, que te preguntará una serie de opciones de configuración. Las 3 primeras son el idioma (en este momento sólo se puede elegir Inglés), la base de datos (en nuestro caso MySQL) y si estás instalando o sólo actualizando (nosotros estamos instalando). Para las siguientes 4 opciones necesitarás la información que te haya dado tu proveedor de hosting.
Database configuration: (Configuración de la base de datos)
1.- Database Server Hostname / DSN: Es el nombre del servidor de la base de datos, este nombre tiene que dártelo tu proveedor de hosting, suele ser localhost o una IP.
2.- Your Database Name: El nombre de la base datos, también ha de dártelo tu proveedor.
3.- Database Username: Tu nombre de usuario en la base de datos (puede ser distinto al del registro en el servidor).
4.- Database Password: Contraseña de la base datos (puede ser distinta al del registro en el servidor).
5.- Prefix for tables in database: prefijo de las tablas en la base de datos. La base de datos de phpbb implica varias tablas (users, topics, posts, etc) poniendo este prefijo se llamaran phpbb_users, phpbb_topics, esto te permitirá instalar un segundo foro en la misma base de datos simplemente cambiando este prefijo.
Admin Configuration (Configuración del Administrador)
Ahora veremos como configurar tu cuenta de administrador del foro, necesaria para la puesta en marcha del mismo.
1.- Admin Email Address: Cuenta de correo del administrador, es la que utilizará el foro para mandar los mensajes a los usuarios.
2.- Domain Name: Dominio en el que está el foro, en mi caso es www.comocreartuweb.com
3.- Server Port: Puerto del servidor, a menos que tu proveedor te indique otra cosa, dejaló como está.
4.- Script path: Directorio en el que está el foro, si has colgado la carpeta phpBB2 del ráiz será /phpBB2/, pero supongamos has metido la carpeta phpBB2 dentro de una carpeta que se llama foros, en este caso sería /foros/phpBB2/.
5.- Administrator Username: Nombre de usuario del administrador.
6.- Administrator password: Contraseña del administrador.
7.- Administrator Password [ Confirm ]: Confirmación de la contraseña del administrador.
Una vez rellenados todos estos campos, pulsamos sobre «start install«.
AVISO: Si no le has dado permisos de escritura a config.php recibirás un mensaje diciendo que no puede escibir en el fichero de configuración, así que pulsamos sobre el botón «Download Config» y guardamos el archivo en nuestra carpeta de phpbb2 sobreescribiendo el archivo de configuración que teníamos previamente.
6.- Ahora, cuando te salga el mensaje: «Please ensure both the install/ and contrib/ directories are deleted«, borra las carpetas «install» y «contrib» abriendo el ftp y eliminándolos del servidor. Esto es para evitar que alguien pueda entrar, leerlos y ver allí tus datos para hacerse con el control del foro. Si los eliminas del servidor no ocurrirá esto.
Cómo incluir estadísticas en una página web
Normalmente nos dan información en tiempo real no solo de la cantidad de visitas que tiene cada una de las páginas de nuestra web, sino además, nos muestran gráficos de las visitas por día, semana, mes y año, de donde vienen los visitantes (de qué enlaces, o en qué navegadores nos han encontrado), con que sistema operativo, resolución de pantalla etc, nos han visitado…. una gran cantidad de información imprescindible para saber que tal vamos.
Qué son las Estadísticas?
Está bien claro que el objetivo principal de crear una página web es la de ser visitada y la mejor forma de comprobar que tu página web está siendo visitada es registrando cada una de las visitas, de algún modo, en algún lado.
Esto lo conseguimos con los contadores, pero además de conocer el número de visitas resulta de mayor utilidad aún conocer otros datos como, cuántos visitantes distintos hemos tenido cada día, a qué horas suelen venir, qué monitor y resolución utilizan, si tienen el Flash instalado, de qué país proceden, y lo más importante de todo, dónde han conocido la existencia de nuestra página web? Es decir, ¿Quién es el tio simpático que ha puesto un enlace en su web hacia la nuestra? ¿Un particular? Un directorio
? ¿Quizás Google, o Yahoo!…?
Toda esta información la podemos obtener gracias a los serivios de estadísticas. Aunque podrías crear tus propias estadísticas, no es un tema para nada fácil si acabas de empezar en este mundillo y además tu servidor puede que no te lo permita (especialmente si es gratuito), de modo que lo mejor es obtener este servicio, de forma gratuita, a través de diversos portales que lo ofrecen.
A continuación te muestro los más utilizados y os comento un poco sus características, cómo registraros y cómo incluirlas en tus páginas web, como siempre, paso a paso.
Para los que tenéis la suerte de contar con un servidor de pago, quizás os resulte interesante crear vuestras propias estadísticas, de modo que procuraré incluir algunas nociones en breve, en este mismo apartado.
Por el momento tengo listas explicaciones acerca de dos servicios gratuitos de estadísticas, Webstats4U y Developers4web. Me permitís un consejo? Escoged Developers4Web.
Icono personalizado junto a la URL de la web
Seguramente, alguna vez habeis entrado en alguna web y habeis visto que en el navegador, justo antes de la dirección de la web (URL) aparece un icono pequeñito, el logotipo de esa web en cuestión. Queda bastante bien, no? Pues aquí te muestro desde cómo hacer el icono hasta cómo insertarlo en tu web, para que veas.
Tu Icono En la URL de tu Página Web (favicon.ico)
Probablemente os hayáis encontrado en alguna ocasión que al incluir una determinada web en el apartado «Favoritos» de vuestro navegador, esa web se queda almacenada con un icono pequeñito justo al lado de la dirección. Ese icono saldrá cuando accedáis a esa página y se puede ver en vuestro navegador a la izquierda de la dirección de esa web.
Pues bien. Estuve investigando como narices lo hacían y Por Fin lo he descubierto. Es una cosa bastante sencilla. El único problema es que para incluir un icono de estos en vuestra web, primero tenéis que tener un icono, claro. Pero bueno. Eso tampoco es problema porque en CreaTuWeb podéis encontrar algunos favicones hechos y con qué programa poder diseñar el vuestro si lo deseais, etc, etc.
Para continuar pincha en «Editor de Iconos», en el menú de la izquierda. Está todo explicado paso a paso. Y ante cualquier duda no te prives, consúltanos lo que quieras en el Foro CCTW.
Dónde Conseguir un Editor de Iconos para Crear el Favicon?
Después de romperme la cabeza intentando crear un icono con programas normales de dibujo, no he conseguido obtener un icono, que es un archivo tipo gráfico con extensión .ico.
Lo que si he encontrado es un programilla que me permite crearlo de una manera sencillísima. Se trata del IconEdit 2. El único problema que tiene es que es una demo y no te deja que guardes el icono que has hecho con él, pero no hay nada que no pueda solucionarse. Si tienes algún tipo de problema con él, dinos algo en el Foro CCTW.
Podéis encontrar multitud de programas (entre ellos, éste) en la siguiente dirección:
Poned el nombre del programa en el buscador de esa página y lo encontraréis.
Si quieres saber como funciona no tienes más que seguir la siguiente lección titulada «Cómo Crear un Icono«.
Cómo Crear un Icono (favicon.ico) con IconEdit
Hasta que yo mismo no aprenda a crear iconos con un programa de dibujo cualquiera, nos ceñiremos a este sencillo programa llamado IconEdit, pues, aunque solo sirve para crear iconos, me parece sencillamente Genial
Suponiendo que ya os lo habéis bajado desde la lección anterior, basta con ponerlo en marcha. Tras instalarlo lo podréis encontrar en el menú de inicio. Al ejecutarlo (no es matarlo, sino ponerlo en marcha, je, je, je) aparece una ventanita como la siguiente:
En realidad se ve mucho mejor que aquí, je, je, je, pero es para que os hagáis una idea. La pantalla interior es el huevo que tenéis para crear el icono. Está dividido en cuadritos, de modo que resulta muy fácil construir el icono. El problema es que no basta con el programa solo. También hay que tener buen gusto para conseguir un icono atractivo, pero eso no os lo podéis bajar de ningún lado, je, je, je.
El funcionamiento es bastante sencillo, de modo que no creo que haga falta dar muchas explicaciones sobre como crearlos. Haciendo clic en los rectángulos que aparecen superpuestos a la derecha, se abre la paleta de colores, donde podéis elegir el que queráis.
Una vez terminado el icono, hacéis clic en uno de los botones de abajo y lo guardáis. Recordar meterlo en la carpeta adecuada con el fin de mantener todos los archivos bien bien ordenados.
En las siguientes lecciones os enseño como añadirlo en «Favoritos».
Dónde Conseguir Iconos ya Hechos
Ya sabéis que los iconos tienen extensión .ico, de modo que es fácil localizarlos. Por ejemplo, podéis probar a buscar todos los iconos que tenéis en vuestro disco duro, por si os gusta alguno para vuestra web. Es muy fácil hacer esto. Simplemente os vais al botoncito de abajo a la izquierda de vuestro ordenador, lo pulsáis y elegís la opción Buscar y luego en Archivos o Carpetas. En la ventana que se abre, donde pone Nombre, poned *.ico y pulsáis en Buscar Ahora. Os mostrará una lista de todos los iconos que hay en vuestro disco duro. Si os gusta alguno seleccionadlo, copiadlo y pegarlo en la carpeta donde guardéis las cosas de vuestra página.
También existen por ahí bibliotecas de iconos ya hechos, de modo que bastará con buscar el que más os guste o más se amolde a la idea que tengáis para vuestra web. Un ejemplo de estas bibliotecas lo podéis encontrar en el siguiente programa, que podéis bajaros haciendo clic en él. Si deja de funcionar dadme el toque y lo arreglaré, pues es posible que su dirección cambie de vez en cuando.
(si no funciona este hipervínculo, buscadlo en http://tucows.mundivia.es o con el Emule, Kazaa, etc..)
Abajo podréis encontrar algunos de los iconos que he ido encontrando por ahí. Seguramente no habrá muchos, pero iré incluyendo más poco a poco. Si quieres mandarme alguno que yo no tenga, ya sabes cual es mi dirección.
Si queréis unos cuantos iconos (unos 10 o 12) para hacer algunos ejemplos, bajaros este archivo. Esta comprimido con Winzip, pero supongo que lo tendréis todos.
Cómo Insertar el Favicon.ico en Tu Página Web
Una vez tenemos listo y preparado nuestro icono lo guardaremos en el lugar adecuado para mantener siempre el orden, que como ya os he dicho tropecientas veces, es muy importante en esto de hacer webs para no perdernos.
Recordar que se trata de un pequeño archivo con extensión .ico (se llama extensión a las tres letritas que aparecen al final del nombre del archivo y que caracterizan el tipo de archivo de que se trata).
Ahora, para que cuando un visitante al agregar vuestra web en sus favoritos le salga el icono que hemos creado junto a la dirección de la página, tendremos que incluir un pequeño código en nuestra web. No os asustéis cuando os hable de código pues es algo muy sencillito. Os lo explico paso a paso para no variar.
- 1.- Acceder al Código: Tenéis que acceder al código HTML de vuestra página. Esto lo podéis hacer de distintas formas, según el editor que estéis utilizando (FrontPage, Dreamweaver…etc). Por ejemplo, con el FrontPage Express tendréis que hacer clic en Ver y luego en HTML…. Con el FrontPage 2.000 en cambio, bastará con hacer clic en la lengüeta de la parte baja, donde aparece la palabra HTML. Con el Dreamweaver basta hacer clic abajo, en el icono con esta figura «
«. - 2.- Localizar Dónde Incluir el Código: Podréis observar una serie de palabrejas más o menos desconocidas y más o menos ininteligibles. El trozo de código que vamos a introducir, lo tenemos que meter entre la línea donde pone <HEAD> y la que pone </HEAD> (toda esta parte se llama cabecera). Para ello podemos hacer lo siguiente: Ponemos el cursor justo al final de la palabra <HEAD>, pulsamos la tecla Intro o Enter o como queráis llamarla. Con eso, crearemos una línea nueva debajo de la anterior. En esa nueva línea introduciremos el siguiente código.
- 3.- Introducir el Código: Tenemos que escribir lo siguiente:
<LINK REL=»SHORTCUT ICON» HREF=»http://XXXXrutaXXXX/favicon.ico»>
pero donde yo he puesto XXXXrutaXXXX, vosotros tenéis que poner la ruta donde habéis guardado el archivo del icono, y donde pone favicon.ico, tenéis que poner el nombre completo de dicho archivo, con su .ico (extensión) incluida.
Si aún no controláis bien el tema de las rutas, no dudéis en leeros la sección Las Rutas pues os evitará la mayoría de quebraderos de cabeza. Para los impacientes, os digo que es el camino que hay que seguir para encontrar dicho archivo, pero leeros esa lección bien para tener bien claro lo que tenéis que poner.
- 4.- Para finalizar: Ya esta todo. Ahora solo tenéis que guardar la página que hemos modificado y luego, mediante el FTP[?] o el programa que usemos para subir los archivos de nuestra web al servidor, actualizamos nuestra web, es decir, subimos esa página recién modificada y, claro está, el icono.
- 5.- La comprobación: Para comprobar que lo hemos hecho bien, una vez que hemos subido todo con el FTP o lo que sea, nos conectamos a Internet, (en mi caso lo llamaría más bien interLENT), visitamos nuestra web y, en nuestro navegador, pulsamos en Favoritos y luego en Agregar a Favoritos. Si todo ha ido bien, aparecerá nuestro icono junto a la dirección de nuestra página, y lo mismo le ocurrirá a los visitantes que hagan lo mismo.
Debo avisaros de una cosilla. Esto solo funciona si el visitante agrega a sus favoritos esa página, pero no si agrega otra cualquiera de vuestra web, pues solo hemos hecho esto en una de las páginas que componen nuestra web. Para que funcione desde todas las páginas que forman nuestra web hemos de hacer esto para cada una de las páginas que la componen. A menos que nuestra web sea de marcos, en cuyo caso bastará con que añadamos el código a la página principal de los marcos, generalmente la llamada index.htm. Para evitar el tener que meter todo esto en cada una de las páginas (solo en el caso de páginas simples) podríamos haber previsto todo esto antes y haber creado una plantilla, en la cual, habríamos metido todo lo común a todas las páginas de nuestra web, como por ejemplo este código, el fondo de pantalla, el logotipo, etc, etc. Si vuestra web no es de marcos (o Frames) y no tenéis ganas de hacerlo página a página, hacedlo solo en la principal, pues es desde la que la mayoría de los visitantes agregan a Favoritos.
También os aviso, que los navegadores son algo caprichosillos y a veces, a pesar de tener el código bien, no muestran el icono. Por tanto, si estáis seguros de haberlo hecho todo bien y aún así no aparece, pensad que es posible que el navegador sea la causa. Esto no significa que los visitantes no lo vean, sino que tú no lo ves. También es normal que al vaciar la carpeta Temporal de Archivos de Internet del Windows dejes de ver dicho icono, hasta que vuelvas a cargar esa página de nuevo.
Música de fondo para mis páginas web
Quieres una canción de fondo para tu web? Que cada vez que se entre en ella suene una canción distinta? Que la canción no se corte cuando tus visitantes pasen de una página a otra? Que cada vez que se pase el ratón por un lugar, suene un sonido? Esto y mucho más lo podrás encontrar en este apartado.
Introdución a la Música de Fondo para tu Página Web.
Para empezar, os puedo decir que hay varios formatos para los archivos de sonido. Los más conocidos son los que terminan en .wav .mp3 y .mid. El primero tiene muy buena calidad pero ocupa mucho espacio (unas 20 megas por canción). El segundo suele tener la misma calidad y ocupa solo unas 5 megas, pero necesitas un programa especial que los ejecute, como por ejemplo, el conocido WinAmp. El último, el tipo .mid ocupa muy muy poco, pero no suena tan bien como los otros. Son los llamados archivos MIDI como el que podéis escuchar al entrar a esta web. Como ocupan tan poco, son los únicos que se suelen utilizar en las webs, de modo que nos ceñiremos a este tipo exclusivamente, hasta que la tecnología nos permita utilizar el resto sin problemas de tiempo de carga.
Como os he indicado, estos archivos, tipo MIDI, ocupan entre 5 Kb y 100 Kb. Para que os hagáis una idea, en un disquete de esos que ya nadie utiliza, caben unos 1400 Kb (1,4 megas). Como una de las cosas más importantes a la hora de crear webs es que sean rápidas, para no desesperar a nuestros visitantes, se eligen estos frente a los otros, que tardarían una eternidad en cargarse, y para entonces, el visitante seguro que se ha marchado aburrido de esperar. La razón por la cual ocupan tan poco, es porque no guardan la voz del cantante, sino solo la música. Además, no guardan la música como sonidos, sino que memorizan la partitura de una canción, y es tu propio ordenador el que la interpreta con ayuda de tu tarjeta de sonido. Debido a esto, es normal que el que tenga una tarjeta de sonido muy muy buena, escuche el mismo archivo MIDI mucho mejor que los que tienen tarjetas de audio más normalitas.
La desventaja es que no podemos crear un archivo MIDI nosotros mismos. Me refiero, claro, a Nosotros Mismos. Por supuesto, hay gente que controla muy bien ese tema y saca canciones con programas dedicados a eso, o con teclados o instrumentos musicales con salida MIDI, pero como dijo Michael Ende ……. eso es otra historia.
Más adelante os enseñaré donde conseguirlos y como incluirlos en vuestra web.
Dónde Conseguir Archivos de Música Midi
Pero cómo consigo la canción que yo quiero si no puedo crearla yo mismo fácilmente? Pues me temo que la única opción que tenéis es la de buscarla en la red. No os podéis ni imaginar la cantidad de canciones que andan por ahí, y es muy posible que con un buen buscador terminéis encontrándola.
Yo os recomiendo que utilicéis el buscador de http://www.lycos.es, pues indicándole que busque archivos tipo .MID e incluyendo la palabra o titulo de canción, o artista que queráis, os enseñará una lista más o menos larga, en función de lo famosa que sea la canción. Obviamente, si la canción es rara, o demasiado nueva, lo tendréis más difícil, pero para canciones famosillas no suele haber problema alguno. Haced la prueba, iros al buscador que os he dicho pinchando en la dirección de arriba. Haced clic en «Búsqueda Avanzada«, Elegid la opción «En Sonidos» y poned el título o el artista que buscáis y haced clic en «Buscar«.
Os aparecerá una lista (si habéis tenido suerte) de las canciones encontradas. Pinchando ahora en las líneas de color azul, os aparecerá la ventana que os comente. Elegís, por ejemplo, la opción, «Abrir este archivo desde su ubicación actual» si queréis escucharla, o en «Guardar este archivo a disco» para guardarlo en vuestro disco duro. Desechad los que acaben en .wav, pues ocupan mucho para una web.
Cuando os muestre la lista de canciones no tenéis más que hacer clic en la dirección que os indique. Tras hacer eso, os aparecerá una ventanita preguntado si queréis abrir (escuchar) el archivo sin guardarlo en vuestro disco duro o si queréis guardároslo directamente. Con la primera opción podréis escuchar la canción, lo cual tarda muy muy poco. Más o menos unos 20 segundos según lo que ocupe. Si os gusta pincháis otra vez en el mismo sitio y seleccionáis la opción «Guardar en el Disco Duro». Elegid bien donde queréis guardarlo para que luego no os volváis locos/locas buscándolo.
También podéis echar un vistazo a la sección Sonidos, donde he incluido las canciones que he ido encontrando por la red. Es muy posible que nuestros gustos no sean los mismos, pero creo que hay casi de todo. Podéis escucharlas o guardarlas en vuestro disco duro de la misma manera que con el buscador. Hacéis clic en ellas y os sale la ventanita que os comenté antes.
Dónde Conseguir Archivos de Música Midi
Pero cómo consigo la canción que yo quiero si no puedo crearla yo mismo fácilmente? Pues me temo que la única opción que tenéis es la de buscarla en la red. No os podéis ni imaginar la cantidad de canciones que andan por ahí, y es muy posible que con un buen buscador terminéis encontrándola.
Yo os recomiendo que utilicéis el buscador de http://www.lycos.es, pues indicándole que busque archivos tipo .MID e incluyendo la palabra o titulo de canción, o artista que queráis, os enseñará una lista más o menos larga, en función de lo famosa que sea la canción. Obviamente, si la canción es rara, o demasiado nueva, lo tendréis más difícil, pero para canciones famosillas no suele haber problema alguno. Haced la prueba, iros al buscador que os he dicho pinchando en la dirección de arriba. Haced clic en «Búsqueda Avanzada«, Elegid la opción «En Sonidos» y poned el título o el artista que buscáis y haced clic en «Buscar«.
Os aparecerá una lista (si habéis tenido suerte) de las canciones encontradas. Pinchando ahora en las líneas de color azul, os aparecerá la ventana que os comente. Elegís, por ejemplo, la opción, «Abrir este archivo desde su ubicación actual» si queréis escucharla, o en «Guardar este archivo a disco» para guardarlo en vuestro disco duro. Desechad los que acaben en .wav, pues ocupan mucho para una web.
Cuando os muestre la lista de canciones no tenéis más que hacer clic en la dirección que os indique. Tras hacer eso, os aparecerá una ventanita preguntado si queréis abrir (escuchar) el archivo sin guardarlo en vuestro disco duro o si queréis guardároslo directamente. Con la primera opción podréis escuchar la canción, lo cual tarda muy muy poco. Más o menos unos 20 segundos según lo que ocupe. Si os gusta pincháis otra vez en el mismo sitio y seleccionáis la opción «Guardar en el Disco Duro». Elegid bien donde queréis guardarlo para que luego no os volváis locos/locas buscándolo.
También podéis echar un vistazo a la sección Sonidos, donde he incluido las canciones que he ido encontrando por la red. Es muy posible que nuestros gustos no sean los mismos, pero creo que hay casi de todo. Podéis escucharlas o guardarlas en vuestro disco duro de la misma manera que con el buscador. Hacéis clic en ellas y os sale la ventanita que os comenté antes.
Agregar Música con HTML
Para insertar un sonido de fondo en una página, solo tenéis que acudir a ver el código HTML de la misma.
Veis una de las primeras líneas de código que empieza por <body....>? pues justo antes de esa línea cread otra y en ella escribís esto:
donde sonido.mid lo podéis sustituir por el nombre del archivo del sonido o música. Puede ser un formato mid, mp3, wev, etc, pero sabed que en función de qué tipo sea puede tardar más o menos en cargarse. Procurad evitar los formatos largos como MP3 y Wav.
Donde pone loop="1" podéis poner el número de veces que queréis que suene la canción. Con «1» solo suena una vez y depués nada.
No sé si esto funciona bién con todos los navegadores. Con iExplorer sí.
Una Canción Nueva cada Vez que Visitan Tu Web
No se si os habéis dado cuenta, pero cada vez que entráis en esta web se carga una canción distinta de manera aleatoria, de entre un montón de ellas. Creo que es una buena manera de hacer que la web sea algo diferente cada vez. De esta forma es posible que aburra menos, je, je, je, je.
Aunque la cosa es sencilla de realizar, requiere meterle mano al código HTM de vuestra web. Si no lo habéis hecho nunca creo que este es el momento de empezar. A algunos os asusta mucho eso de andar removiendo las tripas de la página, pero es sumamente importante que os vayáis familiarizando con ese código, o al menos, perderle el miedo.
Es muy útil conocerlo un poquito, pues cada vez que queráis incluir un contador, estadísticas, publicidad o algo similar, no tendréis más remedio que meteros en el código para incluir los códigos que os digan los que os ofrecen esos servicios. De todas formas, ya sabéis que no os voy a dejar solos. Os iré indicando pasito a pasito lo que tenéis que hacer para que no tengáis ningún problema. Ya sabéis que en ComoCrearTuWeb teneis el Curso de HTML para el que quiera profundizar un poco en él. Pero ahora, si queréis que suenen canciones distintas cada vez que entren en vuestra web, seguidme y vamos al lío.
Primero necesitaréis unas cuantas canciones. En principio bastarán 4 o 5 para empezar. Más tarde podréis incluir más, pues el procedimiento es el mismo sin más que variar algún dato sin importancia que ya os indicaré. Tenéis unas cuantas en la sección Herramientas Útiles.
Imaginemos que tenemos 5 archivos midi de 5 canciones que nos hemos grabado de algún sitio. Supongamos que se llaman así:
musica1.mid
musica2.mid
musica3.mid
musica4.mid
musica5.mid
Supondré que habéis sido buenos/buenas , que habéis leído las lecciones y recomendaciones de como crear webs y por tanto, habéis creado una carpeta llamada «sonidos» dentro de la carpeta donde guardáis toda vuestra página, donde meteréis esas 5 canciones. Ya sabéis que el orden es muy importante a la hora de crear webs.
Ahora hay que decidir en que página vamos a incluir esos archivos de música. Si os habéis decidido por una página simple, no hay duda, la página a modificar es esa misma. Pero si os habéis inclinado por la web de marcos o frames tenéis que decidir en que frame meter el sonido. Una vez decidido, será en ese archivo donde tenéis que meter el código que os muestro a continuación.
En el archivo que hayáis elegido hay que meter el siguiente código:
<SCRIPT><!– PRINCIPIO SCRIPT MIDI ALEATORIO –>5
day = new Date()
seed = day.getTime()
ran = parseInt(((seed – (parseInt(seed/1000,10) * 1000))/10)/100*nummidi + 1,10)ruta-del-archivo-de-sonido/musica1.mid»)
if (ran == (2))
midi=(«ruta-del-archivo-de-sonido/musica2.mid»)
if (ran == (3))
midi=(«ruta-del-archivo-de-sonido/musica3.mid»)
if (ran == (4))
midi=(«ruta-del-archivo-de-sonido/musica4.mid»)
if (ran == (5))
midi=(«ruta-del-archivo-de-sonido/musica5.mid») infinite AUTOSTART=TRUE>’)
var nummidi =
if (ran == (1))
midi=(»
document.write(‘<BGSOUND SRC= «‘ + midi + ‘» loop=
</SCRIPT><!– FINAL SCRIPT MIDI ALEATORIO –>
Por ahora tenéis que saber que lo único que tenéis que cambiar vosotros es lo que hay señalado en rojo. Donde pone var nummidi = 5 en lugar de 5, tenéis que poner el número de canciones que vais a incluir en la lista, de la cual, se elegirá una al azar. Además, si habéis llamado a los archivos de las canciones de forma distinta a la que os he indicado antes, tendréis que poner el nombre de dichos archivos en lugar de los nombres que hay en rojo. Si en lugar de 5 canciones vais a poner 10, tenéis que cambiar la segunda línea por var nummidi = 10 y luego, como en ese código solo hay 5 canciones, vosotros tenéis que incluir 5 trozos de código más, que corresponden a las otras 5 canciones, es decir. Por cada canción que añadáis, tenéis que añadir también el siguiente trozo de código:
if (ran == (6))
midi=(«ruta-del-archivo-de-sonido/musica6.mid»)
Pero poniendo el número de orden correspondiente y el nombre del archivo de sonido, que obviamente, será igual a como se llame ese archivo en vuestro disco duro (procurad que no lleven espacios en blanco o guiones bajos «_» ni símbolos raros).
Donde pone infinite, podéis poner el número de veces que queréis que se escuche esa canción, o podéis dejarlo como está si deseáis que suene infinitas veces.
En cuanto a lo que pone de «ruta-del-archivo-de-sonido/«, se trata de indicar la ruta del archivo donde se va a encontrar el archivo de sonido en vuestro servidor. Si no sabéis nada acerca de las Rutas de Archivos o tenéis dudas, os recomiendo encarecidamente que las repaséis, pues el 90% de los mensajes que recibo pidiéndome ayuda son por no tener claro estos conceptos. Si domináis eso, todo será muchísimo más fácil. Podéis encontrar información al respecto en Rutas, dentro de la Enciclopedia Web.
Una vez que habéis personalizado vuestro código solo tenéis que copiarlo en la página donde queréis insertar el sonido de fondo. Veamos como se hace.
Si trabajáis con el FrontPage 2.000 solo tenéis que abrir con él la página donde vais a incluirlo y pinchar en la pestaña de abajo, donde pone HTML. Si usáis el FrontPage Express haced clic en Ver y luego en HTML y veréis el código de vuestra página. El problema del FrontPage Express es que no os deja seleccionar y copiar en él, de modo que tenéis que hacerlo a mano. No obstante, si utilizáis el FrontPage 2.000 es posible que al hacer eso de seleccionar, copiar y pegar, el código que se pegue no sea igual que el que queríais vosotros, pues, no se por qué, lo deforma un poco, de modo que tendréis que revisarlo muy bien. Si lo hacéis a mano, aseguraros de copiarlo bien, pues de lo contrario no funcionará el invento. Si usais el Dreamweaver, podéis copiarlo y pegarlo.
Pero dónde lo copio? ¿En cualquier parte dentro del código? Pues no chavales y chavalas, no. Tenéis que copiarlo siempre dentro del BODY del código, es decir, en cualquier sitio entre la línea donde pone </BODY> y la que pone </BODY>. Por ejemplo, ponéis el cursor al final de la palabra <BODY> (está casi al principio del código), le dais al enter una vez de modo que baja al siguiente renglón, y allí escribís el código.
Una vez copiado el código, guardáis el archivo de la página y comprobáis como funciona. Si no funciona bien, es decir, si no suena nada, es muy posible que el fallo sea de las rutas de los archivos .mid, de modo que repasar la lección correspondiente o revisar las rutas que le habéis puesto a los archivos de sonido en el código.
Si os funciona bién, me lo decís para que visite vuestra web y vea lo buenos que sois, je, je, je. Espero que os haya gustado y que os sea de utilidad!!
Trucos Extra
En esta sección os muestro un sin fin de trucos que podéis aplicar en vuestas páginas. Tened cuidado, pues demasiados «fuegos artificiales» pueden resultar molestos a los visitantes, de modo que mejor no abusar. En cualquier caso, ahí queda eso. Cosillas que siguen al ratón, evitar que os copien, hacer página de inicio, redireccionar una página, texto en la barra de desplazamiento…. mejor entra y mira lo que hay.
Colección de Scripts para tu página web
En esta sección encontrarás un montón (poco a poco abrá más…) de cosillas que darán un toque especial a tu página web. A veces ese toque será tan especial que dara asco visitarla, je je je, así que mucho cuidado y no abuseis de estas cosas, pues acaban desesperando a los visitantes.
En cualquier caso, ahí los dejo. Todo es bueno si no se abusa….
Si sabes de algún Script interesante, dínoslo en el Foro y lo incluiremos en esta sección encantados. oki?
Definición. Qué es un Script?
Para que nos entendamos, un script podría ser una serie de líneas de código que son leidas por el servidor (por el ordenador del hosting donde están nuestras páginas) y que causan una serie de acciones que deseamos. Cada una de estas acciones pueden ocasionar efectos distintos según algunas variables de modo que cada vez que se ejecuten los resultados pueden ser distintos. Esto es básicamente lo que diferencia lo que conseguirmos con html y lo que conseguimos con Scripts, pues en html el resultado siempre es el mismo, mientras que como acabo de decir, usando Scripts cada vez pueden resultar cosas distintas. Vamos a verlo con un ejemplo.
Usando Html puedo conseguir que en la página web aparezca este texto:
Hoy es 12 de febrero de 2008.
Esto se consigue con este código html:
<p>Hoy es 12 de febrero de 2008</p>
Tanto si visitas la web hoy como si la visitas cualquier otro día, el resultado es siempre el mismo, un resultado estático (no cambia), la misma fecha, el mismo texto. No obstante, usando Scripts podemos conseguir resultados dinámicos (que varian, pues cada día es un resultado distnto), o lo que es lo mismo, que se muestre la fecha actual.
<? echo date ( "h:i:s" , $fecha ); ?>
Esa es la diferencia básica entre Html y Scripts.
Por su puesto, la diferencia no queda simplemente en fechas autoactualizables. Hay cientos de acciones que podemos conseguir si sabemos cómo. En estas páginas no creo que lo veamos todo, pero al menos aprenderás lo básico para hacer tus primeros pinitos y lo justo para poder investigar por tu cuenta lo que no encuentres acá.
Efecto Nieve para tu página web
Aunque el efecto original es el de una gran nevada, este script puede usarse con cualquier símbolo e inlcuso texto. El efecto nieve se consigue con un asterisco «*», pero puedes cambiarlo por una letra o palabra para conseguir otros efectos distintos.
Basta copiar este código justo después de la línea del <BODY…> para conseguir el efecto.
Puedes personalizarlo un poco. Se pueden cambiar los colores, velocidad de caida, etc.
Enlace para que tu visitante ponga tu página web como su página de inicio
Con este otro código podrás colocar un enlace de estos que cuando el visitante hace clic sobre él tu página web pasará a ser su página de inicio en su navegador.
No se hasta que punto puede ser interesante. Quizás se algo pesado. ¿A tí te gusta encontrártelo en las webs que visitas? Si la respuesta es no…. ya sabes.
Basta copiar este código donde deseas que aparezca el enlace. En el código de abajo has de cambiar donde pone «http://tu-direccion.com» por la URL de tu página.
Puedes personalizarlo un poco definiendo las propiedades de estilo, o bien en la hoja de estilo o bien en la cabecera de la página. Este es un ejemplo:
Esto es un ejemplo de lo que os saldría (Si hacéis clic seré vuestra página de Inicio, je je):
Si tienes algún problema ya sabes que puedes contar con nosotros en el Foro. Nos leemos allí 
!
