Web Training Aula 01: Introduction to Laravel

Web Development Training

Apresentação dos Formadores

Ruben Manhiça Jorge Lobo Hervé Muneza

3/19/16 Presenta.onlicencedundernon-commercialcrea.vecommons3.0

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.


Jorge Lobo

•  Licenc iado em Engenhar ia Informática

•  Desenvolvedor no BIM (Trabalha Com o Sistema IZI)

• Aficionado pelo Desenvolvimento mobile

• Gosta de viajar e dançar.


Hervé Muneza

• Msc em Engenharia Informática

•  Fundador de Alphabit

• Aficionado pelo Desenvolvimento web

• Gosta de viajar, aprender e conhecer novas pessoas.



Programa de Treinamento Temas a serem abordados Metodologia Material Necessário


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;


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;


Material Necessário



Modulo HTML Definição Historia de HTML Sintaxe Exemplo de Código


• 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>


• 1990 – Criação do HTML

Tim Berners-Lee


• 1994 – HTML2 e formação de W3C

• 1997 – HTML4

• 2004 – xHTML1.0

• 2008 – HTML5

Elementos


<title> Melhor titulo do mundo </title>

Atributos


<img src="logo.png">

Comentários

Exemplo


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.



Modulo CSS Definição Seletores Sintaxe Exemplo de Codigo


O que é CSS ?

• Cascading Style Sheet (CSS) é um mecanismo simples para adicionar estilo no conteúdo da Web.


• Porque CSS ?

• Fácil Manutenção das paginas;

• Organização do projeto;

• Carregamento da Pagina;

• 1996 - 1998 - 1999


Seletores CSS


Regra:Seletor{declaração;}

Seletores CSS


Exemplo de seletores


Como Usar CSS

• Recomendado

Externo <html>

<head> <title> CSS Externo </title>

<link href=“stylesheet” type=“text/css” href=“location.css” /> ...


Como Usar CSS

Interno <html>

<head> <title> CSS Interno </title>

<style type=“text/css”> p {color:red;}

</style> ...


Como Usar CSS

• Não recomendado

Em linha <html> ...

<body> <p style=“font-size: 12px”>Lorem ipsum</p>

</body> ...


Peso por Cascatas

• Maior Peso ao Menor

•  Em Linha

•  Interno

•  Externo


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.



Modulo JavaScript


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!

Separação entre camadas

•  HTML: •  Conteúdo; •  Dados e estrutura;

•  CSS: •  Apresentação; •  Formatação, layout, cores, fontes, posicionamento.

•  JavaScript: •  Comportamentos; •  Programação.


O que é JavaScript?

• Linguagem de Programação;

• Linguagem de Scripting;

• Multiplataforma; • Padronizada:

•  ECMAScript;


O que é JavaScript? • Executada, principalmente, no navegador; • Linguagem + Popular do mundo; • Linguagem + Incompreendida; • Serve para tudo:

•  Programas completos; •  Games; •  Animações; •  Etc.


JavaScript é uma linguagem imperativa


Repitam Comigo! JavaScript NÃO é JAVA


Mais uma vez: JavaScript NÃO é JAVA


Só para deixar claro: JavaScript NÃO é JAVA


Reconhecendo código JavaScript

<script type="text/javascript"> //...

</script>


<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


Componentes de um código JavaScript

Partes de um código JavaScript Perguntas a serem feitas

• O QUE?; • QUANDO?; • QUEM?; • COMO?;


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;


<h1 id="titulo">Clique aqui!</h1> <script type="text/javascript"> var exibirMensagem=function() {

alert("Oi, JavaScript!"); } document.getElementById("titulo").onclick = exibirMensagem; </script>


<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;


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>


• 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>


Alô mundo - versão 1 <html> <head> <title>Alo!</title> <script type="text/javascript” > alert("Alo mundo!"); </script>

</head> <body>

... </body> </html>


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


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/


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


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;



Considerações Finais


Web Training Aula 01: Introduction to Laravel

Technology

Transcript of Web Training Aula 01: Introduction to Laravel