WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

Transcrição

1 WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

2 Novo projeto com NetBeans A partir de hoje, vamos trabalhar com projetos no NetBeans Abra o NetBeans e crie um novo projeto. Para isso vá até a aba Arquivo > Novo projeto... 12/8/2011 2

3 Novo projeto com NetBeans Em Categorias selecione PHP, e em Projetos selecione Aplicativo PHP e então clique em Próximo > 12/8/2011 3

4 Novo projeto com NetBeans Preencha os campos de acordo com a tela acima. Repare o destino da Pasta de códigos fonte. Feito isso, clique em Próximo >. 12/8/2011 4

5 Novo projeto com NetBeans Repare na URL do projeto, que já está redirecionando para que é a pasta que criamos dentro de www. Finalmente, clique em Finalizar. 12/8/2011 5

6 Novo projeto com NetBeans Veja que agora estamos trabalhando com um arquivo em php, neste caso o index.php. Repare também que o NetBeans já criou a estrutura HTML padrão. Porém é padrão HTML5, então corrija-a para o xhtml1.0 que é o que estamos usando. 12/8/2011 6

7 Novo projeto com NetBeans Repare mais a esquerda, temos dentro da aba Projetos, o nosso projeto em PHP chamado jquery. Dentro deste projeto temos uma pasta chamada Arquivos de código-fonte, e dentro desta pasta temos o arquivo index.php qual vimos no slide anterior. 12/8/2011 7

8 Novo projeto com NetBeans Navegue até d:\webdesign\wamp\www\jquery e verá o arquivo index.php e uma pasta chamada nbproject. Esta pasta contém arquivos de configuração do NetBeans para este projeto, portanto não exclua-a! 12/8/2011 8

9 Opção play do NetBeans Agora que temos um projeto NetBeans, podemos usar mais recursos da IDE, como por exemplo, a opção play que você vê abaixo. Ela irá rodar nosso site, abrindo o navegador já na URL principal. Isso é bastante útil, porém use-a com cautela, pois em cada play que você clica, é aberta uma nova aba no navegador com seu site. 12/8/2011 9

10 O que é jquery? jquery é uma biblioteca rápida e concisa que simplifica o acesso ao documento HTML, manipula eventos, gera animações e interações AJAX para um desenvolvimento web rápido. jquery é projetada para mudar o modo que você escreve JavaScript. Fonte site oficial: 12/8/

11 O que exatamente é jquery? Ela é um conjunto de código JavaScript escrito que irá facilitar sua vida; Proporciona a compatibilidade de seu código entre os navegadores, isso significa que você escreve apenas uma vez, e funciona em todos os navegadores modernos! 12/8/

12 Bibliotecas JavaScript Existem várias bibliotecas para JavaScript que prometem mudar sua vida. Assim como todo o resto, a melhor é aquela que você mais gostar e atender suas necessidades. Confira aqui um excelente post sobre isso: 12/8/

13 Hello World com jquery É muito fácil trabalhar com jquery, basta incluí-la no código e começar! Primeiro acesse o site e faça o download. 12/8/

14 Hello World com jquery Existem duas versões Produção: Contém hoje 31KB e é compactada, de forma a remover todos os espaçamentos e documentação. Ilegível. Desenvolvimento: Tem 229KB de tamanho. Possui toda a documentação. Esta versão permite você entender como a jquery funciona. 12/8/

15 Hello World com jquery Selecione a versão de desenvolvimento (Development) e clique em Download 12/8/

16 Hello World com jquery Selecione todo o texto, pressionando Ctrl + A e depois copie-o. 12/8/

17 Hello World com jquery Volte para o NetBeans e crie um novo arquivo JavaScript em seu projeto chamado jquery. 12/8/

18 Hello World com jquery 12/8/

19 Hello World com jquery 12/8/

20 Hello World com jquery Cole o texto copiado para o arquivo jquery.js 12/8/

21 Hello World com jquery Insira o jquery.js e o master.js em sua página. Crie o arquivo master.js dentro da pasta js. Mova o arquivo jquery.js para a pasta js de seu site. Salve tudo e teste! 12/8/

22 Hello World com jquery Faça seu primeiro teste com jquery: 12/8/

23 Hello World com jquery 12/8/

24 Hello World com jquery Quando trabalhamos com JavaScript para selecionar elementos HTML, precisamos executar as chamadas para esses elementos, somente após todos estarem carregados, ou seja, quando o documento (document) estiver pronto (ready): 12/8/

25 Brincando com jquery Crie um arquivo CSS com o seguinte conteúdo: 12/8/

26 Brincando com jquery Agora no seu master.js: 12/8/

27 Brincando com jquery E no index.php: 12/8/

28 Brincando com jquery Teste o resultado: 12/8/

29 Arredondando cantos com jquery Uma das coisas mais legais em se ter uma biblioteca como essa é não se preocupar com compatibilidade entre navegadores. Ao usar propriedades para arredondar cantos de uma DIV por exemplo, vemos que não funciona geralmente no IE, ou precisamos fazer muitas gambiarras. Os problemas acabam quando usamos o plugin corner desenvolvido para jquery, veja exemplos do que você pode fazer aqui: 12/8/

30 Arredondando cantos com jquery Acesse o link do slide anterior e faça o download do plugin 12/8/

31 Arredondando cantos com jquery Assim como na instalação do jquery, copie todo o conteúdo: 12/8/

32 Arredondando cantos com jquery Crie então um arquivo js, por exemplo corner.js, no subdiretório js do seu site e cole nele o conteúdo copiado. 12/8/

33 Arredondando cantos com jquery Por fim, adicione o corner.js no seu index.php, para que seja carregado com todo o resto. Repare na ordem dos arquivos js. corner é um plugin do jquery, portanto deve ser adicionado depois dele. master.js é nosso arquivo, onde iremos invocar tanto chamadas ao jquery quanto ao corner, portanto, é o último a ser adicionado. 12/8/

34 Arredondando cantos com jquery Agora edite seu master.js como abaixo. Repare na linha 17 que ocorre o fechamento da função anônima, que você fez antes. 12/8/

35 Arredondando cantos com jquery Repare que em $( #canto_arredondado ) estamos pegando um elemento que tem o valor de id sendo canto_arredondado. Logo em seguida, ocorre uma chamada da função corner() que irá então arredondar os cantos do elemento à esquerda: 12/8/

36 Arredondando cantos com jquery Certo, se estamos acessando um elemento pelo jquery, precisamos primeiro ter esse elemento no HTML. Para facilitar a organização dos exemplos, deixe o corpo de sua página deste modo: 12/8/

37 Arredondando cantos com jquery E o css também, modifique-o como segue: 12/8/

38 Arredondando cantos com jquery Veja e entenda o resultado! 12/8/

39 Arredondando cantos com jquery Existem vários modos de se arredondar os cantos, no site do plugin corner você pode conferir todas as opções. Por exemplo, se você quiser arredondar apenas os cantos superiores da DIV, e quiser uma curva de 30px, faça o seguinte: Repare que você irá precisar usar o efeito padding nesta div, para que seu conteúdo fique no lugar certo. 12/8/

40 Formulários e jquery Podemos usar jquery para obter valores dos campos de formulários, trabalhar com eventos como onblur, onfocus e assim por diante. Isso é assunto para a próxima aula, por hoje, ficam as dicas: 12/8/

41 Exercício Pesquise uma aplicação de jquery na internet, e desenvolva-a em seu projeto. Pode ser um menu (pesquise por menus jquery ), um efeito ( efeitos jquery ), ou qualquer outra aplicação, desde que use jquery. Sugestão: faça a sua calculadora funcionar com jquery. Em seu trabalho deve-se ter a fonte (link) de onde você viu o exemplo. Apesar de estar em inglês, o link abaixo é muito útil, use o tradutor do google para lhe ajudar. Existem centenas de possibilidades para se aplicar jquery. Aqui encontramos uma lista de tutoriais oficiais do site: 12/8/