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

Acesso Premium Free

Acesso a nossa biblioteca completa de artigos Hub Premium, arquivos de projeto e os primeiros 10% de cada Tutorial-Video da Biblioteca Tutorial on-line .

Criar sua conta gratuita agora!

O futuro da Web é Aqui: Usando jQuery, HTML5 e CSS3 no mercado seu Música Online
  • O futuro da Web é Aqui: Usando jQuery, HTML5 e CSS3 no mercado seu Música Online

Traduzido pelo Google Translate

jQuery é uma biblioteca JavaScript escrito por John Resig o que o torna fácil de fazer aplicações web interativas. jQuery tem a capacidade de carregar o código de outros arquivos javascript para criar experiências ricas de usuário, como menus interativos, formulários, animações e elementos de interface do usuário. Na verdade, jQuery pode preencher uma página com os componentes que você define programação. É uma linguagem bastante compacto e sensível para trabalhar com e você pode usá-lo para a exibição de sua música e vídeo para a web a experiência.

Neste exemplo, vou mostrar-lhe como usar o plugin ciclo de jQuery para fazer uma apresentação de slides simples, com parâmetros de controle de velocidade e desaparecer dentro / fora. Com esta técnica básica concluída, você pode expandir o seu site de forma rápida e conveniente.


01 - jQuery

A Figura 1 mostra um screenshot de uma página web de executar o código jQuery. Esta baseia-se no post anterior eu submeti mostrando como usar o novo elemento de áudio em HTML5. Listagem de código 1 mostra o arquivo real na sua totalidade. Você pode ver um exemplo do resultado neste 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: A div que mostra um dos 5 imagens de rotação, com um elemento de áudio e multimídia html5 logotipo troféu, prestados no Safari

Você pode baixar o plugin jQuery ciclo aqui http://jquery.malsup.com/cycle/ . A partir desse ponto, é apenas uma questão de abrir o Photoshop ou o seu editor de imagem de escolha para definir o tamanho eo nome de cada imagem na apresentação de slides.


02 - Adoção HTML5

Navegadores como o Internet Explorer ainda não têm a capacidade de analisar o esquema de novos padrões HTML5. Um esquema é apenas uma maneira elegante de dizer que há uma rima e motivo para as peças de uma coleção. As partes do html5 consistem em elementos que dão significado aos motores de busca, navegadores e desenvolvedores web.

Navegadores modernos, como a família webkit do Mozilla Firefox, Safari, Firefox e estão preparados para o futuro de desenvolvedores web precisa, adotando os padrões html5 antes da especificação é aprovado pelo World Wide Web Consortium (W3C). Felizmente para nós, desenvolvedores multimídia, somos capazes de atingir o público na web com mídia rica e experiências interativas para mostrar o nosso áudio e vídeo, ao mesmo tempo melhorar o nosso motor de pesquisa otimização (SEO) a fim de ampliar esse público.

Como a web ultrapassa a cobertura da televisão e programação de rádio, torna-se cada vez mais importante para os artistas para aproveitar o poder da internet, a fim de alcançar aqueles que têm pontos em comum com eles mesmos. Colaboração através de aplicações web como Facebook e Twitter podem melhorar seu alcance horizontal e vertical. Isto é, você não só aumentar o número de habilidades aprendidas, mas também pode aprofundar sua compreensão dessas habilidades, pesquisando técnicas encontradas na internet e pode anexar suas contribuições a esses recursos, facilitando o aprendizado em uma escala global.


03 - Menos é Mais

Imagens falam mais que mil palavras, como eles dizem, e, geralmente, os usuários vão esperar para descobrir por que seu site é interessante em questão de segundos de visitar o seu site. Quantos de nós julgar a música por os primeiros compassos que ouvimos?

Qualquer editor de texto pode ser utilizado (mesmo bloco de notas ou editor de texto) para criar o código necessário para fazer uma página Web com conteúdo multimídia. Listagem de código como uma sugere, uma série de imagens são carregados e exibidos através do browser, com dimensões definidas e vários outros parâmetros. Há possibilidades praticamente ilimitadas para apresentar o seu conteúdo na web, mas aqueles opções podem ser organizados em três tecnologias principais: css, javascript e html.

Observe na Listagem de código 1 ( Listagem de código 1 Download ) que img_1.jpg tem um determinado tamanho. Esta deve coincidir com a dimensão real da imagem, para que o código deve ser atualizado por o tamanho das imagens, é claro. Na verdade, muitas bibliotecas JavaScript são assim, eles contêm as rotinas principais para fazer a sua página web se comportar de certa maneira, mas deixar alguns parâmetros que você pode personalizar para atender às suas necessidades individuais criativo.


04 - O futuro da Web

Apesar de tornar-se intimamente familiarizado com JavaScript renderia uma vida de trabalho produtivo no campo do design web, você pode precisar apenas de compreender um pequeno subconjunto de JavaScript para utilizar o seu potencial.

Tecnologias futuras, como CSS3 irá permitir-lhe transferir os seus conhecimentos existentes Adobe Flash através de todos os navegadores modernos, mesmo para aqueles que não suportam Flash!

Você pode copiar / colar o código da Listagem de código 1 em seu editor de texto de escolha, e enviá-lo para o seu host para se levantar e correr rapidamente com este slideshow jQuery. Eu uso maçãs serviço móvel para me hospedar meu site, mas em um artigo futuro, também discutir como criar seu próprio serviço de hospedagem!


05 - Estrutura da Página

Para os desenvolvedores iniciantes, é importante compreender que uma página web só funciona se as imagens, javascript, e outros arquivos estão nas pastas corretas. Todos os arquivos html devem estar no diretório raiz, ou seja, o diretório que contém todos os outros.

A estrutura principal de uma página web, em poucas palavras, é uma cabeça e um corpo, envolto em um recipiente html. Na seção de cabeça, você pode inserir javascript e css código diretamente, e no corpo que define os meios de comunicação visível e audível, como imagens, vídeo e áudio de vários formatos.


06 - O aspecto social

Eu sou da opinião de que uma página web deve ser muito simples para um artista, para mostrar peças de trabalho com um investimento mínimo pelo espectador. Em outras palavras, deve haver esforço de up-front pouco gasto em experimentar a arte que você cria e enviar para a web. Isso ocorre porque a qualidade percebida de formas de arte são altamente subjetivos para nós como seres humanos, e não duas pessoas podem responder da mesma forma a uma obra de arte. A música é uma forma de arte muito emocional, e que o ouvinte pode ser muito particular sobre o tipo de sentimento que a música retrata.

Com a web se tornar um local sociais cada vez mais, uma apresentação de slides simples, com um pouco de música em segundo plano faz para uma boa diversão em um ambiente ocupado, seja trabalho ou lazer. Na verdade, uma seção de uma página web podem ser visíveis dentro de outra seção da outra página web. Esta é a essência de aplicações web, ao contrário de páginas web, em que há uma capacidade intercambiáveis ​​do seu conteúdo na web, para multiplicar a exposição e usabilidade em muitos contextos. Por exemplo, um site de notícias pode ser capaz de acessar diretamente a mais nova peça de seu site, que apresenta uma área de interesse particular ou novo lançamento.


07 - Tomando-lo ainda mais

Como sua compreensão de como se comportar sites torna-se mais detalhada, você pode começar a desenvolver páginas web mais sofisticados, e talvez até mesmo produzir páginas para outros artistas em uma coletiva, tais como um rótulo net ou mesmo uma empresa de produção de pleno direito. Você pode então integrar seu conteúdo em comércio ou distribuição no domínio digital. Muitas contribuições youtube ganharam centenas de milhares de dólares apenas a partir da receita de anúncios colocados ao lado dos media! Imagine quantas maneiras o seu conteúdo pode ser acessado apenas por integrá-lo no world wide web. Sua muito grande quando você realmente parar e pensar sobre a rapidez com conteúdo é redundante distribuído online.

Da próxima vez, vou explicar os detalhes de como proceder para adicionar o seu conteúdo para a web, ao detalhar os passos que eu atravessava, a fim de configurar o meu próprio servidor web, de modo que você e eu podemos criar sites para amigos e clientes, enquanto evitando os custos substanciais que podem se acumular ao contratar uma empresa para hospedar seu site para você.

Espero que você será capaz de usar esta técnica slideshow jQuery para melhorar as suas páginas web, ou apenas para alcançar o marco de adicionar seu próprio conteúdo para a web com suas próprias mãos. A web está esperando, agora ... brilhar!


Listagem de código baixar um aqui.

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