Douglas DSW I: mudanças entre as edições

De IFSC
Ir para navegação Ir para pesquisar
imported>Douglas
imported>Douglas
 
(206 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
=Desenvolvimento de Sistemas Web I=
=Plano Instrucional=


;Apresentação
:'''Identificação'''<span style="color:#008000;"> | CURSO DE INFORMÁTICA PARA INTERNET - E-TEC/EAD/TUBARÃO


Atual - 2013 | <span style="color:#F07D00;"> Professor Douglas Alexandre Rodrigues de Souza do Campus Itajaí do IFSC.</span>
:'''Semestre'''<span style="color:#008000;"> | 2015/2 - Módulo II - B</span>


2013 - 1994 | <span style="color:#F07D00;"> Técnico de Tecnologia da Informação do Câmpus São Jose.</span>
:'''Unidade Curricular'''<span style="color:#008000;"> | Desenvolvimento de Sistemas Web I</span>


;Formação Acadêmica
:'''Carga horária'''<span style="color:#008000;"> | 60h</span>


Mestre em Mecatrônica Industrial - IFSC - Campus Florianópolis.
:'''Dias da Interação síncrona'''<span style="color:#008000;"> | Quintas-feiras</span>


Especialista em Desenvolvimento de Produtos Eletrônicos - IFSC - Campus Florianópolis.
:'''Horário da interação síncrona'''<span style="color:#008000;"> | Das 19h às 19h45min</span>


Graduado em CST em Sistemas de Telecomunicações - IFSC - Campus São José.
=Apresentação=


;Formação Complementar
Caro(a) Estudante,



Curso de curta duração em Desenvolvimento de Sistemas de Informação - Oracle.
Seja muito bem-vindo à Unidade Curricular de Desenvolvimento de Sistemas Web I.
Universidade do Sul de Santa Catarina, UNISUL, Tubarao, Brasil.


Técnico em Telecomunicações pelo IFSC - Câmpus São José.
Nesta unidade você identificará as ferramentas de ''software'' e também de ''hardware'' necessárias à preparação do ambiente de programação Web. Você saberá como instalar e configurar os aplicativos envolvidos no desenvolvimento de sistemas para Web. No final da unidade, serão introduzidos os conceitos relativos a modelagem de dados a serem aplicados na próxima unidade.


=Introdução=
Participem das interações semanais! Será o momento para questionar sobre suas dúvidas e curiosidades sobre assuntos relacionados ao desenvolvimento de sistemas e uso dos aplicativos. Também será o momento de preparação para a semana posterior.


;Linguagens
'''Fórum'''. Poste sua dúvida ou experiência, utilize esse meio para tirar todas as dúvidas e compartilhar experiências com os colegas.


HTML
Bons Estudos!!!
Abraços,
Prof. Douglas A.


JavaScript
=Plano de Ensino=


HTML5
[https://wiki.ifsc.edu.br/mediawiki/images/3/3d/PE_DSW_I_DouglasARS.pdf Plano de Ensino PDF]


;Navegadores
=Atividades=


IE
:Semana 1 - [[PI_S1_DSW_I_DouglasARS |  De 09/10/2015 a 14/10/2015 - Linux Ubuntu, Netbeans e Apache.]]


Netescape
:Semana 2 - [[PI_S2_DSW_I_DouglasARS |  De 16/10/2015 a 21/10/2015 - MySQL, PHP e phpMyAdmin.]]


Mozilla
:Semana 3 - [[PI_S3_DSW_I_DouglasARS |  De 23/10/2015 a 28/10/2015 - Configurando, testando e comparando o MySQL.]]


Chrome
:Semana 4 - [[PI_S4_DSW_I_DouglasARS |  De 30/10/2015 a 04/11/2015 - Testando o phpMyAdmin, instalando EasyPHP e o DIA.]]


;Plugins
:Semana 5 - [[PI_S5_DSW_I_DouglasARS |  De 06/11/2015 a 11/11/2015 - Testando o DIA, instalando o DBDesigner e BrModelo.]]


;Flash
:Semana 6 - [[PI_S6_DSW_I_DouglasARS |  De 13/11/2015 a 18/11/2015 - Ligação NetBeans-MySQL-PHP-Java e o MySQL Wokbench.]]


:Semana 7 - [[PI_S7_DSW_I_DouglasARS |  De 20/11/2015 a 25/11/2015 - Xampp, PostgreSQL e pgAdmin3.]]


:Semana 8 - [[PI_S8_DSW_I_DouglasARS |  De 27/11/2015 a 02/12/2015 - Modelagem de dados e Tipos de dados.]]


=Principais componentes de uma aplicação Web=
=Fórum de notícas=


;HTML
*12 linguagens de programação requisitadas no mercado
;CSS
;JavaScript


;Editores HTML
:[[Douglas_Prog_R | Reportagem vinculada em 2015 na internet pela revista Exame da Editora abril.]]


;Infraestruturas de pastas de uma aplicação
*EaD


;Criando o arquivo HTML
:[[Douglas_EaD | Saiba como funciona o ensino a distância]]


;Considerações


;Criando o arquivo CSS
<!--
=Ambiente de Programação=


;Criando o arquivo javaScript
=Modelagem de Dados=


;Identificando o $ (cifrão)
Para se desenvolver aplicações que utilizam banco de dados relacionais, você deverá possuir os conceitos básicos sobre '''modelagem de dados'''. Não importa se sua aplicação é simples ou complexa. A correta modelagem dos seus dados tornará sua aplicação mais robusta e fácil de manter.


=Criando a primeira aplicação=
Nota: O ERWin foi utilizado como ferramenta para modelagem para os exemplos citados.
(Foto ERWIN)


;Construindo a primeira aplicação
- Qual o objetivo da modelagem de dados? Pra que modelar?


;Criando a lista de tarefas
*Representar o ambiente observado.
*Documentar e normalizar.
*Fornecer processos de validação.
*Observar processos de relacionamentos entre objetos.


Modelar implica em construir modelos. Então como fazer isto?


Podemos definir as etapas envolvidas na construção de modelos em :


=Roteiro=
#Modelo conceitual
*Introdução
#Modelo lógico
*Os Componentes de Uma Aplicação HTML5
#Modelo físico
*Criando Nossa Primeira Aplicação
*Modelos HTML
*Referências


==Introdução==  
==Modelo conceitual==


*O HTML (Hypertext Markup Language) foi criado no início dos anos 90
Representa as regras de negócio sem limitações tecnológicas ou de implementação. Por isto é a etapa mais adequada para o envolvimento do usuário que não precisa ter conhecimentos técnicos.<br>
Neste modelo temos:


*JavaScript (apesar do nome não é nada parecida com a linguagem de programação Java) foi desenvolvida por uma empresa chamada Netscape – Ela marca o início do script client-side embutido no navegador Web, movendo HTML de um conteúdo estático para algo um pouco mais complexo
*Visão Geral do negócio.
*JavaScript não faz parte da especificação HTML central, mas a associação entre navegadores, HTML e JavaScript é tão próxima que não faz sentido mantê-la em separado
*Facilitação do entendimento entre usuários e desenvolvedores.
*A especificação HTML5 assume que JavaScript está disponível e precisamos de JavaScript para usar as novas características mais interessantes adicionadas pelo HTML5
*Possui somente as entidades e atributos principais.
*Pode conter relacionamentos n para m.


==Fim da “Batalha dos Navegadores”==  
==Modelo lógico==  


Houve um período no mercado de navegadores onde as companhias (Microsoft e Netscape) competiam adicionando características únicas a seus navegadores – A ideia era fazer com que desenvolvedores Web adotassem apenas um navegador em particular, fazendo com que os usuários preferissem um determinado navegador em vez de outro
Leva em conta limites impostos por algum tipo de tecnologia de banco de dados. (banco de dados hierárquico , banco de dados relacional ,etc.). <br>
*Mas os desenvolvedores optaram por utilizar características que estavam disponíveis em todos os navegadores
*No final, a Microsoft chegou a ser condenada por violações antitruste por distribuir o Internet Explorer de graça, em conjunto com o SO Windows
*O fim da Netscape e as penalidades dadas à Microsoft acabaram com a guerra dos navegadores – Um novo cenário de navegadores Web baseados em padrões surgiu – A especificação HTML foi aprovada e a adoção do padrão se tornou uma norma
*Hoje em dia navegadores competem pelo nível de conformidade com as normas – O que tornou as coisas muito mais fáceis para desenvolvedores e usuário


==O Domínio dos Plugins==
Suas características são:
*Plugins têm sido uma boa coisa para a Web: – Eles permitem que empresas forneçam suporte a características avançadas e conteúdo rico que não pode ser alcançado de maneira fácil somente com HTML
 
*Muitos plugin foram largamente adotados e com características muito avançadas – É o caso do Adobe Flash, onde muitos sites são completamente implementados em Flash
*Deriva do modelo conceitual e via a representação do negócio
*Com os plugins, o navegador e o HTML passam a funcionar somente como um container – Posição nada confortável para criadores de navegadores porque coloca o controle nas mãos do fabricante do plugin
*Possui entidades associativas em lugar de relacionamentos n:m
*Este é um dos principais motivos que levaram ao desenvolvimento do HTML5
*Define as chaves primárias das entidades
*Duas empresas em particular estão se afastando do Flash: – Apple que não dá suporte ao Flash no iOS – Microsoft que desabilitou o Flash a partir da versão do Internet Explorer para o Windows 8
*Normalização até a 3a. forma normal
8. HTML Semântica • Versões iniciais do HTML não se preocuparam em separar o significado do conteúdo, da maneira como ele é apresentado – Se quiséssemos indicar que uma parte de um texto era importante, aplicávamos um elemento HTML para colocar o texto em negrito – Ficava a critério do usuário fazer a associação de que um conteúdo em negrito é um conteúdo importante – Isto é uma coisa que humanos fazem facilmente mas que para agentes autômatos é muito difícil • O processamento automático de conteúdo se tornou importante desde que o HTML foi criado
*Adequação ao padrão de nomenclatura
9. HTML5 • HTML5 é literalmente uma teia de padrões inter- relacionados – Uma boa ideia pois navegadores podem rapidamente implementar características maduras, enquanto outras continuam a se desenvolver – Ruim pois desenvolvedores têm que verificar se os navegadores dão suporte a cada característica que desejem colocar em uso
*Entidades e atributos documentados
10. Principais Características de HTML5 • Do núcleo de HTML5: – Fazem parte da versão da especificação oficial da W3C – Inclui novos elementos de semântica – Novos e melhorados componentes (widgets) para formulários – Suporte a áudio e vídeo – Tela (canvas) para desenho com JavaScript • Características que poderão vir a ser HTML5: – Saltam a especificação original e dão suporte ao desenvolvimento de aplicações Web ricas – Armazenamento de dados local (local data storage) – Aplicações offline – Mensagens
 
11. Principais Características de HTML5 • Características algumas vezes chamadas de HTML5: – Próxima-geração de características que são geralmente agrupadas com HTML5, mesmo não fazendo parte do padrão – CSS3 – Localização geográfica (geolocation)
==Modelo Físico==
12. Os Três Princípios de HTML5 • Não “quebre” a Web – Padrões não devem introduzir mudanças que façam páginas deixarem de funcionar, o que felizmente, raramente acontece – Também significa que um padrão não deve mudar as regras de maneira a, no processo, tornar uma página Web obsoleta – Por exemplo, XHTML 2 quebrou a Web pois demandou de imediato uma mudança na forma como páginas Web são escritas – páginas antigas ainda funcionam por questão de compatibilidade, mas se quisermos atualizar uma página, gastaremos horas corrigindo os “erros” que XHTML 2 baniu – Por outro lado, HTML tem uma visão diferente – tudo que era válido antes de HTML5 permanece válido em HTML5, ou seja, tudo que era válido em HTML 4.01 permanece válido em HTML5
 
13. Os Três Princípios de HTML5 • Pavimente os “caminhos de vaca (cowpaths)” – Um cowpath é um caminho difícil que leva as pessoas de um ponto a outro mas que continua sendo usado – pode não ser a melhor forma de se locomover, mas em algum ponto é a solução mais prática – HTML5 padronizou estas técnicas não oficiais mas largamente utilizadas – Por exemplo, a habilidade de arrastar e soltar nos navegadores, que apesar de inicialmente criada no IE 5 e hoje adotada em todos os navegadores, é confusa e muito complicada – Isto levou alguns projetistas a reclamarem: “HTML não apenas encoraja mal comportamento, ele os define”
Leva em consideração limites impostos pelo SGBD (Sistema Gerenciador de Banco de dados) e pelos requisitos não funcionais dos programas que acessam os dados. <br>
14. Os Três Princípios de HTML5 • Seja Prático – Mudanças devem ter um objetivo prático – Quanto mais existente a mudança, maior precisa ser a recompensa em realizá-la – Desenvolvedores Web podem preferir padrões bem projetados, consistentes e sem particularidades, mas isto não é motivo suficiente para mudar uma linguagem que foi utilizada para criar bilhões de páginas – Por exemplo, o terceiro Web site mais poupular é o YouTube, mas por causa do HTML não dar suporte a transmissão de vídeo antes do HTML5, YouTube teve que utilizar o plugin Flash. Apesar de funcionar bem em grande parte de computadores conectados à Web, existem alguns computadores, como aqueles de empresas que não permitem a instalação do Flash, e dispositivos móveis (iPhone, iPad, Kindle), que não dão suporte ao Flash – Então seria uma boa opção estender o padrão HTML para dar suporte direto a uma das maneiras mais fundamentais para as pessoas acessarem páginas Web hoje em dia – assistir vídeos
 
15. Os Componentes de Uma Aplicação HTML5 • Aplicações escritas em HTML5 são como aplicações escritas em qualquer outra linguagem de programação – Existe certa quantidade de infraestrutura necessária para ser colocada antes que possamos iniciar o trabalho • Considerando que parte do desenvolvimento de aplicações consiste de repetição de coisas básicas cada vez que iniciamos o processo, seria interessante a construção de um modelo de aplicação para iniciarmos rapidamente sem ter que “reinventar a roda” todas as vezes • Iremos então, criar e utilizar um modelo como base para o desenvolvimento de todas as nossas aplicações
Características:
16. Os Componentes de Uma Aplicação HTML5 • Toda aplicação Web inicia com três componentes: HTML, CSS e JavaScript • Poderíamos colocá-los em um único arquivo, o que é aceitável para muitas aplicações simples, mas como iremos tratar do desenvolvimento de aplicações reais, iremos criar três arquivos diferentes, um para cada componente, e colocá-los em uma pasta chamada template – Devemos nomeá-los como: app.html, app.css e app.js
 
17. Os Componentes de Uma Aplicação HTML5
*Elaborado a partir do modelo lógico
18. Editores HTML5 • Ferramentas de software que ajudam desenvolvedores a projetar Web sites e páginas HTML • Apesar de podermos utilizar qualquer editor disponível na Internet para editar Web sites, editores HTML oferecem maior funcionalidade e trabalham com tecnologias como CSS, XML e JavaScript • Mercury Editor (http://jejacks0n.github.io/mercury/) • Rendra: Online HTML5 Editor (http://rendera.heroku.com/) • Maqetta (http://maqetta.org/) • Aptana Studio (http://aptana.com/) • Aloha Editor (http://www.aloha-editor.org/) • Blue Griffon (http://bluegriffon.org/) • Ver mais em http://codegeekz.com/best-html5-editors/
*Pode variar segundo o SGBD
19. Infraestrutura de Pastas de Uma Aplicação • Todos os arquivos na pasta raiz da aplicação • Pasta lib com bibliotecas JavaScript de terceiros que a aplicação pode precisar – Iremos sempre utilizar a biblioteca jQuery (jquery.com) – biblioteca JavaScript de código aberto mais popular • Se existirem outros recursos, como imagens ou arquivos de áudio, deveremos colocá-los nas pastas images e audio, respectivamente:
*Pode ter tabelas físicas
20. Criando o Arquivo HTML • O primeiro componente a ser criado é o arquivo HTML base app.html – Iremos mantê-lo o mais simples quanto possível • Não deve existir nenhum bloco de estilo ou script nele – Manter markup, estilo e comportamento separados tornará a aplicação mais fácil de corrigir e manter – Podemos, por exemplo, mudar completamente o estilo de uma interface do usuário de uma aplicação modificando o arquivo CSS sem precisar tocar na sua funcionalidade • O arquivo HTML irá incluir os arquivos CSS e JavaScript, bem como a biblioteca jQuery, e definir uma estrutura simples do corpo do documento que a maioria das aplicações irá utilizar
*Pode ter colunas físicas
21. Criando o Arquivo HTML
*Precisamos definir agora entidade e atributo. O que são e o que representam?
22. Considerações • Em HTML5 a declaração do tipo de documento é bem mais simples que em versões anteriores que pareciam com: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Em HTML5: <!DOCTYPE html> • Em HTML5, o elemento div é um container genérico (marcador de seção) indicado para quando não houver um elemento de valor semântico específico para o conteúdo a ser marcado • HTML5 possui um conjunto completo de novos elementos semânticos com maior significado que uma tag <div>
 
23. Considerações • Como iremos escrever aplicações e não páginas de conteúdo, não iremos focar muito nestes tipos de elementos • Visão geral de algum dos elementos semânticos mais úteis: – <header>: define um grupo de títulos ou o cabeçalho de uma determinada seção – <footer>: define o rodapé das seções ou da página – <nav>: define um grupo ou bloco de links de navegação – <aside>: define um elemento lateral que pode conter blocos de navegação (NAVs), citações e outras informações que costumamos colocar em uma sidebar
Uma '''Entidade''' pode ser definida como qualquer coisa do mundo real, abstrata ou concreta, na qual se deseja guardar informações. Exemplos de entidades: Cliente, Produto, Contrato, Vendas.
24. Considerações • Visão geral de algum dos elementos semânticos mais úteis (cont.): – <article>: define a área onde há um artigo, texto, redação, conteúdo e etc. – <section>: define um bloco ou um grupo de um assunto específico. É importante entender que a section agrupa diversos elementos que tenham relação entre si. Por exemplo, se há uma área no site que há links, conteúdo, imagens e etc de um assunto em comum, você agrupará esses elementos com uma section. Nesse caso, ele entrou no lugar daquele div que fazíamos para dividir grandes blocos de assuntos em comum
 
25. Considerações • Alguns elementos e atributos existentes em versões anteriores agora não estão presentes em HTML5 • A maioria deles estão relacionados com layouts e fontes, incluindo <big>, <center>, <font>, <strike> e <u> • Elementos obsoletos como <frame> and <applet> também foram eliminados
Um atributo é tudo o que se pode relacionar como propriedade da entidade. (coluna , campo , etc,..). Exemplos de atributos: Código do Produto (Entidade Produto), Nome do Cliente (Entidade Cliente).
26. Criando o Arquivo HTML • Olhando para o conteúdo do elemento <body> em nosso exemplo: – <div id = “app”>: empacota o código da aplicação, outros elementos, como navegação ou que não estejam relacionados com a aplicação, devem estar do lado de fora deste elemento
 
27. Criando o Arquivo HTML • Dentro do elemento app temos mais três elementos: – <header>: irá conter o nome da aplicação, como em uma barra de título (não confundir com o elemento <title> da seção <head> do documento) – <div id=“main”>: onde o código para a parte principal da aplicação será colocado – <footer>: será utilizado como uma barra de status para mostrar a situação da aplicação
Nota: Chama-se Domínio o conjunto de valores possíveis do atributo.
28. Criando o Arquivo CSS • O arquivo CSS base, chamado app.css irá conter todos os estilos básicos que serão usados pela aplicação, como fontes e cores padrão • A primeira parte do arquivo CSS contém alguns estilos de elementos do documento que atribuem a aparência (look and feel) básica
 
29. Criando o Arquivo CSS
Obs: Nenhum modelo é suficientemente claro se não for acompanhado de uma definição formal dos elementos, fazemos isto através do Dicionário de Dados . Lembre-se conceitos que podem ser triviais a quem esta modelando podem não ser para pessoas leigas no assunto. Assim o dicionário de dados tem o objetivo de deixar claro qualquer informação que seja de valia para o processo de compreensão e unificação de conceitos.
30. Criando o Arquivo CSS • Olhando para o estilo aplicado ao corpo do documento que irá influenciar os outros elementos: – O tamanho da fonte foi atribuído em 1em em vez de um tamanho fixo em pixels, usando o tamanho de fonte padrão do navegador (tipicamente 1em = 16px por padrão na maioria dos navegadores) – Podemos então basear outras medidas usando ems ou percentual, dando um layout mais reativo e tornando a mudança mais fácil posteriormente – Depois removemos todo os preenchimentos e margens de todos os elementos div, atribuindo 0 aos mesmos – A seguir mudamos o cursor para um apontador quando ele estiver sobre um botão – Finalmente, o seletor de classe .hidden, que pode ser adicionado a qualquer elemento quando quisermos ocultá-lo
 
31. Criando o Arquivo CSS • Iremos finalizar o arquivo CSS com alguns estilos para os elementos app e main – Iremos atribuir margens, preenchimento e cores
Para que fique claro vamos fazer um exercício simples: Definir uma entidade que represente as informações de uma Pessoa e descrever seus atributos.
32. Criando o Arquivo JavaScript
 
33. Criando o Arquivo JavaScript • “use strict”: informa ao JavaScript para usar padrões mais novos e precisos – Por exemplo, em versões mais antigas de JavaScript era possível usar um nome de variável sem declará-lo primeiro através da palavra-chave var – Isto tinha o efeito de torná-la uma variável global associada ao objeto window – Quando “use strict” é definido, ocorreria um erro se tentássemos fazê-lo – O objetivo é fazer com que tenhamos menos erros em nossos programas
Podemos definir a entidade '''Pessoa''' que irá representar as informações de uma pessoa. Abaixo temos a representação da entidade e de alguns de seus atributos feitos no ERWin.
34. Criando o Arquivo JavaScript • Em seguida definimos o objeto da aplicação principal myApp – Existem várias maneiras de definir um objeto em JavaScript, incluindo utilizando literais de objeto e funções construtoras • Utilizar literais de objetos é a maneira mais simples para definição de um objeto, mas estes objetos são criados assim que o JavaScript é carregado, normalmente antes do DOM estar pronto • Aqui mostramos como o nosso objeto seria criado como um literal de objeto:
 
35. Criando o Arquivo JavaScript
{| border="1" cellpadding="5" cellspacing="0"
36. Criando o Arquivo JavaScript • Considerando que a nossa aplicação irá manipular o DOM (Document Object Model), não iremos criar o objeto até que o DOM esteja pronto – Por isso utilizamos o construtor de função para criação de um objeto • O DOM é a representação interna da linguagem HTML – é uma árvore hierárquica de objetos que representam elementos HTML
! style="background: #FFC125; text-align:left; " | PESSOA: Número sequencial identificador único
37. Criando o Arquivo JavaScript Método privado Método público
|-
38. Criando o Arquivo JavaScript • Finalmente precisamos de um manipulador de eventos document-ready • O evento é disparado quando a página é carregada e a hierarquia DOM for construída completamente • Existem duas formas de adicionar o manipulador de eventos usando jQuery • A primeira, mais verbosa é: $document.read(handler); • Porém, como é provavelmente o evento mais básico e importante que iremos precisar implementar, jQuery fornece uma forma mais curta e simples: $(handler);
!style="text-align:left; color:gray" | Nome da pessoa (letras)<br> CPF da pessoa (número)<br> Data de Nascimento (data)<br>Endereco da pessoa (texto)<br>Nome do Pai (texto)<br>Nome da Mãe (texto)<br>Telefone (texto) <br>E-mail (texto)
39. Criando o Arquivo JavaScript • O manipulador de eventos é uma parte importante do código – é o equivalente à função main() em outras linguagens de programação como C, C++, C# e Java • Aqui está nosso manipulador de eventos:
|}
40. Criando o Arquivo JavaScript • Uma instância do objeto da aplicação principal é criado e atribuído à variável global chamada app associada ao objeto window • Como ela é global, pode ser acessada através de toda a aplicação • Por último, o método start() é chamado
 
41. O Identificador Cifrão ($) • O sinal de cifrão é um apelido para um objeto jQuery – Podemos substituir o sinal por jQuery e irá funcionar da mesma maneira • jQuery é a mais popular biblioteca JavaScript, que no seu nível mais básico fornece funções para acessar e manipular o DOM • Ela também oferece várias outras funcionalidades, como manipulação de eventos, animações e suporte a AJAX • Por outro lado, ela esconde muitas diferenças entre navegadores, fazendo com que nos concentremos mais na programação e menos em como o código irá funcionar em cada navegador • Ela é para JavaScript o que o biblioteca System é para Java e C#
 
42. O Identificador Cifrão ($) • Em sua maior parte, o padrão de jQuery é selecionar um ou mais elementos e realizar alguma ação ou recuperar dados deles • Por exemplo, esta é uma seleção jQuery que recupera todos os elementos div do DOM: $("div") • A consulta seguinte poderia capturar o elemento que tem o ID main: $("#main") • O sinal de # seleciona elementos com uma ID específica e o ponto (.) seleciona elementos que têm uma classe específica • O exemplo a seguir seleciona todos os elementos que são descendentes do elemento cuja ID é main e tem uma classe selected: $(#main .selected")
Note que na definição dos atributos está definindo a natureza do tipo de atributo. Exemplos de tipos de natureza: Texto, Número, Data, Indicador(sim/não), entre outros.
43. O Identificador Cifrão ($) • Após selecionarmos um ou mais elementos, podemos realizar alguma ação sobre eles • Por exemplo, a linha de código a seguir irá esconder todos os elementos retornados da consulta anterior: $(#main .selected").hide()
 
44. Construindo a Nossa Primeira Aplicação • Iremos construir uma aplicação de “lista de tarefas” que utilizará HTML5 e CSS3 • Características da aplicação: – Deverá permitir que o usuário rapidamente digite em um ou mais nomes de tarefas e as apresente em uma lista – O usuário deverá ser capaz de manipular facilmente as tarefas, as editando, removendo ou movendo para cima ou para baixo na ordem da lista – A aplicação deverá guardar as tarefas digitadas, então quando o usuário retornar, ele poderá continuar onde as deixou – A interface deverá permitir que a aplicação seja utilizada em dispositivos distintos com diferentes tamanhos de tela – O desenvolvimento será progressivo com o desenvolvimento de bibliotecas JavaScript que poderão ser reutilizadas em diferentes projetos
Alguns atributos são obrigatórios outros são opcionais.
45. Criando a Lista de Tarefas • Iremos chamar a aplicação de Task at Hand, ou Task@Hand • Primeiro faça uma cópia da pasta modelo e a renomeie para taskAtHand • Também renomeie os aquivos .html, .css e .js para taskAtHand • A primeira coisa que precisamos fazer é modificar o arquivo HTML: – Modificar o título e nomes dos arquivos CSS e JS no elemento <head>
 
46. Criando a Lista de Tarefas
''Nome é obrigatório pois toda pessoa deve ter um nome.''
47. Criando a Lista de Tarefas • A seguir iremos modificar a seção <body>: – Primeiro o nome da aplicação no elemento <header> – Em seguida adicionaremos um campo de entrada de texto no elemento <div id = “app”>, onde o usuário poderá digitar o nome da tarefa – Finalmente adicionaremos uma lista vazia de tarefas, para isso utilizaremos o elemento de lista não ordenada <ul>
 
48. Criando a Lista de Tarefas
''Telefone é opcional pois nem toda pessoa possui um telefone.''
49. Criando a Lista de Tarefas • O atributo placeholder do elemento input mostra um texto no campo até que o usuário comece a digitar algo – Isto mostra uma dica para que o usuário saiba o que deve digitar no campo – Pode ser utilizado em elementos de entrada que permitem que o usuário entre com um texto • No arquivo JavaScript iremos inicialmente renomear o objeto da aplicação para TaskAtHandApp:
 
50. Criando a Lista de Tarefas • Quando o usuário terminar de entrar com um nome de tarefa e pressionar a tecla Enter, iremos criar um novo item e adicioná-lo à lista • A primeira coisa a fazer é adicionar um manipulador de eventos ao campo de texto para que sejamos notificados quando uma tecla for pressionada – Este código será adicionado ao método start() do objeto da aplicação
 
51. Criando a Lista de Tarefas
Então podemos fazer as seguintes definições:
52. Descrevendo o Código... • Primeiro, buscamos o campo de texto usando uma seleção jQuery em sua ID, new-task-name • Então adicionamos um manipulador de evento keypress(), passando uma função que será executada todas as vezes que o evento for disparado • jQuery passa um parâmetro para a função de manipulação do evento, que é um objeto do evento keypress – Este objeto contém um campo chamado which que contém o código do caractere da tecla que foi pressionada – no nosso caso a tecla Enter, cujo código é 13
 
53. Descrevendo o Código... • Quando a tecla Enter for pressionada, o método addTask() (definido a seguir) será chamado, e então retornado false – A razão para retornar false é que não queremos que o sistema execute a ação padrão (executada por alguns navegadores quando a tecla Enter é pressionada) • Em seguida adicionamos uma chamada de função no final de keypress() para fazer com que o foco retorne para o campo de texto • Você pode estar se perguntando como isto funciona: chamamos uma função de uma função? – Isto é chamado encadeamento de funções e é talvez uma das mais úteis características de jQuery – A maioria dos métodos jQuery retorna um apontador para o próprio objeto, assim podemos realizar mais ações em uma única linha de código
;Atributo obrigatório: É aquele que para uma instância de uma entidade ou relacionamento deve possuir um valor não nulo (NOT NULL).
54. O Método addTask() • O método irá adicionar um novo item ao elemento <ul> em nosso HTML:
 
55. Descrevendo o Código... • Primeiro, pegamos o valor do campo de texto new-task- name usando o método jQuery val(), que é utilizado para pegar valores de campos de entrada • Apenas para garantir que o usuário tenha digitado alguma coisa, testamos se a variável é “verdadeira”, neste caso, testa se não é uma string vazia • Em seguida chamados o método addTaskElement() que cria um novo elemento <li> (item de uma lista) – Neste caso usamos “<li></li>” para criar um novo elemento item de lista vazio – Então o atribuímos à variável $task – Depois imediatamente preenchemos o elemento com o nome da tarefa usando o método text()
;Atributo opcional: É aquele que não é obrigatório para uma instância da entidade ou relacionamento pode possuir um valor nulo (NULL).
56. Descrevendo o Código... • Quando atribuímos um objeto jQuery a uma variável, é uma boa prática iniciarmos o seu nome com $, para indicar que ela se refere a um objeto jQuery • Agora que temos o novo elemento, precisamos adicioná- lo ao documento no local correto, que é dentro do elemento <ul id=“task-list”> – O que é feito através da seleção do emento task-list e a chamada do método append() – Isto irá adicionar um novo elemento <li> no final de tasklist • Por último, de volta ao método addTask(), limpamos o valor do campo de entrada e retornamos o foco para ele – Utilizamos encadeamento de função para realizar as duas tarefas em uma única instrução
 
57. Executando a Aplicação
Podemos ainda classificar os atributos como:
58. Removendo Uma Tarefa da Lista • Para isso iremos precisar de um botão de exclusão para cada tarefa na lista • Iremos adicionar o código para criação do botão no método addTaskElement():
 
59. Descrevendo o Código... • A primeira coisa que o método faz é criar um novo elemento <button> com uma classe de delete • Então um elemento de item de lista é criado da mesma maneira anterior, com exceção de que primeiro é adicionado o botão e então o nome da tarefa – Note que, agora o nome da tarefa está empacotado em um elemento <span class=‘task-name’> (usado para agrupar elementos em um documento) para ajudar a rastreá-lo • Por último, um manipulador de evento de clique foi adicionado para o botão de exclusão – Para excluir a tarefa do elemento lista, simplesmente chamamos o método remove() que exclui o elemento do DOM
;Chave Primária: É o atributo capaz de '''identificar exclusivamente''' cada ocorrência em uma entidade. Também conhecido como Primary Key (PK). Ex: Código do Cliente, Código do Produto. O símbolo # é usado para representar a chave primária em algumas notações.
60. Movendo Tarefas na Lista • Iremos adicionar botões para mover tarefas para cima e para baixo na lista • Para isso iremos modificar o código do método addTaskElement()
 
61. Modelos HTML • Estamos adicionando elementos em nosso DOM manualmente utilizando programação em JavaScript • Seria muito mais fácil se apenas definíssemos a estrutura de como a nossa aplicação deveria parecer em nosso arquivo HTML e o utilizássemos para criar novas tarefas
;Chave Candidata: Atributo ou grupamento de atributos que têm a propriedade de '''identificar unicamente''' uma ocorrência da entidade . Pode vir a ser uma chave Primária. A chave candidata que não é chave primária também chama-se chave Alternativa.
62. Implementando Um Modelo • Inicialmente iremos precisar de um local para colocar a marcação do modelo (template) – Iremos adicionar um <div id=“templates”> no arquivo HTML fora do elemento app e atribuí-lo à classe hidden – Em nosso arquivo CSS, a classe hidden atribui display para none em um elemento, então, nunca será visto pelo usuário
 
63. Implementando Um Modelo
Características de uma Chave Primária:
64. Descrevendo o Código... • Alguns outros elementos e atributos foram adicionados: – Um <div class=“tools”> foi colocado em torno dos botões para agrupá-los – O atributo title foi adicionado em cada botão para mostrar uma “dica” no navegador • Note que não usamos nenhum atributo ID nos elementos: – Utilizamos atributos de classe para identificar diferentes elementos – Um ID identifica unicamente um elemento, fazendo com que só possamos utilizá-lo uma vez
 
65. Implementando Um Modelo • Vamos adicionar algum estilo no arquivo CSS para os botões e seu container: – Primeiro queremos que os botões permaneçam na mesma linha que o nome da tarefa, mas o seu container <div> é um elemento a nível de bloco, iremos mudá-lo para inline-block – Iremos remover as bordas dos botões e torná-los todos do mesmo tamanho, além de remover preenchimento e margens para torná-lo mais compacto
*Não pode haver duas ocorrências de uma mesma entidade com o mesmo conteúdo na Chave Primária
66. Implementando Um Modelo
*A chave primária não pode ser composta por atributo opcional, ou seja, atributo que aceite nulo.
67. Utilizando o Modelo • Para utilizar o modelo em jQuery, pegamos o elemento do modelo e utilizamos o método clone() para fazer uma cópia do mesmo • Então inserimos a cópia no lugar que quisermos no DOM • Veja o novo método addTaskElement():
*Os atributos identificadores devem ser o conjunto mínimo que pode identificar cada instância de um entidade.
68. Utilizando o Modelo
*Não devem ser usadas chaves externas. (Atributos sobre os quais você não tem controle. Ex: CPF)
69. Editando Uma Tarefa da Lista • Permite ao usuário mudar o nome de uma tarefa: – Quando o usuário clicar no nome da tarefa, ela irá mudar para um campo de entrada de texto • Para fazer isso iremos adicionar um campo de entrada de texto no modelo, logo após o nome da tarefa: – Atribuímos a ele as classes task-name e hidden (será mostrado apenas quando o usuário clicar sobre a tarefa)
*Cada atributo identificador da chave deve possuir um tamanho reduzido
70. Editando Uma Tarefa da Lista • Acrescentamos no arquivo JavaScript um manipular de eventos para o elemento <span> em addTaskElement() que chama o método onEditTaskName() • onEditTaskName() recebe como parâmetro o elemento que disparou o evento $(this)
*Não deve conter informação volátil (que possa ser modificada).
71. Descrevendo o Código... • onEditTaskName() possui apenas uma linha mas realiza diversas tarefas através do encadeamento de funções: – Primeiro ele esconde o elemento <span> – Em seguida ele captura o campo de entrada de texto, procurando por um “irmão” (sibling) do elemento <span> que seja um elemento <input> com uma classe de task-name – Então, atribui o valor do campo de entrada com o valor do nome da tarefa através do método jQuery text() – Finalmente, torna o campo de entrada visível e coloca o foco nele
 
72. Editando Uma Tarefa da Lista • Agora precisamos fazer com que o campo de entrada desapareça quando o usuário terminar a edição do nome da tarefa • Para isso, adicionamos um manipular de evento no campo de entrada, que é disparado quando o usuário modifica o texto e pressiona Enter ou o deixa • Adicionamos o código a seguir no final do método addTaskElement():
Ao criar modelos geralmente temos diversas entidades cada uma com diversos atributos que podem se relacionar entre si.
73. Editando Uma Tarefa da Lista • O código em onChangeTaskName(): – Esconde o campo de entrada de texto – Pega o elemento <span> com o nome da tarefa e armazena em uma variável – Se o usuário digitou alguma coisa, atualiza o nome da tarefa – Chama o método show() para tornar o nome visível novamente
 
74. Editando Uma Tarefa da Lista • Uma última tarefa: – Se o usuário clicar fora do campo sem realizar nenhuma mudança, a aplicação não irá receber uma notificação de evento, então o campo não será oculto – Quando isto ocorre, podemos capturar um evento do tipo blur
O que é um relacionamento?
75. Executando a Aplicação
 
76. Guardando o Estado da Aplicação • Precisamos de uma maneira de salvar nossa lista de tarefas, de maneira que na próxima vez que o usuário retornar à aplicação as tarefas permaneçam lá • HTML5 possui uma ferramenta para isso – Web Storage – Uma nova API em HTML5 que permite armazenar informações no lado cliente • No passado, a única maneira de armazenamento no lado cliente deste tipo disponível eram os cookies • Mas cookies têm diversas limitações como da quantidade de dados, além de ocupar muito espaço • Web Storage, por outro lado, permite armazenar muito mais dados (até 5MB na maioria dos navegadores)
Um relacionamento pode ser entendido como uma associação entre instâncias de Entidades devido a regras de negócio. Normalmente ocorre entre instâncias de duas ou mais Entidades, podendo ocorrer entre instâncias da mesma Entidade (auto-relacionamento).
77. Web Storage • Consiste de dois objetos globais que possuem a mesma interface: localStorage e sessionStorage – A única diferença entre os dois é que dados armazenados na sessionStorage são perdidos quando o navegador é fechado, enquanto localStorage não • Uma vez que queremos guardar dados da aplicação entre sessões, iremos utilizar apenas o localStorage • Dados são armazenados em pares chave/valor • Podemos atribuir valores usando o método setItem() e recuperá-los usando getItem(): localStorage.setItem("myKey", "myValue"); var value = localStorage.getItem("myKey") // returns "myValue"
 
78. Web Storage • Se tentarmos recuperar um valor de uma chave que não existe no localStorage, será retornado null • Se tentarmos adicionar um valor no localStorage e não existir memória suficiente, ocorrerá uma exceção QUOTA_EXCEEDED_ERR • Limitações do localStorage: – O usuário não tem necessariamente acesso a tudo que estiver armazenado (embora seja possível com ferramentas de desenvolvimento do navegador) – Ele é compartilhado por todas as aplicações em um domínio, assim o limite é compartilhado entre todas as suas aplicações • Também significa que as chaves deverão ser únicas entre todas as suas aplicações – Tanto chaves como valores devem ser strings
Por que o relacionamento é necessário?
79. Web Storage • JavaScript possui um objeto utilitário chamado JSON que fornece funções para conversão de valores para e a partir de strings • JSON (JavaScript Object Notation) é um padrão para representação de valores como strings em um formato legível • O objeto JSON tem dois métodos: – JSON.stringify() para converter um valor para uma string – JSON.parse() para converter uma string de volta em um valor
 
80. Criando Armazenamento Local • Para ajudar a lidar com algumas limitações do localStorage, iremos criar um objeto chamado AppStorage que irá empacotar o objeto localStorage • O objeto AppStorage irá ajudar a evitar colisões de chaves e deverá fornecer uma maneira fácil de armazenar valores não-string • Iremos definir este objeto em um novo arquivo chamado appStorage.js, assim poderemos reutilizá-lo em outras aplicações
*Quando existem várias possibilidades de relacionamento entre o par das entidades e se deseja representar apenas um
81. appStorage.js • O construtor recebe o nome da aplicação como parâmetro • A linha seguinte cria uma variável privada chamada prefix que será utilizada como prefixo para todas as chaves da aplicação, evitando colisões – Se o nome da aplicação não for fornecido, não será usado um prefixo, o que pode ser útil para chaves compartilhadas entre diferentes aplicações • A linha seguinte cria uma variável pública usada para determinar se o navegador dá suporte ao localStorage
*Quando ocorrer mais de um relacionamento entre o par de entidades
82. appStorage.js – setValue() • O método setValue() recebe uma chave e um valor e o coloca no localStorage – Ele adiciona o prefixo para evitar colisão de nomes – Como só podemos armazenar strings, o método JSON.stringify() é chamado para conversão do valor – Então o método localStorage.setItem() é chamado para armazená-lo
*Para evitar ambiguidade
83. appStorage.js – getValue() • O método getValue() recebe uma chave, adiciona a ela o prefixo, e retorna o valor associado a ela no localStorage – Ele utiliza JASON.parse() para converter a string recuperada do localStorage para um valor – Se a chave não existir ou se o navegador não de suporte ao armazenamento local, este método retornará null
*Quando houver auto-relacionamento
84. appStorage.js – removeValue() • O próximo passo é remover itens: – O método removeValue() faz isso – ele simplesmente chama localStorage.removeItem() passando a chave com prefixo como parâmetro
 
85. appStorage.js – removeAll() • O método removeAll() remove todas as chaves de uma aplicação – Apesar de localStorage possuir o método clear(), ele esvazia completamente o localStorage de um determinado domínio, não apenas os valores de uma aplicação – Então precisamos recuperar todas as chaves da aplicação e removê-las uma a uma – Para isso, chamamos o método getKeys() que irá retornar um array com todos os nomes de chaves da aplicação
Para definir o número de ocorrências de uma entidade usamos o conceito de Cardinalidade.
86. appStorage.js – getKeys() • getKeys() – Pode receber como parâmetro uma função de filtro caso queiramos filtrar os resultados por nossos próprios critérios – O método realiza um laço sobre todas as chaves no localStorage chamando o método privado isAppKey() para determinar se a chave pertence a aplicação – Se verdadeiro, remove o prefixo da chave – Finalmente, se não houver filtro ou se a função de filtro retornar verdadeiro, adiciona a chave ao array Retorna verdadeiro se a chave pertence à aplicação
 
87. appStorage.js – contains() • O método contains() irá determinar se existe um valor associado com uma chave – Ele simplesmente tenta recuperar o valor associado com a chave e testa se ela existe
A Cardinalidade indica quantas ocorrências de uma Entidade participam no mínimo e no máxima do relacionamento.
88. Armazenando a Lista de Tarefas • Primeiro, temos que adicionar uma referência a appStorage.js no nosso arquivo HTML: <script src="appStorage.js"></script> • Depois iremos adicionar uma variável privada appStorage ao objeto TaskAtHandApp, passando o nome da aplicação ao construtor:
 
89. Armazenando a Lista de Tarefas • Agora iremos adicionar um método privado que pode ser chamado para salvar as tarefas sempre que uma mudança for feita: – O método saveTaskList() encontra todos os elementos <span> de nomes tarefas para cada tarefa na lista – Então chama o método jQuery each(), que é usado para iterar sobre os elementos que foram encontrados pela seleção – ele recebe uma função como parâmetro e chama a função para cada um dos elementos – Neste caso, a função simplesmente coloca o nome da tarefa no final do array de tarefas – Então o método setValue() de appStorage é chamado para armazenar o array de tarefas, usando a chave “taskList”
Cardinalidade Mínima - define se o relacionamento entre duas entidades é obrigatório ou não.
90. Armazenando a Lista de Tarefas
Ex: Abaixo temos a entidade Pais e a Entidade UF.
91. Armazenando a Lista de Tarefas • Agora precisamos adicionar a chamada à saveTaskList() cada vez que a lista muda: – Faremos isso nos métodos addTask() e onChangeTaskName() – Também em addTaskElement() precisaremos fazer a chamada para os manipuladores de eventos de clique de botão para delete, move-up e move-down – Para tornar a leitura mais fácil, iremos refatorar nossos métodos para manipulação de eventos de botão movendo o código interno para métodos privados
 
92. Armazenando a Lista de Tarefas
http://www.macoratti.net/cbmd1.htm
93. Armazenando a Lista de Tarefas
-->
94. Armazenando a Lista de Tarefas
95. Executando a Aplicação • Execute a aplicação no Chrome, adicione algumas tarefas e então pressione F12 para abrir as ferramentas do desenvolvedor – Clique no ícone de recursos e então expanda e selecione o item em Local Storage no painel à esquerda
96. Executando a Aplicação
97. Carregando a Lista de Tarefas • Iremos adicionar um novo método privado chamado loadTaskList() para carregar a lista de tarefas: – Este método chama appStorage.getValue() passando a chave para nossa lista de tarefas – Então verifica se realmente teve algum retorno e faz a iteração sobre os elementos do array chamando o método addTaskElement() paca cada um
98. Carregando a Lista de Tarefas • A única coisa restante é adicionar uma chamada a loadTaskList() a partir do método start(), então a lista será carregada quando a aplicação for iniciada:
99. Exercício • Escreva uma aplicação que possa ser usada para mostrar todos os dados de cada aplicação em um domínio • No nível mais alto, liste todas as aplicações • Quando clicarmos sobre uma aplicação, deverão ser mostrados todos os itens armazenados • Quando clicarmos sobre um item, o seu conteúdo deverá ser mostrado
100. Referências • GUSTAFSON, J. M. HTML5 Web Application Development By Example. Packt Publishing, 2013. • GAVIN. Best HTML5 Editors for Developers. CodeGeeks, 2013. Disponível em: http://codegeekz.com/best-html5- editors/
101. UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1 Fábio M. Pereira (fmourapereira@yahoo.com.br)

Edição atual tal como às 09h09min de 25 de novembro de 2015

Plano Instrucional

Identificação | CURSO DE INFORMÁTICA PARA INTERNET - E-TEC/EAD/TUBARÃO
Semestre | 2015/2 - Módulo II - B
Unidade Curricular | Desenvolvimento de Sistemas Web I
Carga horária | 60h
Dias da Interação síncrona | Quintas-feiras
Horário da interação síncrona | Das 19h às 19h45min

Apresentação

Caro(a) Estudante,


Seja muito bem-vindo à Unidade Curricular de Desenvolvimento de Sistemas Web I.

Nesta unidade você identificará as ferramentas de software e também de hardware necessárias à preparação do ambiente de programação Web. Você saberá como instalar e configurar os aplicativos envolvidos no desenvolvimento de sistemas para Web. No final da unidade, serão introduzidos os conceitos relativos a modelagem de dados a serem aplicados na próxima unidade.

Participem das interações semanais! Será o momento para questionar sobre suas dúvidas e curiosidades sobre assuntos relacionados ao desenvolvimento de sistemas e uso dos aplicativos. Também será o momento de preparação para a semana posterior.

Fórum. Poste sua dúvida ou experiência, utilize esse meio para tirar todas as dúvidas e compartilhar experiências com os colegas.

Bons Estudos!!! Abraços, Prof. Douglas A.

Plano de Ensino

Plano de Ensino PDF

Atividades

Semana 1 - De 09/10/2015 a 14/10/2015 - Linux Ubuntu, Netbeans e Apache.
Semana 2 - De 16/10/2015 a 21/10/2015 - MySQL, PHP e phpMyAdmin.
Semana 3 - De 23/10/2015 a 28/10/2015 - Configurando, testando e comparando o MySQL.
Semana 4 - De 30/10/2015 a 04/11/2015 - Testando o phpMyAdmin, instalando EasyPHP e o DIA.
Semana 5 - De 06/11/2015 a 11/11/2015 - Testando o DIA, instalando o DBDesigner e BrModelo.
Semana 6 - De 13/11/2015 a 18/11/2015 - Ligação NetBeans-MySQL-PHP-Java e o MySQL Wokbench.
Semana 7 - De 20/11/2015 a 25/11/2015 - Xampp, PostgreSQL e pgAdmin3.
Semana 8 - De 27/11/2015 a 02/12/2015 - Modelagem de dados e Tipos de dados.

Fórum de notícas

  • 12 linguagens de programação requisitadas no mercado
Reportagem vinculada em 2015 na internet pela revista Exame da Editora abril.
  • EaD
Saiba como funciona o ensino a distância


Disponível em “https://wiki.ifsc.edu.br/index.php?title=Douglas_DSW_I&oldid=9205”