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

Premium Accesso libero

Accedere alla nostra libreria di articoli Hub Premium, file di progetto e il primo 10% di ogni tutorial-video dalla libreria di tutorial online .

Crea un account gratuito ora!

Il futuro del Web Ecco: Usando jQuery, HTML5 e CSS3 al mercato la propria musica online
  • Il futuro del Web Ecco: Usando jQuery, HTML5 e CSS3 al mercato la propria musica online

Tradotto da Google Translate

jQuery è una libreria JavaScript scritto da John Resig che lo rende facile da rendere le applicazioni web interattive. jQuery ha la possibilità di caricare codice da altri file javascript per creare esperienze utente ricche come menu interattivi, forme, animazioni e gli elementi dell'interfaccia utente. In effetti, jQuery possibile compilare una pagina web con componenti che si definiscono programmaticamente. E 'un linguaggio piuttosto compatto e sensibile con cui lavorare e si può utilizzare per visualizzare la vostra musica e video per il web di esperienza.

In questo esempio, vi mostrerò come utilizzare il plugin di jQuery ciclo per fare una presentazione semplice con parametri che controllano la velocità e la dissolvenza in / out. Con questa tecnica di base completa, è possibile espandere il vostro sito in modo rapido e conveniente.


01 - jQuery

La Figura 1 mostra uno screenshot di una pagina web di eseguire il codice jQuery. Questo si basa sul precedente post ho presentato che mostra come utilizzare il nuovo elemento audio in HTML5. Codice 1 mostra il file vero e proprio nella sua interezza. È possibile visualizzare un esempio del risultato a questo link:

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 che mostra una delle 5 immagini a rotazione, con un elemento HTML5 audio e multimediali logo trofeo, reso in Safari

È possibile scaricare il plugin per jQuery ciclo qui http://jquery.malsup.com/cycle/ . Da quel momento, è solo una questione di aprire Photoshop o il vostro editor di immagini di scelta per definire la dimensione e il nome di ogni immagine nella presentazione.


02 - Adozione HTML5

Browser come Internet Explorer non hanno ancora la possibilità di analizzare lo schema del nuovo standard HTML5. Uno schema è solo un modo elegante per dire che c'è una rima e ragione alle parti di una collezione. Le parti di HTML5 consistono di elementi che danno senso ai motori di ricerca, browser e sviluppatori web.

I browser moderni, come la famiglia webkit di Mozilla Firefox, Safari e Firefox sono preparati per il futuro degli sviluppatori web ha bisogno, adottando gli standard HTML5 prima della specifica è approvato dal World Wide Web Consortium (W3C). Fortunatamente per noi come sviluppatori di contenuti multimediali, siamo in grado di raggiungere il pubblico sul web con contenuti multimediali e di esperienze interattive per presentare i nostri audio e video, migliorando nel contempo la nostra ottimizzazione dei motori di ricerca (SEO) al fine di espandere quel pubblico.

Come il web supera la copertura di programmazione televisiva e radiofonica, diventa sempre più importante per gli artisti di sfruttare la potenza di Internet per raggiungere coloro che hanno in comune con se stessi. Collaborazione attraverso applicazioni web come Facebook e Twitter possono migliorare la vostra portata orizzontale e verticale. Vale a dire, non solo aumentare il numero di competenze acquisite, ma anche in grado di approfondire la comprensione di tali competenze attraverso la ricerca di tecniche trovato su internet e possono attaccare i vostri contributi a tali risorse, facilitare l'apprendimento su scala globale.


03 - Less is More

Immagini parlano più di mille parole, come si dice, e di solito gli utenti si aspettano di scoprire perché il vostro sito è interessante in pochi secondi di visitare il vostro sito. Quanti di noi giudicare musica le prime battute che si sente?

Qualsiasi editor di testo possono essere utilizzati (anche notepad o un editor di testo) per creare il codice necessario per creare una pagina web con contenuti multimediali. Come Codice 1 suggerisce, una serie di immagini vengono caricati e visualizzati tramite il browser, con dimensioni definite e vari altri parametri. Ci sono possibilità virtualmente illimitate per presentare i vostri contenuti sul web, ma queste opzioni possono essere organizzate in tre principali tecnologie: css, javascript e html.

Si noti in Codice 1 ( Codice 1 Scaricare ) che img_1.jpg è una certa dimensione. Questo deve corrispondere alla dimensione effettiva dell'immagine, in modo che il codice dovrebbe essere aggiornato per la dimensione delle immagini, naturalmente. Infatti, molte librerie JavaScript sono così, che contengono le routine principale per rendere la vostra pagina web si comportano in un certo modo, ma lascia alcuni parametri che è possibile personalizzare in base alle proprie esigenze creative.


04 - Il futuro del Web

Anche se diventare intimamente familiare con JavaScript darebbe una vita di lavoro produttivo nel campo del web design, si può solo bisogno di capire un piccolo sottoinsieme di JavaScript per sfruttare il suo potenziale.

Tecnologie del futuro come CSS3 vi permetterà di trasferire le competenze esistenti Adobe Flash in tutti i browser moderni, anche a quelli che non supportano Flash!

È possibile copiare / incollare il codice dal Codice 1 nel vostro editor di testo di scelta, e caricarlo sul tuo host web per ottenere rapidamente operativi con questo slideshow jQuery. Io uso le mele servizio Mobile Me per ospitare il mio sito web, ma in un prossimo articolo, e discutere su come creare il vostro hosting parere!


05 - Struttura Pagina

Per gli sviluppatori principianti, è importante capire che una pagina web funziona solo se le immagini, javascript, e altri file contenuti nelle cartelle corrette. Tutti i file html dovrebbe essere nella directory principale, vale a dire, la directory che contiene tutti gli altri.

La struttura principale di una pagina web, in poche parole, è una testa e un corpo, avvolto in un contenitore html. Nella sezione testa, è possibile inserire codice Javascript e CSS direttamente, e nel corpo si definiscono i mezzi di comunicazione visibile e udibile, come immagini, video e audio di vari formati.


06 - l'aspetto sociale

Io sono del parere che una pagina web dovrebbe essere molto semplice per un Artista, per mostrare pezzi di lavoro con un investimento minimo da parte dello spettatore. In altre parole, ci dovrebbe essere poco up-front sforzo speso a sperimentare l'opera d'arte che si crea e post sul web. Questo perché la qualità percepita di forme d'arte sono altamente soggettivi a noi come esseri umani, e non due persone possono rispondere allo stesso modo ad un pezzo d'arte. La musica è una forma d'arte molto emotivo, e l'ascoltatore può essere molto particolare sul tipo di sensazione che la musica ritrae.

Con il web diventando un luogo sempre più sociale, una presentazione semplice con un po 'di musica in sottofondo rende un diversivo piacevole in un ambiente affollato, sia esso di lavoro o di gioco. Infatti, una sezione di una pagina web può essere resa visibile all'interno di un'altra sezione di un'altra pagina web. Questa è l'essenza di applicazioni web, al contrario di pagine web, in quanto vi è una capacità intercambiabile dei contenuti sul web, di moltiplicare l'esposizione e la fruibilità in contesti diversi. Ad esempio, un sito di notizie può essere in grado di accedere direttamente l'ultimo pezzo del tuo sito web che presenta una particolare area di interesse o nuova release.


07 - Prendere ulteriormente

Man mano che la comprensione di come si comportano i siti web diventa più dettagliate, è possibile iniziare a sviluppare pagine web più sofisticati, e forse anche produrre pagine per altri artisti in una collettiva ad un net label o addirittura una vera e propria società di produzione. È quindi possibile integrare il contenuto in commercio o syndication nel dominio digitale. Molti contributi youtube hanno guadagnato centinaia di migliaia di dollari solo dalle entrate annuncio inserito accanto alla media! Immaginate quanti modi i contenuti sono accessibili solo attraverso l'integrazione in world wide web. Il suo abbastanza travolgente quando si ha realmente fermarsi a riflettere su quanto velocemente il contenuto è ridondante distribuito on-line.

La prossima volta, spiegherò i dettagli di come fare per aggiungere i tuoi contenuti per il web, da dettagliare i passaggi che ho attraversato in modo da impostare il mio server web, in modo che voi ed io possiamo creare siti web per amici e clienti, mentre di evitare i notevoli costi che possono accumularsi durante l'assunzione di un azienda per ospitare il vostro sito per voi.

Spero che sarete in grado di utilizzare questa tecnica slideshow jQuery per migliorare le pagine web, o semplicemente per raggiungere il traguardo di aggiungere i propri contenuti per il web con le vostre mani nude. Il web è in attesa, ora ... brillare!


Scarica Codice 1 Qui.

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