DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

APRESENTAÇAO E INTRODUÇÃO

andre.costa@pro.unifacs.br

ANDRÉ COSTA

•  Mestre em Modelagem Computacional e Tecnologia Industrial

•  MBA em Gestão da Informação e Projetos de Business Intelligence

•  Bacharel em Sistemas da Informação •  Cursos de Gestão de Projetos •  Coordenador da Equipe de Desenvolvimento do ITED/

SENAI-BA •  Professor Universitário (Todos os cursos de TI)

www.andrecosta.info

A TURMA

E vocês? Qual o perfil da turma?

HORÁRIO

Com ou sem intervalo?

PLANO DE ENSINO

Apresentação do Plano de Ensino

PLANO DE ENSINO

Apresentação do Cronograma

Disponível no Gamifica*

NOVA METODOLOGIA

Utilização de uma nova “plataforma”:

GAMIFICA

http://andrecosta.info/gamifica

GAMIFICA

•  Aulas disponíveis no ambiente – Slides – Material de Apoio – Desafios valendo ponto na plataforma – Enviar desafio até a véspera da aula – Conferir arquivo enviado

•  Quem atingir a pontuação mínima ganha ponto na disciplina

NOTAS

•  NOTA 1: – Avaliação HTML (em papel) – 8,0 – Gamifica – 2,0

•  Quem atingir a meta de 60 pontos até o dia da avaliação HTML ganhará 2 pontos na média

•  Quem ficar entre 40 e 59 pontos até o dia da avaliação HTML ganhará 1 ponto na média

•  Quem ficar com menos de 40 pontos não ganhará ponto

NOTAS

•  NOTA 2: – Avaliação PHP (computador) – 5,0 – Trabalho (Desenvolver um Sistema) – 3,0 – Gamifica – 2,0

•  Quem atingir uma nova meta de 70 pontos até o dia da avaliação PHP ganhará 2 ponto na média

•  Quem ficar entre 45 e 69 pontos até o dia da avaliação PHP ganhará 1 ponto na média

•  Os 2 primeiros colocados (somando as duas metas) ganharão 1 ponto extra

Desenvolvimento Web

DESENVOLVIMENTO WEB

SERVIDOR WEB

Instalação do XAMPP PHP + MySQL

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

INSTALAÇÃO DO XAMPP

ATIVIDADE

•  Fazer o curso de HTML da W3Schools – www.w3schools.com/html

•  Fazer o seu currículo em HTML – Utilizar título, lista, imagem, link e tentar

utilizar tabela

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

HTML – Introdução, Estrutura e Tags

andre.costa@pro.unifacs.br

HTML-História

HTML-História

•  HTML - HyperText Markup Language –  Não é uma linguagem de programação –  É uma linguagem de marcação

•  Criado pelo Físico Tim Berners-Lee em 1980

•  Tornou-se pública em 1991

•  Lançado o HTML 2.0 em 1994

HTML-História

•  LançadooHTML3.2em1996emman.dopelaW3C(WorldWideWebConsor.um)

•  LançadooHTML4.0em1997elançadoumaerrataem1999comoHTML4.01

•  Lançadoem2008oHTML5

HTML-História

Tim Berners-Lee

HTML-História

HTMLCrossBrowser

HTML-História

ExemplodeIncompa.bilidade

HTML-História

HTML-Estrutura

HTML-Estrutura

<tagatributo=“valor”>conteúdo</tag>ou

<tagatributo=“valor”>CERTO:<tag_1><tag_2>texto</tag_2></tag_1>ERRADO<tag_1><tag_2>texto</tag_1></tag_2>

HTML-Estrutura

HTML-Estrutura

HTML-Tags

HTML-Tags

<h1>Título1</h1><h2>Título2</h2>…<h6>Título6</h6>

HTML-Tags

<p>Parágrafo1</p><p>Parágrafo2</p>

HTML-Tags

<p>Parágrafocom<b>Negrito</b>,<i>Itálico</i>e<u>sublinhado</u>.</p>

HTML-Tags

<p>Parágrafocom<br><b>Negrito</b>,<br><i>Itálico</i>e<br><u>sublinhado</u>.</p>

HTML-Tags

•  textotexto<hr>textotexto

HTML-Tags

•  <center>textocentralizado</center>

HTML-Tags

•  <fieldset><legend>Legenda</legend>texto

</fieldset>

HTML-Tags

•  <ul><li>Item1</li><li>Item2</li>

</ul>

HTML-Tags

•  <ol><li>Item1</li><li>Item2</li>

</ol>

HTML-Tags

•  <imgsrc=“figura_teste.gif”>

HTML-Tags

•  <ahref=“pagina.html”>LinkparaPágina</a>

HTML-Tags

Mãonamassa!DesenvolvaemHTMLapáginadeumabandacontendo:Foto,discografia,históriaevídeo.