O documento apresenta três formadores para um treinamento em desenvolvimento web. Ruben Manhiça é estudante de mestrado e docente universitário. Jorge Lobo é desenvolvedor mobile e gosta de dançar. Hervé Muneza é fundador da Alphabit e gosta de viajar e conhecer novas pessoas. O programa de treinamento abordará temas como HTML, CSS, JavaScript e Laravel ao longo de cinco semanas.

1. Web Development Training
Apresentação dos Formadores
Ruben Manhiça
Jorge Lobo
Hervé Muneza
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

2. Ruben Manhiça
• Estudante de Mestrado em
Sistemas de Informação
• Docente Universitário
• Aficionado por desenvolvimento
de aplicações e por Tecnologia
• Gosta de ler, redes sociais, filmes,
series e Animes.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

3. Jorge Lobo
• Licenciado em Engenharia
Informática
• Desenvolvedor no BIM (Trabalha
Com o Sistema IZI)
• Aficionado pelo Desenvolvimento
mobile
• Gosta de viajar e dançar.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

4. Hervé Muneza
• Msc em Engenharia Informática
• Fundador de Alphabit
• Aficionado pelo Desenvolvimento
web
• Gosta de viajar, aprender e
conhecer novas pessoas.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

5. Web Development Training
Programa de Treinamento
Temas a serem abordados
Metodologia
Material Necessário
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

6. Programa do Treinamento
Semana 1
• Introdução e apresentação do modelo do
programa;
• Diagnostico dos participantes;
• Conceitos básicos sobre Programação em Web,
HTML/CSS/JavaScript
• Contextualização e entrega das primeiras matérias;
Semana 2
• Programação em PHP, conceitos básicos;
• AJAX;
• Entrega de exercícios e vídeos para a semana
seguinte
Semana 3
• Introdução ao Laravel;
§ Instalação e configuração
§ Conceitos Básicos sobre Laravel
§ Conhecendo o Composer;
§ Routing, Controllers e Views
• Secção de perguntas e respostas
Semana 4
• Conhecendo o Blade
• MasterPage;
• ChildPage;
• Formulários
• Secção de perguntas e respostas
• Divisão dos participantes em Grupos para
apresentação de um mini-projecto;
• Entrega de exercícios e vídeos para a semana
seguinte
Semana 5
• Resumo da aula anterior
• Apresentação do mini-projecto pelos participantes
• Secção de perguntas e respostas;
• Apresentação das perspetivas de nível 2 para o
curso
• Considerações finais;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

7. Metodologia de Aprendizagem
ü O Training irá se focar na auto aprendizagem;
ü Estamos aqui como facilitadores deste processo;
ü Semanalmente será introduzido um tópico e serão dados os
conceitos gerais sobre esse tópico aqui;
ü Iremos fornecer links, vídeos, material de apoio e Desafios
para completarem durante a semana;
ü Esperamos que os participantes tenham um amor
incondicional por programar;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

8. Material Necessário
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

9. Web Development Training
Modulo HTML
Definição
Historia de HTML
Sintaxe
Exemplo de Código
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

10. • Porque HTML ?
WEB = URI + HTTP + HTML
• O que é HTML ?
• Linguagem de Programação
• Linguagem de marcação de
Hipertexto
<inicio> Bom dia </inicio>
Eu sou <nome> Picacho </nome> e
tenho poder de <habilidade> choque
elétrico </habilidade>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

11. • 1990 – Criação do HTML
Tim Berners-Lee
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
• 1994 – HTML2 e formação
de W3C
• 1997 – HTML4
• 2004 – xHTML1.0
• 2008 – HTML5

12. Elementos
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
<title> Melhor titulo do mundo </title>

13. Atributos
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
<img src="logo.png">

14. Comentários
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
<!-- Isto é um comentário -->

15. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

16. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

17. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

18. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

19. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

20. Exemplo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

21. Referencias
• "HTML Presentation For Beginners". Pt.slideshare.net. N.p.,
2009. Web. 19 Mar. 2016.
• Castro, Elizabeth. HTML, XHTML & CSS. Berkeley, CA:
Peachpit Press, 2007. Print.
• "HTML5 Básico: Marcação (Aula 1)". Pt.slideshare.net. N.p.,
2016. Web. 19 Mar. 2016.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

22. Web Development Training
Modulo CSS
Definição
Seletores
Sintaxe
Exemplo de Codigo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

23. O que é CSS ?
• Cascading Style Sheet (CSS) é um mecanismo simples
para adicionar estilo no conteúdo da Web.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

24. • Porque CSS ?
• Fácil Manutenção das
paginas;
• Organização do projeto;
• Carregamento da Pagina;
• 1996 - 1998 - 1999
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

25. Seletores CSS
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
Regra : Seletor {declaração;}

26. Seletores CSS
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

27. Seletores CSS
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

28. Exemplo de seletores
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

29. Como Usar CSS
• Recomendado
Externo
<html>
<head>
<title> CSS Externo </title>
<link href=“stylesheet” type=“text/css” href=“location.css” />
...
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

30. Como Usar CSS
Interno
<html>
<head>
<title> CSS Interno </title>
<style type=“text/css”>
p {color:red;}
</style>
...
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

31. Como Usar CSS
• Não recomendado
Em linha
<html>
...
<body>
<p style=“font-size: 12px”>Lorem ipsum</p>
</body>
...
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

32. Peso por Cascatas
• Maior Peso ao Menor
• Em Linha
• Interno
• Externo
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

33. Referencias
• Tyagi, Amit. "Introduction To CSS". Pt.slideshare.net. N.p.,
2012. Web. 19 Mar. 2016.
• Castro, Elizabeth. HTML, XHTML & CSS. Berkeley, CA:
Peachpit Press, 2007. Print.
• "Learning CSS". W3.org. N.p., 2016. Web. 19 Mar. 2016.
• Poteet, Chris. "Introduction To Cascading Style Sheets (CSS)".
Pt.slideshare.net. N.p., 2007. Web. 19 Mar. 2016.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

34. Web Development Training
Modulo JavaScript
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

35. O que vamos aprender
sobre JS?
ü Vamos aprender o que é a linguagem JavaScript e onde ela é
inserida no Desenvolvimento Web;
ü Entender quais são as limitações do HTML / CSS;
ü Saber como reconhecer um código JavaScript só de ver!

36. 3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

37. 3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

38. Separação
entre camadas
• HTML:
• Conteúdo;
• Dados e estrutura;
• CSS:
• Apresentação;
• Formatação, layout, cores, fontes, posicionamento.
• JavaScript:
• Comportamentos;
• Programação.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

39. O que é JavaScript?
• Linguagem de
Programação;
• Linguagem de
Scripting;
• Multiplataforma;
• Padronizada:
• ECMAScript;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

40. O que é JavaScript?
• Executada, principalmente, no navegador;
• Linguagem + Popular do mundo;
• Linguagem + Incompreendida;
• Serve para tudo:
• Programas completos;
• Games;
• Animações;
• Etc.
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

41. JavaScript é uma linguagem imperativa
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

42. Repitam Comigo!
JavaScript NÃO é JAVA
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

43. Mais uma vez:
JavaScript NÃO é JAVA
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

44. Só para deixar claro:
JavaScript NÃO é JAVA
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

45. 3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

46. Reconhecendo código JavaScript
<script type="text/javascript">
//...
</script>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

47. <script type=“text/javascript”>
// Isso é um Comentário!
alert("Ola, JavaScript");
</script>
Chamada à Função
(procedimento)
Parâmetro da Função
Terminador de
Instrução
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
Componentes de um código JavaScript

48. <h1 id="titulo">Clique aqui!</h1>
<script type="text/javascript">
var oi = function()
{
alert("Oi, JavaScript!");
}
document.getElementById("titulo").onclick = oi;
</script>
Definição de função
(procedimento)
Registro de Evento
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0
Componentes de um código JavaScript

49. Partes de um código JavaScript
Perguntas a serem feitas
• O QUE?;
• QUANDO?;
• QUEM?;
• COMO?;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

50. Meu primeiro JavaScript (na verdade é o
segundo...)
• Abrir uma janela de mensagem quando o elemento
título for clicado;
• O QUE: exibir uma mensagem;
• QUANDO: quando o elemento for clicado;
• QUEM VAI RECEBER A ORDEM/EFEITO/AÇÃO/
MODIFICAÇÃO DE PROPRIEDADE: o elemento
título.
• COMO: com a função alert;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

51. <h1 id="titulo">Clique aqui!</h1>
<script type="text/javascript">
var exibirMensagem=function()
{
alert("Oi, JavaScript!");
}
document.getElementById("titulo").onclick = exibirMensagem;
</script>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

52. <h1 id="titulo">Clique aqui!</h1>
<script type="text/javascript">
var exibirMensagem=function()
{
alert("Oi, JavaScript!");
}
document.getElementById("titulo").onclick =
exibirMensagem;
</script>
• O QUE: exibirMensagem;
• QUANDO: quando o elemento for clicado;
• QUEM: o elemento título;
• COMO: alert;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

53. Formas de uso
• Dentro próprio código HTML:
<a href="#" onclick="alert('alow mundo!')">Diga alô</a>
• Separado em uma tag de script (preferencialmente dentro da tag
<head></head>):
<script type="text/javascript">
alert("alow mundo") xt/ja;
</script>
• Mais separado ainda dentro de um arquivo “texto” com extensão .js
sendo chamado por uma tag script:
<script type="text/javascript" src="script.js"></script>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

54. • Usaremos dois arquivos texto:
• Um com HTML com extensão .html
• Outro com JavaScript com extensão .js
• Haverá ainda uma tag HTML que “unirá” os arquivos
Dois arquivos separados?
.html
estrutura
.js
comportamento
<script>..</script>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

55. Alô mundo - versão 1
<html>
<head>
<title>Alo!</title>
<script type="text/javascript” >
alert("Alo mundo!");
</script>
</head>
<body>
...
</body>
</html>
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

56. Alô mundo – versão 2
...
<head>
<title>Alo!</title>
<script type="text/javascript” src = “alomundo.js”>
</script>
</head>
...
alert("alo mundo");
alomundo.html
alomundo.js
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

57. Algumas bibliotecas
• Prototype: http://www.prototypejs.org/
• script.aculo.us: http://script.aculo.us/
• Yahoo! User Interface Library (YUI): http://
developer.yahoo.com/yui/
• Dojo: http://dojotoolkit.org/
• jQuery: http://jquery.com/
• MooTools: http://mootools.net/
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

58. Artigo Interessante Sobre JS!
ü The World's Most Misunderstood
Programming Language Has Become the
World's Most Popular Programming
Language
ü http://javascript.crockford.com/
popular.html
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

59. Next Step
• Irão receber ainda hoje um link com o Material de estudos em
Grupo;
• Cada Grupo deverá produzir uma pagina para recolha de
qualquer informação que acha que é importante;
• Terão 5 minutos por grupo para apresentar na proxima
semana;
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0

60. Web Development Training
Considerações Finais
3/19/16
Presenta.on licenced under non-commercial crea.ve
commons 3.0