All Articles Web
El futuro de la Web está aquí: Usando jQuery, HTML5 y CSS3 para promocionar su música en línea
Andrew Turner on Sat, June 4th 0 comments
jQuery is a JavaScript library written by John Resig which makes it easy to make interactive web applications. jQuery has the ability to load code from other javascript files in order to create rich u

jQuery es una librería JavaScript escrito por John Resig que hace que sea fácil de hacer aplicaciones web interactivas. jQuery tiene la capacidad de carga de otros archivos de código Javascript con el fin de crear experiencias de usuario ricas, tales como menús interactivos, formas, animaciones y elementos de interfaz de usuario. De hecho, jQuery puede rellenar una página web con componentes que definen programáticamente. Es un lenguaje bastante compacta y razonable para trabajar y se puede utilizar para mostrar su música y vídeo para la web a la experiencia.

En este ejemplo, yo te mostraré cómo usar el plugin de jQuery ciclo con el fin de hacer una presentación sencilla con los parámetros de control de velocidad y fade in / out. Con esta técnica básica completa, se puede ampliar su sitio de forma rápida y cómoda.


01 - jQuery

La figura 1 muestra una captura de pantalla de una página web que ejecuta el código jQuery. Esto se basa en el post anterior he presentado que muestra cómo utilizar el nuevo elemento de audio en HTML 5. Listado de Código 1 muestra el archivo real en su totalidad. Puede ver un ejemplo del resultado en este enlace:

http://www.electronicmusic101.com/jqslideshow.html .

Figure 1: A div showing one of 5 rotating images, with an audio element and html5 multimedia “trophy” logo, rendered in Safari

Figura 1: Un div que muestra uno de los 5 rotación de imágenes, con un elemento de audio y multimedia HTML5 logo trofeo, dictada en Safari

Usted puede descargar el plugin de jQuery ciclo aquí http://jquery.malsup.com/cycle/ . Desde ese momento, es sólo cuestión de abrir Photoshop o el editor de imágenes de elección para definir el tamaño y el nombre de cada imagen en la presentación.


02 - Adopción de HTML5

Navegadores como Internet Explorer aún no tienen la capacidad de analizar el esquema de las nuevas normas HTML5. Un esquema es sólo una forma elegante de decir que hay una rima y la razón a las partes de una colección. Las partes de HTML5 consisten en elementos que dan sentido a los motores de búsqueda, navegadores y desarrolladores web.

Los navegadores modernos, como la familia WebKit de Mozilla Firefox, Safari y Firefox se preparan para el futuro de las necesidades de los desarrolladores web mediante la adopción de las normas antes de la especificación HTML 5 es aprobado por la World Wide Web Consortium (W3C). Por suerte para nosotros como desarrolladores multimedia, somos capaces de llegar a las audiencias en la web con los medios de comunicación ricos y experiencias interactivas para mostrar nuestro audio y video, además de mejorar nuestro posicionamiento en buscadores (SEO) con el fin de ampliar ese público.

A medida que la web supera la cobertura de la programación radial y televisiva, se hace cada vez más importante para los artistas para aprovechar el poder de Internet con el fin de llegar a aquellos que tienen puntos en común con ellos mismos. Colaboración a través de aplicaciones web como Facebook y Twitter puede mejorar su alcance horizontal y vertical. Es decir, no sólo aumentar el número de las habilidades aprendidas, pero también puede profundizar en el conocimiento de esas habilidades mediante la investigación de técnicas que se encuentran en Internet y se puede conectar sus contribuciones a los recursos, facilitar el aprendizaje a escala global.


03 - Menos es Más

Imágenes hablan más que mil palabras, como se suele decir, y por lo general los usuarios esperan para averiguar por qué su sitio es interesante en cuestión de segundos de visitar su sitio web. ¿Cuántos de nosotros juzgar la música de los primeros compases que escuchamos?

Cualquier editor de texto puede ser utilizado (incluso el bloc de notas o un editor de texto) para crear el código necesario para hacer una página web con contenido multimedia. Como Listado de Código 1 indica, una serie de imágenes se cargan y se muestran a través del navegador, con dimensiones definidas y otros parámetros. Las posibilidades son prácticamente ilimitadas para la presentación de su contenido en la web, pero esas opciones se pueden organizar en tres tecnologías principales: CSS, JavaScript y HTML.

Observe en el listado de código 1 ( Listado de Código 1 Descarga ) que img_1.jpg es un cierto tamaño. Debe coincidir con la dimensión real de la imagen, para que el código debe ser actualizado por el tamaño de las imágenes, por supuesto. De hecho, muchas bibliotecas de JavaScript son como este, que contiene las principales rutinas para hacer de su página web se comportan de cierta manera, pero deja algunos parámetros que se pueden personalizar para satisfacer sus necesidades creativas.


04 - El futuro de la Web

A pesar de ser muy familiarizado con JavaScript daría toda una vida de trabajo productivo en el campo del diseño web, puede que sólo necesite para comprender un pequeño subconjunto de JavaScript para utilizar todo su potencial.

Las tecnologías del futuro, como CSS3 le permitirá transferir sus habilidades existentes Adobe Flash a través de todos los navegadores modernos, incluso a aquellos que no soportan Flash!

Usted puede copiar / pegar el código del listado de código 1 en tu editor de texto de su elección, y subirlo a su servidor web para empezar a trabajar rápidamente con esta presentación de diapositivas jQuery. Yo uso de servicios móviles me manzanas para alojar mi sitio web, pero en un futuro artículo, así discutir la manera de crear su propio servicio de hosting!


05 - Página Estructura

Para el principiante a los desarrolladores, es importante entender que una página web sólo funciona si las imágenes, javascript y otros archivos en las carpetas correctas. Todos los archivos de HTML debe estar en el directorio raíz, es decir, el directorio que contiene todos los demás.

La estructura principal de una página web, en pocas palabras, es una cabeza y un cuerpo, envuelto en un contenedor HTML. En la sección de la cabeza, puede insertar código JavaScript y CSS directamente, y en el cuerpo de definir los medios de comunicación visible y audible, tales como imágenes, vídeo y audio de varios formatos.


06 - El aspecto social

Yo soy de la opinión de que una página web debe ser muy simple para un artista, para mostrar las piezas de trabajo con una inversión mínima por parte del espectador. En otras palabras, debe haber algo por adelantado el esfuerzo empleados en la experiencia de la obra de arte que se crea y publicar en la Web. Esto se debe a la calidad percibida de las formas de arte son muy subjetivas para nosotros como humanos, y no hay dos personas pueden responder de la misma manera que una obra de arte. La música es una forma de arte muy emocional, y el oyente puede ser muy particular sobre el tipo de sensación de que la música representa.

Con la web un lugar cada vez más social y más, una presentación de diapositivas simple con un poco de música en el fondo hace una diversión agradable en un entorno muy ocupado, ya sea trabajando o jugando. De hecho, una sección de una página web se pueden hacer visibles dentro de otra sección de otra página web. Esta es la esencia de las aplicaciones web, a diferencia de las páginas web, en la que hay una capacidad de intercambiar su contenido en la web, para multiplicar la exposición y la facilidad de uso en muchos contextos. Por ejemplo, un sitio de noticias puede ser capaz de acceder directamente a la pieza más reciente de su sitio web que muestra un área particular de interés o la nueva versión.


07 - Si lo toma más

A medida que su comprensión de cómo se comportan los sitios web se hace más detallada, usted puede comenzar a desarrollar páginas web más sofisticados, e incluso generar páginas de otros artistas en un colectivo tales como una etiqueta de red o incluso un auténtico compañía de producción. A continuación, puede integrar su contenido en comercio o la distribución en el dominio digital. Muchas presentaciones youtube han ganado cientos de miles de dólares sólo a partir de los ingresos por anuncios colocados junto a los medios de comunicación! Imagínese cuántas maneras su contenido se puede acceder sólo por su integración en la World Wide Web. Es bastante abrumador cuando realmente parar y pensar sobre lo rápido que el contenido se distribuye de forma redundante en línea.

La próxima vez, voy a explicar los detalles de cómo hacer para agregar su contenido a la web, detallando los pasos que caminó a través con el fin de crear mi propio servidor web, de modo que usted y yo podemos crear sitios web para amigos y clientes, mientras que evitar los costos sustanciales que se pueden acumular la hora de contratar una empresa para alojar su sitio web para usted.

Espero que usted será capaz de utilizar esta técnica de pase de diapositivas jQuery para mejorar sus páginas web, o simplemente para alcanzar el hito de añadir su propio contenido para la web con sus propias manos. La web está a la espera, ahora ... ¡brilla!


Descargar Lista de Código 1 aquí.

Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: