All Articles Web
L'avenir du Web est ici: Utilisation de jQuery, HTML5 et CSS3 au marché de votre musique en ligne
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 est une bibliothèque JavaScript écrite par John Resig qui le rend facile de faire des applications web interactives. jQuery a la possibilité de charger du code à partir d'autres fichiers javascript afin de créer une expérience utilisateur riche, comme les menus interactifs, formulaires, des animations, et des éléments d'interface utilisateur. En fait, jQuery pouvez remplir une page Web avec les composants que vous définissez par programmation. C'est un langage assez compact et sensible à travailler avec et vous pouvez l'utiliser pour l'affichage de votre musique et vidéo pour le web à l'expérience.

Dans cet exemple, je vais vous montrer comment utiliser le plugin jQuery pour le cycle pour faire un diaporama simple avec des paramètres contrôlant la vitesse et fade in / out. Avec cette technique de base terminée, vous pouvez développer votre site rapidement et facilement.


01 - jQuery

La figure 1 montre une capture d'écran d'une page Web qui exécute le code jQuery. Cette approche s'appuie sur le post précédent, j'ai présenté montrant comment utiliser le nouvel élément audio dans HTML5. Exemple de code 1 montre le fichier réel dans son intégralité. Vous pouvez voir un exemple du résultat à ce lien:

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

Figure 1: Un div montrant l'une des 5 images en rotation, avec un élément audio et multimédias HTML5 trophée logo, rendu dans Safari

Vous pouvez télécharger le plugin jQuery ici cycle de http://jquery.malsup.com/cycle/ . De ce point, c'est juste une question d'ouvrir photoshop ou de votre éditeur d'image de choix pour définir la taille et le nom de chaque image dans le diaporama.


02 - Adoption HTML5

Les navigateurs tels que Internet Explorer ne disposent pas encore la capacité à analyser le schéma de normes nouvelles HTML5. Un schéma est juste une façon élégante de dire qu'il ya une rime et la raison aux parties d'une collection. Les parties de HTML5 sont constitués d'éléments qui donnent un sens aux moteurs de recherche, les navigateurs et les développeurs web.

Les navigateurs modernes tels que la famille webkit de Mozilla Firefox, Safari et Firefox sont préparés pour l'avenir de développeurs web besoins en adoptant les normes HTML5 avant la spécification est approuvée par le World Wide Web Consortium (W3C). Heureusement pour nous, en tant que développeurs multimédia, nous sommes en mesure d'atteindre le public sur le web avec rich media et des expériences interactives pour présenter notre audio et vidéo, tout en améliorant notre Search Engine Optimization (SEO) afin d'élargir ce public.

Comme le web dépasse la couverture de la télévision et de radio, il devient de plus en plus important pour les artistes d'exploiter la puissance de l'Internet afin d'atteindre ceux qui ont des points communs avec eux-mêmes. Collaboration par l'intermédiaire des applications web comme Facebook et Twitter peuvent améliorer votre portée horizontale et verticale. C'est à dire, non seulement vous augmenter le nombre des compétences acquises, mais peut aussi approfondir votre compréhension de ces compétences par la recherche des techniques trouvées sur l'internet et pouvez joindre vos contributions à ces ressources, faciliter l'apprentissage à l'échelle mondiale.


03 - Less is More

Les photos parlent d'un millier de mots, comme ils disent, et généralement les utilisateurs s'attendent à trouver pourquoi votre site est intéressant dans une question des secondes de visiter votre site. Combien d'entre nous juger la musique par les premières mesures que nous entendons?

N'importe quel éditeur de texte peut être utilisé (même bloc-notes ou un éditeur de texte) pour créer le code nécessaire pour faire une page web avec du contenu multimédia. Comme une Exemple de code l'indique, une série d'images sont chargées et affichées via le navigateur, avec des dimensions définies et divers autres paramètres. Il ya des possibilités pratiquement illimitées pour la présentation de votre contenu sur le web, mais ces options peuvent être organisées en trois principales technologies: css, javascript, html et.

Avis en 1 Exemple de code ( Code Listing 1 Télécharger ) qui img_1.jpg est d'une certaine taille. Cela doit correspondre à la dimension réelle de l'image, afin que le code devrait être mis à jour par la taille de votre image, bien sûr. En fait, de nombreuses bibliothèques JavaScript sont comme ça, ils contiennent les principales routines pour faire de votre page Web se comportent d'une certaine façon, mais laisser un peu de paramètres que vous pouvez personnaliser en fonction de vos besoins individuels créatif.


04 - L'avenir du Web

Même si devenir très familier avec JavaScript donnerait toute une vie de travail productif dans le domaine de la conception web, vous n'aurez besoin que de comprendre un petit sous-ensemble du JavaScript pour utiliser ses potentiels.

Les technologies futures telles que CSS3 vous permettra de transférer vos compétences existantes Adobe Flash sur tous les navigateurs modernes, même à ceux qui ne supporte pas Flash!

Vous pouvez copier / coller le code du 1 Exemple de code dans votre éditeur de texte favori, et de le transférer à votre hébergeur de se lever et courir vite avec ce slideshow jQuery. J'utilise des pommes de service mobile me pour accueillir mon site, mais dans un futur article, ainsi discuter de la façon de créer votre hébergeur propre!


05 - Structure de la page

Pour débutants aux développeurs, il est important de comprendre que d'une page Web ne fonctionne que si les images, javascript, et d'autres fichiers sont dans les bons dossiers. Tous les fichiers html doit être dans le répertoire racine, c'est-à-dire le répertoire qui contient tous les autres.

La structure principale d'une page web, en un mot, est une tête et un corps, enveloppé dans un conteneur HTML. Dans la section de tête, vous pouvez insérer le code javascript et css directement, et dans le corps que vous définissez les médias visuels et sonores, comme des images, vidéo et audio de différents formats.


06 - L'aspect social

Je suis d'avis que d'une page Web doit être très simple pour un artiste, de présenter des morceaux de travailler avec un investissement minime par le spectateur. En d'autres termes, il devrait y avoir peu d'avance les efforts consacrés à expérimenter l'œuvre que vous créez et publiez sur le Web. C'est parce que la qualité perçue des formes d'art sont très subjectives de nous en tant qu'êtres humains, et non deux personnes peuvent réagir de la même façon à une œuvre d'art. La musique est une forme d'art très émotionnel, et l'auditeur peut être très particulier sur le type de sentiment que la musique dépeint.

Avec le web devient un lieu de rencontre sociale de plus en plus, un diaporama simple avec un peu de musique en arrière-plan permet une bonne diversion dans un environnement occupé, que ce soit travailler ou jouer. En fait, une section d'une page Web peut être rendu visible à l'intérieur une autre section d'une autre page Web. C'est l'essence même des applications Web, par opposition aux pages web, en ce sens qu'il est une capacité interchangeables de votre contenu sur le web, de multiplier l'exposition et son utilisation dans de nombreux contextes. Par exemple, un site de nouvelles peut être en mesure d'accéder directement à la dernière pièce de votre site qui met en valeur une zone d'intérêt particulier ou une nouvelle version.


07 - Pour aller plus loin

En tant que votre compréhension de la façon dont se comportent les sites Web devient plus détaillé, vous pouvez commencer à développer des pages web plus sophistiqué, et peut-être même produire des pages pour d'autres artistes dans un tel collectif comme un net label, ou même une société de production à part entière. Vous pouvez ensuite intégrer votre contenu dans le commerce ou la syndication dans le domaine numérique. Beaucoup de soumissions youtube a accumulé des centaines de milliers de dollars seulement du revenu publicitaire placé aux côtés des médias! Imaginez combien de façons votre contenu peut être consulté tout en l'intégrant dans le world wide web. Son assez impressionnant quand vous avez vraiment s'arrêter et à réfléchir sur la façon dont le contenu est rapidement redondante distribuée en ligne.

La prochaine fois, je vais vous expliquer les détails de comment s'y prendre pour ajouter votre contenu sur le web, en détaillant les étapes que j'ai parcouru, afin de créer mon propre serveur Web, de sorte que vous et moi pouvons créer des sites Web pour les amis et clients, tout en en évitant les coûts importants qui peuvent s'accumuler lors de l'embauche d'une entreprise pour héberger votre site pour vous.

J'espère que vous serez capable d'utiliser cette technique pour améliorer jQuery diaporama de vos pages web, ou simplement pour atteindre le jalon d'ajouter votre propre contenu sur le web avec vos propres mains nues. Le web est en attente, maintenant ... briller!


Télécharger 1 Exemple de code ici.

Comments (0)

You must be logged in to comment. Login Now

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: