APOSTILA VIDEO LIGHTBOX
Contents
1. Figura 6 Customizando V deos 8 ADICIONADO UM LIGHTBOX A UM P GINA WEB Com o projeto salvo e a galeria gerada podemos iniciar a publica o de nossa LightBox em um site para isso observamos a figura abaixo onde temos a op o para procurar em qual p gina iremos inserir nosso LightBox e em seguida nos mostrada a p gina onde devemos apenas inserir o conte do LightBox no local desejado Escolhemos o local clicaremos ent o no bot o Gerar e as modifica es ser o feitas automaticamente na p gina selecionada anteriormente Depois de inserido o LightBox podemos notar a cria o de duas tags de coment rios nos informando que um conte do LightBox foi inserido O detalhe que se quisermos excluir a LightBox da p gina devemos excluir os c digos que est o entre as tags de in cio e final dos c digos A escrita dessas tags segue o padr o lt l start videoLightBox com HEAD section gt lt l End VideoLightBox com HEAD section gt lt l Start VideoLightBox com HEAD section gt lt l End VideoLightBox com BODY section gt E videoLightBox 2 0 Free versio onhecimentoLivre e vi Galeria videos Op es Ajuda fu U a HEAD LA w 1 Add video 2 Customize thumbnails 3 Customize video 4 Publish M todo de Gerar CONHECIMENTO a pasta CilIsersfabiano taguchijDocuments AULAS AUXILIAR WEB DESIGN VideoLightBoxi ConhecimentoLivre a j2. w Q Q 1 Add video 2 Customize thumbnails 3 Customize video 4 Publish Galeria Videos Op es Ajuda M todo de Gerar Gerar para pasta C Users fabiano taguchiDocuments videotightBox Z _ Preu C Gerar para Servidor FTP j Editar Pasta FTP En Write the name of the Folder where your gallery will be situated on the server Notice that you should specify this Field otherwise your gallery will be uploaded into root Folder of your server Insert to page Open HTML page Open your HTML page Click inside the page to select where you want your gallery to appear then click Insert After Index File name index html IV abrir p gina ap s gerar galeria 3 videos Z Figura 4 Gerando uma galeria 3 ESTRUTURA DE UM DIRET RIO CRIADO A PARTIR DO VIDEO LIGHTBOX No momento que geramos uma galeria ou seja estamos publicando ela para ser disponibilizada j em um site A estrutura de um diret rio de uma galeria cont m um arquivo chamado favicon e uma pasta que cont m todos os conte dos que foram utilizados em nossa galeria tomando como exemplo a cria o acima conter os v deos que serviram de base para montagem da galeria Somado a isso tudo o conte do JQuery e os objetos que ser o usados no momento da inser o desta galeria em uma p gina j se criam tamb m Este arquivo chamado de favicon nada mais que um cone a ser utilizado na visu
3. Ej 7 O seu mais novo portal de educa o 7 itar Pasta FTP ite the name of the Folder where your gallery will be situated on the server Notice that you should specify this field otherwise your gallery will b E ded Folder of a ConhecimentoNews Insert to pag Tecnologia da Inform o Grupo ativista Anonymous ataca Index file name index html IZ Abrir p gina ap s gerar galeria Click inside the page to select where you want you gallery to appear 3videos 7 Figura 7 Publicando um LightBox
4. VIDEO LIGHTBOX FERRAMENTA WEB DESIGN FABIANO KENI TAGUCHI ESTE MATERIAL TEM UM OBJETIVO DE COMPLEMENTAR OS ASSUNTOS ABORDADOS DENTRO DE SALA DE AULA TORNANDO SE UM GUIA PARA UTILIZA O DA FERRAMENTA V DEO LIGHTBOX P gina 2 INTRODU O A Web 2 0 trouxe uma din mica maior utiliza o dos sites os projetos cada vez mais se tornaram intuitivos Uma dessas novas ferramentas que permitiu a aplica o desse conceito foi o Visual LigthBox com ele editamos uma galeria de v deos e aplicamos efeitos Ap s a cria o dessas galerias podemos facilmente incrementar nossos projetos atrav s da inser o dessas galerias em nosso site Figura 1 O paradigma 2 0 1 V DEO LIGHTBOX O software disponibilizado em duas vers es uma paga e outra gratuita a grande diferen a entre as vers es que a vers o free cria algumas propagandas da ferramenta em nossas cria es mas nada que pode nos atrapalhar O download pode ser feito atrav s do seguinte endere o http videolightbox com Para entendimento da ferramenta podemos resumir nos seguintes passos a cria o de uma galeria Cria o de uma nova galeria Inser o de v deos Gera o da galeria Aplica o dos efeitos Disponibiliza o no site URNE B videoLightBox 2 0 Free version New gallery ID x Galeria Videos Op es Ajuda E EATI 1 Add video 2 Customize thumbnails 3 Customize video 4 Publish Add vi
5. aliza o do arquivo index criado na galeria Uma ressalva a quest o dos navegadores que devido a incompatibilidades alguns n o permitem a visualiza o Na hora da execu o da p gina Index independente da extens o do v deo o LightBox cria um player para execu o dos v deos 4 SALVANDO UMA GALERIA Aten o salvar uma galeria diferente de gerar uma galeria O processo de gera o de uma galeria na qual cria se um diret rio e nele os conte dos necess rios para publica o de um LightBox como visto no t pico acima a sua estrutura Salvar uma galeria vai ser til na hora da edi o pois n o conseguimos editar uma galeria somente com sua gera o precisamos salva l e sempre que necess ria edi o abrir a galeria que for salva para devidas altera es A extens o de uma galeria criada a partir do lt QL software a YPRJ P gina 5 5 EDITANDO UMA GALERIA Galeria salva a qualquer momento podemos fazer altera es para isso basta que seja aberta atrav s do menu Galeria e da op o Carregar Galeria Com isso permitido excluir ou inserir v deos Terminamos a edi o devemos salvar a galeria por m n o podemos esquecer de gerar novamente essa galeria alterada para que a estrutura de diret rios seja atualizada 6 CUSTOMIZANDO THUMBNAILS Thumbnails s o imagens que o software extrai dos v deos para utilizar como representa o na cria o da p gina HTML esses thumbna
6. arte desta galeria O passo agora inserir os v deos sejam eles provenientes de uma p gina Web ou que estejam salvos no computador Em uma mesma galeria podemos mesclar v deos oriundos de sites ou de arquivos A medida que os v deos s o inseridos os mesmos podem ser organizados conforme a ordem de disposi o podendo alterar atrav s das setas UP e DOWN que se encontram na barra de ferramentas EB videoLightBox 2 0 Free version New gallery s Ioj xj Galeria Videos Op es Ajuda LA wea oou 1 Add video 2 Customize thumbnails 3 Customize video 4 Publish r Add video Video LIRL Supports Video files YouTube Google Video Metacafe MySpace Vimeo Facebook Yahoo Music Veoh Q add vi deo of p4 3gp video files from your compute Example Insert full path to Flv mp4 3gp puter e z i iii e Evolution Web 1 0 The Future Internet web 2 0 to Web 3 Service Web 3 web 3 3 videos 7 Figura 3 Criando uma galeria Depois dos v deos inseridos o passo agora gerar a galeria atrav s do bot o que se encontra na barra de ferramentas ou no menu Galeria Para completar essa a o devemos apenas indicar onde a galeria gerada dever ser salva No seu local de destino ser criada uma lt QL P gina 4 p gina chamada Index arquivo este que ser usado para visualiza o do LightBox que fora criado EB videoLightBox 2 0 Free version New gallery loj x
7. deo Video URL Supports video files YouTube Google Video Metacafe MySpace Vimeo Facebook Yahoo Music Veoh add vi deo Example O videos 7 Figura 2 Apresenta o Inicial Video LightBox P gina 3 O software dividido em quatro menus Galeria V deos Op es e Ajuda cada um deles sendo respons vel pelas etapas de cria o de um LightBox O primeiro menu chamado de Galeria permite que fa amos a cria o das galerias e das manipula es b sicas dessas galerias Novo Abrir e Salvar outra ferramenta encontrada neste menu a ferramenta Gerar que veremos mais a frente No menu V deos temos as op es de inser o de v deos em nossas galerias criadas podemos inserir v deos de tr s formas v deos que estejam publicados em algum site Youtube Google V deos MySpace Facebook Yahoo V deos entre outros v deos que estejam salvos em nosso computador e pastas completas de v deos Uma observa o quanto extens o de v deos que podemos utilizar em nossa edi o as extens es permitidas s o FLV F4V MP4 MOV 3GP 362 e SWF Por fim o menu Op es permite que possam trocar o idioma de apresenta o do software e o menu Ajuda nos informa es sobre o software e o manual de utiliza o 2 CRIANDO UMA GALERIA Quando iniciamos a utiliza o do software uma galeria nova automaticamente j criada bastando ent o que comecemos a inserir os v deos que far o p
8. ils s o utilizados como forma de bot o para iniciar a execu o dos v deos Podemos customizar esses thumbnails em alguns aspectos como e Template e Tamanho da resolu o e formato da imagem e Cor da p gina de fundo e N mero de thumbnails por coluna e Bot o para player iB videoLightBox 2 0 Free version New gallery Tes ona videos op es a E ID x EA we W wg 1 Addvideo 2 Customize thumbnails 3 Customize video 4 Publish r Template Propriedades do Template lac a Resolu o das miniaturas 160x120 Mac with titles No Frame ar Thumbnail Format und Frame d Qualidade da miniatura Page color Hex ky Notes Vista B Number of columns Auto Thumbnail titles Play button Figura 5 Customizando Thumbnails 7 CUSTOMIZANDO V DEOS Da mesma forma que podemos customizar os thumbnails podemos customizar os v deos Essa customiza o perante aos v deos acontece na hora da execu o Os aspectos que podemos alterar s o bem parecidos com os dos thumbnails vejamos e Template e Resolu o do v deo lt P gina 6 e Cor de sombra para execu o do v deo o x B videoLightBox 2 0 Free version New gallery Galeria videos p es Ajud RA fo Q Q 1 Add video 2 Customize thumbnails 3 Customize video 4 Publish r Template r Propriedades do Template
Download Pdf Manuals
Related Search