Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Aula 01 – Apresentação e introdução html
Construção Web Design Aula 01 – Apresentação e introdução html
2
Apresentação Leandro Lago da Silva leandro@datacampo.com.br
Formação Acadêmica: Integrado: Analise e Desenvolvimento de Sistemas ; UEM: Mestrado em Ciência da Computação – Cursando. Formação Profissional: Datacampo: Desenvolvimento de sistemas web e desktop; UTFPR: Professor de nível técnico e tecnológico.
3
Alunos Nome? Cidade? Conhecimentos sobre desenvolvimento web?
4
Conteúdo Programático
Photoshop: Compreendendo a ferramenta; Camadas; Unidades de Medida; Ajustes de cor, brilho, contraste...; Ferramentas de seleção; Filtros; Efeitos.
5
Conteúdo Programático
Fireworks: Compreendendo a ferramenta; Camadas; Seleção; Objetos (botões para menu, caixa de texto, etc...); Efeitos; Exportação.
6
Conteúdo Programático
Flash: Compreendendo a ferramenta; Camadas; Frames (quadros); Animação de movimento; Animação com filtros; Exportação e aplicação no HTML.
7
Conteúdo Programático
Dreamweaver: Compreendendo a ferramenta; Code e Design; Estrutura do HTML Tags; CSS.
8
Conteúdo Programático
Linguagem de Programação e Banco de Dados: Projeto de website com intranet; Linguagem: PHP; Banco de dados: MySQL.
9
Conteúdo Programático
Formato da aula: Conteúdo prático; Aula não modular; Utilização de recursos específicos para web.
10
Introdução O que é a World Wide Web e por que ela é tão boa assim.
Navegadores da Web: o que são eles e alguns dos quais você poderá escolher. O que é um servidor da Web e por que você precisa de um.
11
O que é World Wide Web A Web é um sistema de informações de hipertexto. Hipertexto: permite que você leia e navegue entre texto e informações visuais de uma forma não-linear, baseado no que deseja saber em seguida. Vantagem: Você carrega em disco somente o que você deseja ver. Exemplo: Ajuda do Windows.
12
O que é World Wide Web A Web é gráfica e fácil de navegar.
Independe de Plataforma: Computadores pessoais (Macintosh, PC); Sistemas Operacionais (Windows, Linux, MacOS); Dispositivos Móveis (Tablet, Smartphone); Diferentes resoluções e tamanhos de monitores.
13
Navegadores Diversos navegadores disponíveis: Problemas:
Internet Explorer, Firefox, Chrome, Opera, Safari…; Problemas: Falta de padronização; Uso indiscriminado de plugins.
14
Navegadores Estatística no Mundo: 2012 Internet Explorer Firefox
Chrome Safari Opera March 18.9 % 36.3 % 37.3 % 4.4 % 2.3 % February 19.5 % 36.6 % 4.5 % January 20.1 % 37.1 % 35.3 % 4.3 % 2.4 %
15
Servidor Web O servidor é responsável por armazenar os arquivos que constituem as páginas do site. Estes arquivos são escritos em uma linguagem chamada HTML (Hypertext Markup Language). Com o HTML pode-se definir a estrutura e o conteúdo de um documento web. Além disso, pode-se criar links para outras documentos, imagens ou outras mídias.
16
Introdução ao HTML HTML
HyperText Markup Language; Linguagem de Marcação de Hipertexto. O HTML descreve a estrutura de uma página da Web; O HTML não descreve o layout da página; Evitar o uso do HTML para definir formatação: Tamanho e estilo de fonte; Recuo; Sublinhado, etc...
17
HTML: Certo ou Errado Projete páginas para que funcionem na maioria dos navegadores; Deixe o conteúdo bem estruturado para que seja lido e compreendido; Projete suas páginas com base na aparência que elas terão no seu navegador.
18
Criando sua primeira página
Tag sempre é escrita em letra minúscula. <html> <head> <title> Minha página HTML de Amostra </title> </head> <body> <h1> Esta é uma página HTML </h1> </body> </html>
19
Prática HTML CSS Vamos praticar e entender um pouco mais sobre HTML;
CSS: Folha de Estilo em Cascata; Aplicaremos também algumas propriedades de estilo no CSS. Abrindo o Dreamweaver...
20
Propriedades CSS Width; Height; Color; Font; Text-align; Line-height;
Margin; Border; Padding; Float.
21
Atividade Faça uma página com o titulo “Dog Show” conforme a imagem abaixo:
Apresentações semelhantes
