A Web, o Design, o Software Livre e outras histórias... Eduardo Santos -

Tamanho: px

Começar a partir da página:

Download "A Web, o Design, o Software Livre e outras histórias... Eduardo Santos - www.agni.art.br"

Antônia Furtado Gonçalves
7 Há anos
Visualizações:

1 A Web, o Design, o Software Livre e outras histórias... Eduardo Santos -

2 Surgimento da WEB e HTML Início da década de 90 HTML (acrônimo para a expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto ) Tim Berners-Lee criou o HTML original Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C)

3 Vamos deixar claro... Não existe Web Designer. Existe o Designer que faz Web, e esse profissional tem que aprender tudo: Tipografia, Fotografia, Semiótica, Gestalt, Matemática, Ótica, Percepção, Comportamento Humano, etc. Senão ele não consegue fazer Web. Alexandre Wollner

4 Tio, o que é design? Design refere-se ao projeto visual e funcional de um produto, a adaptação de um produto a necessidade dos seus usuários, cativando o seu uso através da estética, aplicando-se conceitos e usabilidade a sua forma.

5 Tio, o que é design? Design não é Arte! Foco na proposta, no público alvo, na informação a ser comunicada, na mensagem a ser transmitida...

6 O maior equívoco para quem acha que trabalha com Design... Saber como a ferramenta funciona é bem diferente de Saber o que fazer com ela

7 Web Colaborativa? "Web 2.0 é a mudança para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva" (Tim O'Reilly)

8 Web Colaborativa? Sites são Plataformas Comunidades Redes Sociais Colaboração Folksonomia Usuário publicando conteúdo, administrando, avaliando e moderando Conteúdo aberto (Creative Commons, etc)

9 Web 2.0 e Software Livre O conceito usado é comparável com o do software livre: se há muitas pessoas olhando, todos os erros são corrigidos facilmente. Para isso existem comunidades que se auto-moderam, através da participação dos usuários indicando ao sistema qual usuário não deve mais participar da comunidade.

10 Gimp Editor de Imagens Design: Existem Inkscape Desenho Vetorial Alternativas! Blender Modelagem 3D Scribus Paginação

11 ...um Sistema Operacional Adquado. O Ubuntu Studio é um empacotamento especialmente voltado para multimídia, já vindo com aplicações mais voltadas para criação e edição de áudio, vídeo e imagens. Vem com os aplicativos gráficos The GIMP, Inkscape e Blender acompanhado de plugins como dcraw (suporte para arquivos RAW de cameras digitais) ou o wacom-tools para os usuários de tablets Wacom.

12 Inkscape

13 Inkscape SVG - Scalable Vector Graphics Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada. Criado pela W3C (Web Standards) Multiplataforma Possível de criar Extensões ou Plugins em linguagens como Python, Ruby, etc

14 GIMP

15 GIMP - GNU Image Manipulation Program Trabalha com imagens RAW (usando o Plugin Ufraw) Montagem de imagens para Web com o filtro Py-Slice, com suporte a criar menus Roll-hover em Java Script Possui Versão Portátil Suporte a perfis de cores ICC

16 Etapas do Desenvolvimento WEB Documentação Arquitetura de Informação Design de Interface Layout Estruturação Programação Publicação

17 Camadas da Web Conteúdo HTML e XHTML Estrutura do documento Linguagens Server-Side (PHP, Python, etc) Banco de Dados Apresentação CSS Formatação do documento Imagens Comportamento Javascript - Linguagem Client-Side Dinamismo e Interação com o Documento

18 HTML e XHTML Linguagem de Marcação de Hipertexto Padrão Acadêmico Etiquetas definem a hierarquia do texto: <etiqueta>...</etiqueta> <h1>isso é um Título</h1> <p>isso é um paragrafo</p> <p><strong>negrito</strong> e <em>itálico</em></p>

19 HTML e XHTML O XHTML é uma especificação HTML baseada em XML que é considerada pela W3C como um sucessor do HTML. O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido.

20 Cascating Style Sheets CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

21 Cascating Style Sheets Sintaxe: seletor { propriedade: valor; } Seletor: Tag ou Identificador HTML Propriedade: O que será alterado no elemento Valor: O valor da alteração Exemplo: h1 { color: red } #titulo { font-size: 120%; }

22 Debugador de Código HTML, CSS e Javascript

23 CMS Content Management Systems Sistema de gerenciamento de conteúdo

24 WordPress é um sistema de gerência de conteúdos na web, escrito em PHP e corrido em MySQL, especialmente para a criação de blogs. É distribuído sob a GNU General Public License sendo gratuito. Wordpress é um Software Livre.

25 Vamos a Prática!

26 Referências

27 Eduardo Santos Agni.art

Documentos relacionados

Curso Online de E-commerce. Plano de Estudo

Curso Online de E-commerce. Plano de Estudo Curso Online de E-commerce Plano de Estudo Descrição do programa O programa oferece metodologias e técnicas necessárias para a implementação de soluções web baseadas no CMS para o suporte, estratégias