Sistemas e Aplicações
Multimídia
Março - 2015
Professor: Giomar Sequeiros O.
Email: giomar.olivera@anhanguera.com
Conteúdo...
Ferramentas para Autoria de Produtos
Multimídia
Sistemas e Aplicações Multimídia 2
Ferramentas para Autoria de Produtos
Multimídia
Sistemas e Aplicações Multimídia 3
As ferramentas usadas para autoria de p...
Aplicativos Fechados
Sistemas e Aplicações Multimídia 4
• Curva de aprendizado menor do que as Linguagens de
Programação.
...
Aplicativos Fechados
Sistemas e Aplicações Multimídia 5
Contudo, em aplicativos profissionais, existem recursos de
program...
Linguagens de Programação
Sistemas e Aplicações Multimídia 6
Para a construção de produtos multimídia mais sofisticados,
c...
Linguagens de Programação
Sistemas e Aplicações Multimídia 7
Entretanto, diferente do aplicativo fechado, a linguagem de
p...
Linguagens de Programação
Sistemas e Aplicações Multimídia 8
As linguagens de programação são usadas através de ambientes ...
Linguagens de Programação
Sistemas e Aplicações Multimídia 9
As linguagens de programação mais conhecidas são:
Cobol, Fort...
Linguagens de Programação
Sistemas e Aplicações Multimídia 10
As linguagens de programação mais conhecidas são:
Linguagem ...
Ferramentas de Autoria
Sistemas e Aplicações Multimídia 11
A construção de produtos multimídia sofisticados pode ser feita...
Ferramentas de Autoria
Sistemas e Aplicações Multimídia 12
As ferramentas de autoria são usadas para produção de títulos s...
Autoria de Títulos Lineares
Sistemas e Aplicações Multimídia 13
São ferramentas que permite a construção de produtos multi...
Autoria de Títulos Hipermídia
Sistemas e Aplicações Multimídia 14
As ferramentas para autoria de títulos hipermídia adicio...
Autoria de Títulos Hipermídia
Sistemas e Aplicações Multimídia 15
Devemos considerar os aspectos abaixo em uma ferramenta ...
A Internet como Plataforma de Hipermídia
Sistemas e Aplicações Multimídia 16
A Internet como Plataforma de
Hipermídia
Sistemas e Aplicações Multimídia 17
O uso da WWW como plataforma de hipermídia fa...
Localização de recursos
Sistemas e Aplicações Multimídia 18
O formato URL (Universal Resource Locator) é conhecimento como...
Localização de recursos
Sistemas e Aplicações Multimídia 19
O protocolo mais usado é o http, mas também é usado o https, p...
Localização de recursos
Sistemas e Aplicações Multimídia 20
O caminho do arquivo equivale à estrutura de diretórios usada ...
Autoria de Sites
Sistemas e Aplicações Multimídia 21
Autoria de sites
Sistemas e Aplicações Multimídia 22
Os sites são um conjunto de páginas que pode conter conteúdo
bastante...
Sites estáticos e dinâmicos
Sistemas e Aplicações Multimídia 23
Um site pode ser estático ou dinâmico, dependendo do conte...
Servidores
Sistemas e Aplicações Multimídia 24
Um servidor web é um programa que recebe uma requisição HTTP de
um computad...
Servidores
Sistemas e Aplicações Multimídia 25
O protocolo HTTP não guarda o estado de uma requisição, ou seja,
não se lem...
Servidores
Sistemas e Aplicações Multimídia 26
O servidor web a ser usado depende da plataforma de
desenvolvimento usada. ...
Comunicação síncrona
Sistemas e Aplicações Multimídia 27
Comunicação assíncrona (AJAX)
Sistemas e Aplicações Multimídia 28
Sites estáticos
Sistemas e Aplicações Multimídia 29
A autoria de sites estáticos envolve as tarefas abaixo:
• Autoria do m...
Sites estáticos: Scripts
Sistemas e Aplicações Multimídia 30
Os Scripts do lado do cliente são um recurso interessante par...
Sites estáticos: Scripts
Sistemas e Aplicações Multimídia 31
JavaScript é a mais usada e aceita em todos os navegadores. P...
Sites estáticos: Tecnologias
Sistemas e Aplicações Multimídia 32
Sites estáticos: Exemplo
Sistemas e Aplicações Multimídia 33
Sites dinâmicos
Sistemas e Aplicações Multimídia 34
São sites que fazem uso de alguma linguagem de script de servidor
que ...
Sites dinâmicos: Tecnologias
Sistemas e Aplicações Multimídia 35
Linguagens do lado do cliente
Linguagens do lado do servi...
Sites dinâmicos: Exemplo
Sistemas e Aplicações Multimídia 36
Etapas de criação de um site
• Planificação e Objetivos
• Realizar um esboço (wireframe)
• Maquetação
• Inserção de conteú...
Planificação: Sitemap
Sistemas e Aplicações Multimídia 38
Esboço (wireframe)
Sistemas e Aplicações Multimídia 39
Papel Balsamiq Mockup
http://www.balsamiq.com/
https://moqups.com/
Esboço (wireframe): Exemplos
Sistemas e Aplicações Multimídia 40
Esboço (wireframe): Exemplos
Sistemas e Aplicações Multimídia 41
Esboço (wireframe): Exemplos
Sistemas e Aplicações Multimídia 42
Esboço (wireframe): Exemplos
Sistemas e Aplicações Multimídia 43
Esboço (wireframe): Responsive Design
Sistemas e Aplicações Multimídia 44
Normal
Esboço (wireframe): Responsive Design
Sistemas e Aplicações Multimídia 45
Tablet
Esboço (wireframe): Responsive Design
Sistemas e Aplicações Multimídia 46
Smartphone
Esboço (wireframe): Responsive Design
Sistemas e Aplicações Multimídia 47
Maquetação (Estrutura HTML 4)
Sistemas e Aplicações Multimídia 48
Maquetação (Estrutura HTML 5)
Sistemas e Aplicações Multimídia 49
Maquetação (Estrutura HTML 5)
Sistemas e Aplicações Multimídia 50
Maquetação (Estrutura HTML 5)
Sistemas e Aplicações Multimídia 51
Maquetação: CSS – Modelo caixa
Sistemas e Aplicações Multimídia 52
Tutorial: http://www.w3c.br/divulgacao/guiasreferencia/...
Maquetação: CSS – Seletores
Sistemas e Aplicações Multimídia 53
Maquetação: Links úteis
Sistemas e Aplicações Multimídia 54
HTML5
http://diveintohtml5.com.br/
http://www.w3schools.com/ht...
Frameworks front-end e templates
Sistemas e Aplicações Multimídia 55
• Boilerplate
– http://html5boilerplate.com/
• Bootst...
Frameworks front-end: Bootstrap
Sistemas e Aplicações Multimídia 56
http://getbootstrap.com/
Editores web
Sistemas e Aplicações Multimídia 57
• Sublime Text 2
– http://www.sublimetext.com/
• Textmate
– http://macrom...
Publicação do site
Sistemas e Aplicações Multimídia 58
FTP
File Transfer Protocol
Cliente Servidor
- Servidor
- Usuário
- ...
Publicação do site: clientes FTP
Sistemas e Aplicações Multimídia 59
• Filezilla:
https://filezilla-project.org/
• Coffee ...
Publicação do site: hosting
Sistemas e Aplicações Multimídia 60
• Hostinger
http://www.hostinger.com.br/
• Google Drive
ht...
História breve sobre o web design
The dark ages of web design (1989)
Sistemas e Aplicações Multimídia 61
http://blog.froon...
História breve sobre o web design
Tables – The beginning (1995)
Sistemas e Aplicações Multimídia 62
História breve sobre o web design
JavaScript comes to the rescue (1995)
Sistemas e Aplicações Multimídia 63
História breve sobre o web design
The golden era of freedom – Flash (1996)
Sistemas e Aplicações Multimídia 64
História breve sobre o web design
CSS (1998)
Sistemas e Aplicações Multimídia 65
História breve sobre o web design
Mobile uprising – Grids and frameworks (2007)
Sistemas e Aplicações Multimídia 66
História breve sobre o web design
Responsive web design (2010)
Sistemas e Aplicações Multimídia 67
História breve sobre o web design
The times of the flat (2010)
Sistemas e Aplicações Multimídia 68
História breve sobre o web design
The bright future (2014)
Sistemas e Aplicações Multimídia 69
Tendências de web design 2015
• Longer scrolling sites
• Storytelling and interaction
• Removing non-essential design elem...
Longer scrolling sites
Sistemas e Aplicações Multimídia 71
http://mintdesigncompany.com/home
Storytelling and interaction
Sistemas e Aplicações Multimídia 72
http://www.spaceneedle.com/home/
Removing non-essential design
elements in favor of simplicity
Sistemas e Aplicações Multimídia 73
http://rareview.com/
Professional high quality custom
photography
Sistemas e Aplicações Multimídia 74
http://grainandmortar.com/
Hidden main menus
Sistemas e Aplicações Multimídia 75
http://brianhoffdesign.com/
Very large typography
Sistemas e Aplicações Multimídia 76
http://madebytinygiant.com/
Flat design
Sistemas e Aplicações Multimídia 77
http://colinanddewi.com/
Princípios de Desenho de Interfaces
com o Usuário
Consistência, pelo qual ações de natureza semelhante devem ser
ativada d...
Princípios de Desenho de Interfaces
com o Usuário
Múltiplos níveis de treinamento - A ajuda deve considerar o perfil do
us...
Revisão – Trabalho em grupo
Fazer um Wareframe (esboço) de um site
Sistemas e Aplicações Multimídia 80
Bibliografia Recomendada
PAULA FILHO, Wilson de Pádua.
Multimídia: Conceitos e Aplicações. 2. ed.
Rio de Janeiro: LTC, 201...
Bibliografia Recomendada
Complementar
MARTINO, Luis M. S.. TEORIA DAS MIDIAS DIGITAIS.
1ª ed. : VOZES, 2014.
FOROUZAN, Beh...
Material, Comunicação e Critérios de
Avaliação
Avaliação I (Peso 4,0)
- Prática : 2,00 (ATPS)
- Prova: 8,00
- Lista de exe...
Próximos SlideShares
Carregando em…5
×

Aula 04 ferramentas para autoria de produtos multimídia i

253 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
253
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 04 ferramentas para autoria de produtos multimídia i

  1. 1. Sistemas e Aplicações Multimídia Março - 2015 Professor: Giomar Sequeiros O. Email: giomar.olivera@anhanguera.com Conteúdo Ferramentas para Autoria de Produtos Multimídia I Aula 4
  2. 2. Ferramentas para Autoria de Produtos Multimídia Sistemas e Aplicações Multimídia 2
  3. 3. Ferramentas para Autoria de Produtos Multimídia Sistemas e Aplicações Multimídia 3 As ferramentas usadas para autoria de produtos multimídia podem ser divididas em duas categorias que são: • Aplicativos Fechados • Linguagens de Programação. Estas ferramentas são usadas de acordo com o nível de conhecimento do usuário que pode ser um usuário não técnico e um usuário com formação em desenvolvimento de software, especificamente, em desenvolvimento de sistemas multimídia.
  4. 4. Aplicativos Fechados Sistemas e Aplicações Multimídia 4 • Curva de aprendizado menor do que as Linguagens de Programação. • Disponibilidade de recursos • Interface bem intuitiva. • Alta produtividade • Aprendizagem rápida O usuário constrói seu produto multimídia, na maioria das vezes títulos, usando diálogos, menus e ícones de forma interativa, ou seja, o usuário não necessita ter conhecimento de programação, ambientes de desenvolvimento, compiladores ou técnicas de programação, ou seja, o usuário constrói o seu produto multimídia usando o aplicativo fechado de forma interativa, sem a necessidade de programação.
  5. 5. Aplicativos Fechados Sistemas e Aplicações Multimídia 5 Contudo, em aplicativos profissionais, existem recursos de programação na forma de linguagens de script que oferecem ao usuário a possibilidade de construir o produto multimídia de forma programada. Algumas dessas ferramentas permite quem o usuário grave um conjunto de ações sob a forma de um programa na linguagem de script, onde cada ação do usuário é mapeada para uma ou mais instruções na linguagem de script. O conjunto de ações é gravado como uma Macro que nada mais é do que um programa na linguagem de script. A Macro então pode ser executada várias vezes no aplicativo fechado, reproduzindo as ações do usuário, como se o usuário estivesse usando o aplicativo fechado interativamente. Esta abordagem é útil para tarefas complexas ou muito trabalhosas e que são executadas com certa frequência.
  6. 6. Linguagens de Programação Sistemas e Aplicações Multimídia 6 Para a construção de produtos multimídia mais sofisticados, como jogos por exemplo, é necessário o uso de linguagens de programação. Esta ferramenta apresenta a vantagem de se ter maior flexibilidade para a construção do produto, permitindo a construção de comportamento dinâmico e adicionando maior interatividade ao produto multimídia criado.
  7. 7. Linguagens de Programação Sistemas e Aplicações Multimídia 7 Entretanto, diferente do aplicativo fechado, a linguagem de programação apresenta uma curva de aprendizado muito maior e requer conhecimento técnico não somente sobre a linguagem de programação em si, mas também sobre o sistema operacional, sobre redes de computadores, sobre banco de dados, etc. Além disso, é necessário conhecer técnicas de programação e construção de algoritmos e estruturas de dados para que se possa fazer bom uso dos recursos oferecidos pela linguagem de programação. Esta é portanto uma ferramenta de autoria indicada para profissionais de informática com formação em desenvolvimento de software. O conhecimento de boas práticas de desenvolvimento (Padrões de Projeto, Coesão, Acoplamento, Injeção de Dependências ) e teste de software ( TDD) são fundamentas para o sucesso no projeto de software.
  8. 8. Linguagens de Programação Sistemas e Aplicações Multimídia 8 As linguagens de programação são usadas através de ambientes de desenvolvimento integrado ( IDE do inglês Integrated Development Environment ) que oferecem vários recursos necessários à atividade de programação tais como compilador, depurador, conjunto de bibliotecas suportadas pela linguagem, ajuda on-line, recurso auto-complete para ajudar na codificação das instruções, entre outros. ).
  9. 9. Linguagens de Programação Sistemas e Aplicações Multimídia 9 As linguagens de programação mais conhecidas são: Cobol, Fortran, List que ainda são usadas em aplicações muito específicas em plataforma alta mas que não são usadas em aplicações multimídia. Linguagem Pascal e Basic que foram criadas para o ensino de programação e que evoluíram para uso profissional na forma de dialetos como Visual Basic da Microsoft e Delphi da Borland. Linguagem C que é uma poderosa linguagem de programação, sendo usada para criação de praticamente todo tipo de software, incluindo aí software multimídia. Linguagem C++ que é uma variação da linguagem C mas com recursos de programação orientada a objetos.
  10. 10. Linguagens de Programação Sistemas e Aplicações Multimídia 10 As linguagens de programação mais conhecidas são: Linguagem Java que se tornou padrão de mercado e que é usada para aplicações corporativas e sistemas web corporativos. Teve muito progresso na melhoria de desempenho na execução dos programas criados porém ainda é mais lenta do que outras linguagens como Pascal e C ou C++. Linguagem C# que é uma cópia da linguagem C++ só que para a plataforma .Net que é a plataforma da Microsoft para desenvolvimento de software. Linguagens de Script como PHP, Python e Ruby que são muito usada para criação de Web Sites e Comercio Eletrônico.
  11. 11. Ferramentas de Autoria Sistemas e Aplicações Multimídia 11 A construção de produtos multimídia sofisticados pode ser feita também com as chamadas ferramentas de autoria que oferecem uma solução intermediária entre os aplicativos fechados e as linguagens de programação, pois permitem a manipulação direta de menus, controles de caixas de ferramentas e ainda oferecem recursos de programação sob a forma de linguagens de script. Uma vantagem deste tipo de ferramenta é que permite ainda a integração com módulos ( .dll, .jar ) construídos com outras linguagens de programação.
  12. 12. Ferramentas de Autoria Sistemas e Aplicações Multimídia 12 As ferramentas de autoria são usadas para produção de títulos sob a forma de slides, um documento, um livro eletrônico, entre outros. Os títulos lineares são a forma mais usada para consumo de informações, no caso de apresentações e livros eletrônicos por exemplo. Apesar de a ordem de apresentação do conteúdo ser predefinida o conteúdo pode ser bastante rico em áudio, vídeo e animações, proporcionando uma experiência rica em termos de informação ao leitor.
  13. 13. Autoria de Títulos Lineares Sistemas e Aplicações Multimídia 13 São ferramentas que permite a construção de produtos multimídia, os títulos com avanços manuais, de forma sequencial, em apresentações. Algumas dessas ferramentas oferecem suporte à tecnologia OLE que permite a inclusão de multimídia nos títulos sob a forma de áudio, vídeo e animações, mas também outros tipos de conteúdo tais como cronograma de projetos, planilhas de cálculos, etc. Exemplo de ferramentas para autoria de títulos lineares temos: Powerpoint (Microsoft ) e Impress ( Open Office ) orientados para a construção de apresentações eletrônicas Acrobat orientado para a construção de documentação on-line.
  14. 14. Autoria de Títulos Hipermídia Sistemas e Aplicações Multimídia 14 As ferramentas para autoria de títulos hipermídia adicionam aos recursos multimídia controles para navegação não sequencial pelo usuário através de hipertexto. Para isso o hipertexto dispõe de recursos como controles de navegação, através dos quais o usuário percorre o título de forma não sequencial. Estes controles são apresentados na forma de botões, links e imagens que direcionam a navegação para outras paginas do documento, sem seguir uma ordem pré-definida e proporcionando um grau de interatividade maior do que os títulos lineares.
  15. 15. Autoria de Títulos Hipermídia Sistemas e Aplicações Multimídia 15 Devemos considerar os aspectos abaixo em uma ferramenta de autoria para hipermídia: Estilo de Autoria: Pode ser interativo ou programado. Modo de Operação: Modo de execução ou modo de Edição. Capacidade de intercâmbio de dados: É muito importante que a ferramenta de autoria suporte os principais formatos e tipos de mídia existentes no mercado e que permita a importação destes formatos para serem adicionados ao título.
  16. 16. A Internet como Plataforma de Hipermídia Sistemas e Aplicações Multimídia 16
  17. 17. A Internet como Plataforma de Hipermídia Sistemas e Aplicações Multimídia 17 O uso da WWW como plataforma de hipermídia faz dela o ambiente hipermídia mais rico disponível. E hoje a linguagem HTML se tornou o padrão de hipertexto para a Web. Existem razões para isso. • Primeiro a HTML é padronizada pelo W3C e não é uma tecnologia proprietária, presa a uma plataforma específica ou a um fabricante. • Segundo, é fácil de usar e possui milhares de ferramentas para elaborações de conteúdo HTML disponíveis, muitas delas gratuitas. • Terceiro, a HTML suporta todos os formatos de áudio, vídeo e desenho disponíveis, a partir da versão 5 estes conteúdos multimídia são suportados nativamente.
  18. 18. Localização de recursos Sistemas e Aplicações Multimídia 18 O formato URL (Universal Resource Locator) é conhecimento como endereço web e usado para localizar páginas e outros tipos de recursos, imagens por exemplo. Um URL é um caso particular de URI ( Uniform Resource Identifier ), um texto que identifica um recurso de forma única. O URL vai além disso pois além de identificar o recurso ele fornece meios para localizá-lo. Um URL tem a seguinte forma: protocolo:[//dominio[:porta]/] caminho do arquivo [?texto de consulta] [#ancora]
  19. 19. Localização de recursos Sistemas e Aplicações Multimídia 19 O protocolo mais usado é o http, mas também é usado o https, para o caso de transações seguros como em comercio eletrônico ou home banking. Também é usado mailto para o envio de mensagens de correio eletrônico e o file para arquivos locais, além do ftp para transferência de arquivos. Quando o domínio não é indicado, o navegador assume o http como padrão. O domínio indica o nome da entidade ou empresa que disponibiliza o conteúdo, conforme registro feito por um registrador de nomes de domínio que é credenciado pelo órgão que regula a atribuição de domínios da Internet. A porta raramente é usada, mas pode ser quando um domínio oferece mais de um serviço, por exemplo, servidor web na porta 8888 e servidor de banco de dados postgresql na porta 8654.
  20. 20. Localização de recursos Sistemas e Aplicações Multimídia 20 O caminho do arquivo equivale à estrutura de diretórios usada pelo sistema operacional do servidor, partindo do diretório raiz atribuído ao servidor. São exemplos de URLS: http://en.wikipedia.org/wiki/URL#Syntax http://localhost:8080/query.php?regiao=centro-oeste file://d:/trabalho/multimedia/livro.doc
  21. 21. Autoria de Sites Sistemas e Aplicações Multimídia 21
  22. 22. Autoria de sites Sistemas e Aplicações Multimídia 22 Os sites são um conjunto de páginas que pode conter conteúdo bastante diversificado, indo desde páginas estáticas até páginas dinâmicas e com conteúdo multimídia, incluindo áudio, vídeo, animações, etc. As páginas são organizadas em uma estrutura de pastas que reflete o mapa de navegação do sites e a hierarquia entre os documentos, indo do conteúdo mais geral para o mais específico. Os possíveis materiais que podem compor um site são os seguintes: • Páginas de hipertexto; • Material gráfico e de multimídia incorporado a estas páginas ( imagens, áudio, vídeo, animações ); • Outros tipos de documentos; • Arquivos de trabalho usados pelo software servidor do site; • Scripts que conferem interatividade a páginas do site ( PHP, ASP, JSP, etc. )
  23. 23. Sites estáticos e dinâmicos Sistemas e Aplicações Multimídia 23 Um site pode ser estático ou dinâmico, dependendo do conteúdo apresentado ao usuário. Sites estáticos oferecem pouca interatividade com o usuário e apresentam informação numa página que foi gerada em tempo de desenvolvimento, ou seja, quando o site foi construído. Sites dinâmicos oferecem maior interatividade com o usuário, sob a forma de pesquisas, escolhas de opções e geram informação com base nas informações do usuário, gerando as páginas em tempo de execução e apresentando informações sempre atualizadas. Normalmente as informações são lidas em um banco de dados e as páginas possuem scripts que são processados pelo servidor que interpreta o script gerando o conteúdo da pagina dinamicamente. Estes scripts são escritos em alguma linguagem de script tal como PHP, ASP, JSP e que pode ser interpretada pelo servidor web.
  24. 24. Servidores Sistemas e Aplicações Multimídia 24 Um servidor web é um programa que recebe uma requisição HTTP de um computador cliente através de um navegador e devolve uma resposta HTTP, no mesmo formato da requisição, que geralmente é uma ou mais páginas HTML que pode então ser apresentada ao usuário também através do navegador. O nome é usado também para o computador que hospeda o programa servidor. Tanto a requisição quanto a resposta são feitas no formato HTTP que é amplamente usado na internet por ser o protocolo padrão de hipertexto, padronizado e mantido pelo W3C. O protocolo HTTP usa os serviços do protocolo TCP para estabelecer conexões entre o cliente ( usuário ) e o servidor. Estas conexões permitem que sejam trocadas mensagens no modelo de requisição e resposta.
  25. 25. Servidores Sistemas e Aplicações Multimídia 25 O protocolo HTTP não guarda o estado de uma requisição, ou seja, não se lembra dos dados de uma requisição. Esta limitação é superada por recursos de programação usados do lado do cliente ou do lado do servidor. Para transações de comércio eletrônico, banco online, é usado o protocolo HTTPS que possui recursos de criptografia para garantir a comunicação segura entre cliente e servidor. O servidor web mais usado atualmente é o Apache HTTP Server. Ele é gratuito e é conhecido simplesmente como Apache, sendo mantido Apache Software Foundation e está disponível para os principais sistemas operacionais. O segundo servidor web mais usado é o IIS da microsoft mas este é limitado ao ambiente Windows.
  26. 26. Servidores Sistemas e Aplicações Multimídia 26 O servidor web a ser usado depende da plataforma de desenvolvimento usada. Se você for usar Java terá de usar um servidor como Tomcat, JBoss, Web Logic ou GlassFish. Se voce estiver usando .Net então usa única opção será mesmo o IIS. Observe que quanto mais aberto for o software usado maiores são as opções em termos de servidor, ferramenta, linguagem de programação, etc. Hoje em dia existe um grande número de sites com Apache Server e PHP com banco de dados MySQL ou PosgreSQL. São usados principalmente para sites dinâmicos e de comércio eletrônico.
  27. 27. Comunicação síncrona Sistemas e Aplicações Multimídia 27
  28. 28. Comunicação assíncrona (AJAX) Sistemas e Aplicações Multimídia 28
  29. 29. Sites estáticos Sistemas e Aplicações Multimídia 29 A autoria de sites estáticos envolve as tarefas abaixo: • Autoria do material gráfico ( imagens, videos, animações ) que deve ser incluído nas páginas • Autoria das páginas HTML • Autoria da interligação entre as páginas • Testes de visualização nos navegadores escolhidos • Publicação em um servidor web.
  30. 30. Sites estáticos: Scripts Sistemas e Aplicações Multimídia 30 Os Scripts do lado do cliente são um recurso interessante para se fazer pequenos efeitos visuais em uma página. Normalmente são implementados através de linguagens de script que são executadas diretamente no navegador, ou seja, do lado cliente. Estas linguagens são interpretadas e possuem recursos capazes de manipular os elementos de uma página, alterando seu comportamento. Por exemplo, ao passar o mouse sobre um elemento da página, um formulário, pode-se exibir uma mensagem para o usuário. As linguagens de Script mais comuns são Javascript, VbScript, ActionScript e JScript.
  31. 31. Sites estáticos: Scripts Sistemas e Aplicações Multimídia 31 JavaScript é a mais usada e aceita em todos os navegadores. Possui sintaxe bastante parecida com a linguagem Java e é padronizada pela ISO. VbScript é usada no navegador IE da Microsoft e é um dialeto da linguagem Basic. ActionScript é a linguagem de script para animações em Flash. Com a chegada do HTML5 e seus recursos nativos para animação a tendência é que esta linguagem seja cada vez menos usada no futuro. Todas as linguagens de Script podem ter o código-fonte exibido no navegador e isso é um problema com relação à segurança. Por conta disso, validações e tratamentos de regras de negócio ou cálculos devem ser feitos do lado servidor com uma linguagem de servidor como PHP ou ASP.NET.
  32. 32. Sites estáticos: Tecnologias Sistemas e Aplicações Multimídia 32
  33. 33. Sites estáticos: Exemplo Sistemas e Aplicações Multimídia 33
  34. 34. Sites dinâmicos Sistemas e Aplicações Multimídia 34 São sites que fazem uso de alguma linguagem de script de servidor que permite a criação de páginas em tempo de execução, de forma dinâmica, normalmente acessando um banco de dados a partir do qual consultam informações que são então inseridas nas páginas dinamicamente. A geração de páginas dinâmicas é feita da seguinte forma: O cliente envia uma requisição, via protocolo HTTP, contendo uma URL do aplicativo, componente ou script que será processado no servidor, gerando em tempo de execução, o conteúdo da página de resposta. O aplicativo, componente ou script processa a requisição e gera uma página de resposta em HTML, mas que pode conter scripts tanto do lado cliente quando do lado servidor. A página de resposta é enviada então ao navegador para visualização pelo usuário. A
  35. 35. Sites dinâmicos: Tecnologias Sistemas e Aplicações Multimídia 35 Linguagens do lado do cliente Linguagens do lado do servidor Banco de Dados
  36. 36. Sites dinâmicos: Exemplo Sistemas e Aplicações Multimídia 36
  37. 37. Etapas de criação de um site • Planificação e Objetivos • Realizar um esboço (wireframe) • Maquetação • Inserção de conteúdo • Publicação Sistemas e Aplicações Multimídia 37
  38. 38. Planificação: Sitemap Sistemas e Aplicações Multimídia 38
  39. 39. Esboço (wireframe) Sistemas e Aplicações Multimídia 39 Papel Balsamiq Mockup http://www.balsamiq.com/ https://moqups.com/
  40. 40. Esboço (wireframe): Exemplos Sistemas e Aplicações Multimídia 40
  41. 41. Esboço (wireframe): Exemplos Sistemas e Aplicações Multimídia 41
  42. 42. Esboço (wireframe): Exemplos Sistemas e Aplicações Multimídia 42
  43. 43. Esboço (wireframe): Exemplos Sistemas e Aplicações Multimídia 43
  44. 44. Esboço (wireframe): Responsive Design Sistemas e Aplicações Multimídia 44 Normal
  45. 45. Esboço (wireframe): Responsive Design Sistemas e Aplicações Multimídia 45 Tablet
  46. 46. Esboço (wireframe): Responsive Design Sistemas e Aplicações Multimídia 46 Smartphone
  47. 47. Esboço (wireframe): Responsive Design Sistemas e Aplicações Multimídia 47
  48. 48. Maquetação (Estrutura HTML 4) Sistemas e Aplicações Multimídia 48
  49. 49. Maquetação (Estrutura HTML 5) Sistemas e Aplicações Multimídia 49
  50. 50. Maquetação (Estrutura HTML 5) Sistemas e Aplicações Multimídia 50
  51. 51. Maquetação (Estrutura HTML 5) Sistemas e Aplicações Multimídia 51
  52. 52. Maquetação: CSS – Modelo caixa Sistemas e Aplicações Multimídia 52 Tutorial: http://www.w3c.br/divulgacao/guiasreferencia/css2/
  53. 53. Maquetação: CSS – Seletores Sistemas e Aplicações Multimídia 53
  54. 54. Maquetação: Links úteis Sistemas e Aplicações Multimídia 54 HTML5 http://diveintohtml5.com.br/ http://www.w3schools.com/html/html5_intro.asp http://html5doctor.com/ http://www.html5rocks.com/pt/ CSS http://www.w3schools.com/css/ https://developer.mozilla.org/pt-BR/docs/CSS/Getting_Started http://www.htmldog.com/guides/css/beginner/ Outros http://www.criarweb.com/css-960-grid-system/ http://css3generator.com/ http://www.css3.me/ http://html-color-codes.info/
  55. 55. Frameworks front-end e templates Sistemas e Aplicações Multimídia 55 • Boilerplate – http://html5boilerplate.com/ • Bootstrap – http://getbootstrap.com/ • Templates gratuitos – http://html5up.net/ – http://freehtml5templates.com/ – http://www.templatesbox.com/templates.htm – http://www.templateworld.com/free_templates.html
  56. 56. Frameworks front-end: Bootstrap Sistemas e Aplicações Multimídia 56 http://getbootstrap.com/
  57. 57. Editores web Sistemas e Aplicações Multimídia 57 • Sublime Text 2 – http://www.sublimetext.com/ • Textmate – http://macromates.com/ • Notepad++ – http://notepad-plus-plus.org/ • Adobe Dreamweaver – http://www.adobe.com/br/products/dreamweaver.html
  58. 58. Publicação do site Sistemas e Aplicações Multimídia 58 FTP File Transfer Protocol Cliente Servidor - Servidor - Usuário - Senha
  59. 59. Publicação do site: clientes FTP Sistemas e Aplicações Multimídia 59 • Filezilla: https://filezilla-project.org/ • Coffee Free FTP http://www.coffeecup.com/free-ftp/ – Net2ftp http://www.net2ftp.com/
  60. 60. Publicação do site: hosting Sistemas e Aplicações Multimídia 60 • Hostinger http://www.hostinger.com.br/ • Google Drive https://drive.google.com/ • ByeHost http://byethost.com/
  61. 61. História breve sobre o web design The dark ages of web design (1989) Sistemas e Aplicações Multimídia 61 http://blog.froont.com/brief-history-of-web-design-for-designers/
  62. 62. História breve sobre o web design Tables – The beginning (1995) Sistemas e Aplicações Multimídia 62
  63. 63. História breve sobre o web design JavaScript comes to the rescue (1995) Sistemas e Aplicações Multimídia 63
  64. 64. História breve sobre o web design The golden era of freedom – Flash (1996) Sistemas e Aplicações Multimídia 64
  65. 65. História breve sobre o web design CSS (1998) Sistemas e Aplicações Multimídia 65
  66. 66. História breve sobre o web design Mobile uprising – Grids and frameworks (2007) Sistemas e Aplicações Multimídia 66
  67. 67. História breve sobre o web design Responsive web design (2010) Sistemas e Aplicações Multimídia 67
  68. 68. História breve sobre o web design The times of the flat (2010) Sistemas e Aplicações Multimídia 68
  69. 69. História breve sobre o web design The bright future (2014) Sistemas e Aplicações Multimídia 69
  70. 70. Tendências de web design 2015 • Longer scrolling sites • Storytelling and interaction • Removing non-essential design elements in favor of simplicity • Professional high quality custom photography • Hidden main menus • Very large typography • Flat design • No more boxes • Material design Sistemas e Aplicações Multimídia 70
  71. 71. Longer scrolling sites Sistemas e Aplicações Multimídia 71 http://mintdesigncompany.com/home
  72. 72. Storytelling and interaction Sistemas e Aplicações Multimídia 72 http://www.spaceneedle.com/home/
  73. 73. Removing non-essential design elements in favor of simplicity Sistemas e Aplicações Multimídia 73 http://rareview.com/
  74. 74. Professional high quality custom photography Sistemas e Aplicações Multimídia 74 http://grainandmortar.com/
  75. 75. Hidden main menus Sistemas e Aplicações Multimídia 75 http://brianhoffdesign.com/
  76. 76. Very large typography Sistemas e Aplicações Multimídia 76 http://madebytinygiant.com/
  77. 77. Flat design Sistemas e Aplicações Multimídia 77 http://colinanddewi.com/
  78. 78. Princípios de Desenho de Interfaces com o Usuário Consistência, pelo qual ações de natureza semelhante devem ser ativada de forma semelhante Realimentação - O aplicativo deve fornecer feedback ao usuário sobre como entendeu a tarefa solicitada; Minimização de erros - O aplicativo deve ajudar o usuário a não cometer erros, oferecendo opções no momento certo, desabilitando funções que não devem estar disponíveis para o usuário em um determinado contexto, etc. Recuperação de erros - Mesmo assim o usuário erra e a interface deve dar a opção de desfazer o erro; Sistemas e Aplicações Multimídia 78
  79. 79. Princípios de Desenho de Interfaces com o Usuário Múltiplos níveis de treinamento - A ajuda deve considerar o perfil do usuário. Usuários novos devem ser bem orientados. Usuários experientes nem tanto mas ainda assim devem ser ajuda e orientação suficientes. Minimização da memorização - Não sobrecarregar o usuário com informações em excesso, obrigando-o a memorizar dezenas de comandos e conceitos; Leiaute adequado das telas - Telas simples, limpas, objetivas e com boa estética é o que o usuário espera de um aplicativo. Sistemas e Aplicações Multimídia 79
  80. 80. Revisão – Trabalho em grupo Fazer um Wareframe (esboço) de um site Sistemas e Aplicações Multimídia 80
  81. 81. Bibliografia Recomendada PAULA FILHO, Wilson de Pádua. Multimídia: Conceitos e Aplicações. 2. ed. Rio de Janeiro: LTC, 2014. . Básica Sistemas e Aplicações Multimídia 81
  82. 82. Bibliografia Recomendada Complementar MARTINO, Luis M. S.. TEORIA DAS MIDIAS DIGITAIS. 1ª ed. : VOZES, 2014. FOROUZAN, Behrouz A.. A comunicação de dados e redes de computadores. 1ª ed. Rio de Janeiro: McGraw COMER, Douglas; BARCELLOS, Marinho. Redes de Computadores e Internet : abrange transmissão de dados, ligação inter-redes e web.. 4ª ed. Porto Alegre: Bookman, 2007. Sistemas e Aplicações Multimídia 82
  83. 83. Material, Comunicação e Critérios de Avaliação Avaliação I (Peso 4,0) - Prática : 2,00 (ATPS) - Prova: 8,00 - Lista de exercícios: 1,00 (Opcional) Avaliação II (Peso 6,0) - Prática : 2,00 (ATPS) - Prova escrita oficial: 8,00 - Lista de exercícios: 1,00 (Opcional) Frequência igual ou superior a 70%. Sistemas e Aplicações Multimídia 83 Média final >=6 (Não existe arredondamento)

×