X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Accès Premium gratuitement

Accédez à notre bibliothèque complète des articles Hub Premium, les fichiers projet et les premiers 10% de chaque Cours-vidéo de la Bibliothèque Didacticiel en ligne .

Créez votre compte gratuit!

L'avenir du Web est ici: Utilisation de jQuery, HTML5 et CSS3 au marché de votre musique en ligne
  • L'avenir du Web est ici: Utilisation de jQuery, HTML5 et CSS3 au marché de votre musique en ligne

Traduit par Google Translate

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.

Andrew Turner

Andrew Turner | Articles by this author

Andrew Turner, founder of Deep Life Records (deepliferecords.com ), has released music on N*Soul Records (LA, CA), PWM Records (Australia), Giant Squid (SD), subVariant (CHI, IL) and has remixed and produced tracks since Windows 95's plug-n-play feature was all the rage. His new project under the alias JahWarrior is inspired by the artists from the Blood and Fire label from the early 70?s, who used innovative methods of production using the mixing desk itself to produce "effect motifs" such as feedback loops, and creatively manual automation on the sends. Andy is also highly influenced by the likes of Orb and Autechre, who employ on-the-fly and stochastic, algorithmic, generative methods in music production. He has performed at festivals such as LifeLight Festival, Cornerstone Festival, has hosted a brief residency at Brazil in NOLA, Club Pompeii in Phoenix, and promoted house parties and club events in the Mid-West when he was a young'in. Currently he is using max for live, reaktor, processing, arduino, and open sound control with multi-touch interfaces like the iPad and monome. His niece Ruth sometimes assists him in the studio with her new Casio SA-45.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link