Web 1

CATARINENSE
Cmpus Fraiburgo
WebDesign - HTML, CSS e JavaScript
Prof. Hewerton Enes de Oliveira
hewerton.oliveira@fraiburgo.ifc.edu.br
Instituto Federal Catarinense
Campus Fraiburgo
7 de maio de 2014
Prof. Hewerton (IFC) WebDesign - Aula 1 7 de maio de 2014 1 / 19
CATARINENSE
Cmpus Fraiburgo
Apresentao
Web Design
uma extenso do design, onde o foco do projeto a criao de web sites
e documentos disponveis no ambiente da web.
A disciplina faz parte do PPC do curso
Possui uma carga horria de 30h
Sero realizados 8 encontros - 1 por semana
CATARINENSE
Cmpus Fraiburgo
Avaliaes
Pgina da Disciplina: http://goo.gl/Ylc4OS
Sero realizadas 3 avaliaes
1 exerccio prtico por aula (Ex), totalizando 8 no m da disciplina
1 trabalho prtico sobre o framework Bootstrap (T1)
1 trabalho prtico sobre o framework JQuery UI (T2)
Mdia Final
MF =
(Ex3)+(T13)+(T24)
10
CATARINENSE
Cmpus Fraiburgo
Desenvolvimento Web hoje
A internet est em todo lugar
Tudo est se expandindo
Google, Microsoft, Apple, Facebook, Twitter, ...
Novas empresas surgem
Novos padres tambm surgem
CATARINENSE
Cmpus Fraiburgo
Por que aprender HTML e CSS?
Caso voc trabalhe com tecnologia, boa parte de seus projetos ser
WEB
Sistemas bancrios, redes sociais, portais de notcias, etc ...
importante mesmo!
importante ter uma base de conhecimento em desenvolvimento front-end
para voc contribuir para o sucesso do projeto que estiver participando!
CATARINENSE
Cmpus Fraiburgo
O que HTML?
HTML ...
Hyper Text Markup Language
1 <html>
2 <head>
3 <title>Minha Pagina </title>
4 </head>
5 <body>
6 </body>
7 </html>
CATARINENSE
Cmpus Fraiburgo
O que CSS?
CSS ...
Cascading Style Sheet
1 .container {
2 margin: 0 auto;
3 width: 960px;
4 }
CATARINENSE
Cmpus Fraiburgo
O que JavaScript?
JavaScript ...
Uma linguagem de programao interpretada que roda do lado do cliente
1 if ( confirm( 'Escolha "Ok" ou "Cancelar" para ver a
mensagem correspondente. ' ) ) {
2 alert( 'Voce apertou o botao "OK"' );
3 } else {
4 alert( 'Voce apertou o botao "Cancelar"' );
5 }
CATARINENSE
Cmpus Fraiburgo
The WEB is powered by...
CATARINENSE
Cmpus Fraiburgo
Para que tudo isso?
Para ter ...
Melhor apresentao
Mais funcionalidades
Necessrio denir padres para garantir a interoperabilidade
Desenvolvimento front-end trat-se de usabilidade!
Para maiores informaes:
Tableless - http://goo.gl/OD7K20
Viver de Blog - http://goo.gl/TtFntg
CATARINENSE
Cmpus Fraiburgo
O que iremos utilizar?
Utilizaremos...
Um editor de texto (gedit, sublime-text, kate, jedit, ...)
e um navegador WEB:
Google Chrome - http://goo.gl/qlX6wS (Altamente
recomendado)
Mozilla Firefox - http://goo.gl/XPGQQl com o plugin Firebug
http://goo.gl/feBx9u
CATARINENSE
Cmpus Fraiburgo
Ambiente de Inspeo - Chrome
Figura : Ferramentas para Desenvolvedor do Google Chrome. Fonte: Google
CATARINENSE
Cmpus Fraiburgo
Ambiente de Inspeo - Firefox
Figura : Plugin Firebug para o Firefox. Fonte: Site do Firebug
CATARINENSE
Cmpus Fraiburgo
Mos obra...
Vamos criar nossa primeira pgina?
CATARINENSE
Cmpus Fraiburgo
Estrutura do nosso projeto
Figura : Estrutura de pastas dos nossos projetos.
CATARINENSE
Cmpus Fraiburgo
Nossa primeira pgina
Figura : Nossa primeira pgina.
CATARINENSE
Cmpus Fraiburgo
Para entregar
Faa uma pgina como essa para a sua cidade
Adicione pelo menos 4 lugares diferentes
Adicione imagens das mesmas (caso seja necessrio utilize um editor de
imagens para cort-las)
Envie para o meu e-mail com o assunto [Web-T1-Conc-3F-2014-1]-
<PrimeiroEUltimoNome>-<NumMatricula>
Exemplo: [Web-T1-Conc-3F-2014-1]-HewertonOliveira-201212345
Data para entrega: 13/05/2014
CATARINENSE
Cmpus Fraiburgo
Prxima aula...
Mais HTML 5
Mais CSS 3
Mais prticas
CATARINENSE
Cmpus Fraiburgo
Bibliograa
MAZZA, Lucas
CHTML5 e CSS3: Domine a web do futuro
Casa do Cdigo
SILVA, Maurcio Samy
Construindo sites com SCC e (X)HTML: sites controlados por folha de
estilo em cascata
Novatec, 2008

Web 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web 1

Enviado por

Direitos autorais:

Formatos disponíveis

CATARINENSE

Você também pode gostar