Como chegar
|
Contactos

Sistemas Web 2017/2018

  • 6 ECTS
  • Lecionada em Português
  • Avaliação Mista

Objetivos

Depois de concluída a unidade curricular, o estudante deverá ser capaz de:
- Elaborar projetos web, aplicando metodologia/Processo de desenvolvimento de software, desde a fase de análise de requisitos, até a publicação da aplicação web.
- Programar aplicações web usando HTML5, CSS3 e JavaScript 5 fazendo uso de armazenamento local, processamento assíncrono e redireccionamento no servidor (através de PHP/Node.js) para web services existentes.
- Inferir, através da experimentação e avaliação crítica, na importância das frameworks e APIs JavaScript e CSS, no desenvolvimento de aplicações web.
Esta unidade curricular ajuda na preparação para a carreira de programador.

Pré-Requisitos Recomendados

Conhecimentos adquiridos na unidade curricular:
Algoritmia e Programação, nomeadamente: condições lógicas, ciclos e arrays.
Matemática Discreta: lógica, expressões booleanas e conjuntos.
Programação Orientada a Objetos: information hiding, refactoring.
Redes de Computadores: TCP/IP, HTTP.
Linguagens e Tecnologias Web: HTML, CSS, JavaScript. Arquitetura cliente-servidor.

Método de Ensino

As metodologias de ensino são: expositiva, demonstrativa e laboratorial experimental. Exposição dos conceitos teóricos, demonstração de exemplos canónicos, experimentação da aplicação dos conceitos teóricos em problemas práticos semanais.

Conteúdos Programáticos

Ferramentas e Protocolos
- Browsers
- HTTP
- cacheing
- HTML5/CSS3
JavaScript
- Sintaxe
- Estruturas
- Funções
- Eventos
- DOM
- Closures
- Web Storage
Formatos de Dados Estruturados
- JSON
- XML
- parsing
- transformation
- creation
Linguagem de Servidor
- Apache
- PHP
- APIs
- Web services
- Node.JS

Bibliografia e Webgrafia Recomendada

Abreu, Luís (2015); HTML5 - 4a edição; FCA, Lisboa; ISBN: 978-972-722-821-8
Remoaldo, Pedro (2011); CSS3; FCA, Lisboa, ISBN: 978-972-722-731-0
Abreu, Luis (2015); JAVASCRIPT 6; FCA, Lisboa; ISBN: 978-972-722-815-7


HTML5 specification, W3C Candidate Recommendation 6 August 2013 http://www.w3.org/TR/html5/

CSS standards and drafts, http://www.w3.org/Style/CSS/

ECMAScript specification, Standard ECMA-262 http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

Mozilla Developer Network - https://developer.mozilla.org/pt-PT/

Bibliografia Complementar

Abreu, Luis (2016); NODE.JS- CONSTRUÇÃO DE APLICAÇÕES WEB; FCA, Lisboa; ISBN: 978-972-722-860-7

Planificação Semanal

Semana 1
HTTP, propriedades, verbos, return codes, headers.
HTML5, editores, recursos. Novos elementos e atributos.

Semana 2
CSS 3, o que mudou? Revisão do cascade. Regras da Especificidade. Algumas boas e más práticas.
CSS Expressions. Content generation. Recursos para CSS3.
Demonstração HTML5/CSS3 abrangendo: Input types, Form validation, Rounded borders, Shadows, Content-generation, Pseudo-classes, Transitions.
Browser como ferramenta auxiliar ao desenvolvimento. Análise de estilos CSS pré-definidos. Classes, selectors, positioning, display, pseudo-classes, units.
Reset CSS.

Semana 3
ECMAScript, recursos.
Algumas propriedades e factos do JavaScript.
A linguagem Javascript, um resumo incompleto.
Strongly versus loosely typed languagens.
Tipos dos valores em Javascript. Undefined versus null. Console prints em vez de alerts. Type coerciveness.
Estruturas de controlo. Tempo de vida das variáveis. Global e function variable scope. Variable hoisting.
Arrays, índices, length, for...in.
Objectos, manipulação, criação, definição. This.
Aplicação com validação Javascript para que funcione no cliente IE8 ou IE9.

Semana 4
Demonstração de execução automática e promiscuidade de código.
Demonstração de aplicação para somar dois números: INPUT do tiponumber (HTML5), AtravessarDOM e getElementById, Number or String? Multiplicar, parseInt, valueAsNumber. innerHTML. Element events, Event listeners: (onclick, onload). Feature detection. A minhaprimeiralibrary/framework. Funções anónimas.
Demonstração de criar botões dinâmicos. Palavra this. Resolver a colisões de scripts através do module pattern. Comunicação entre módulos.
Aplicação de login em HTML5 com CSS3 e Javascript para manipulação de classes CSS3. Novos input types, html5 validation. Eventos nos elementos. Acesso e alteração de propriedades dos elementos através de Javascript.

Semana 5
JSON como formato para transferência de dados estruturados entre aplicações numa arquitectura cliente-servidor. JSON em alternativa ao XML. Problemas do XML neste contexto.
Sintaxe do JSON. Parse e Stringify. Demonstrações sobre a criação de conteúdo dinâmico através de dados em formato JSON.
Dados dois ficheiros JSON, criação de uma aplicação que crie conteúdo dinamicamente através dos dados em JSON e a interacção do utilizador.

Semana 6
Modelo web clássico versus modelo AJAX. Génese do Ajax e uso inicial do XML. Diferenças de eficiência entre XML e JSON para respostas a pedidos Ajax. Problemas do modelo Ajax.
Same-Origin Policy. Razões e restrições. DDOS attacks.

Semana 7
Linguagem de programação no servidor (PHP) para contornar restrições do Same-Origin Policy para pedidos Ajax a recursos externos.
CORS como tecnologia HTML5 para não ser preciso um servidor intermediário.
XAMPP, Apache, PHP. Sintaxe e algumas funções PHP.
Instalação e configuração de um servidor local através do XAMPP.

Semana 8
Demonstração do uso de duas frameworks: Bootstrap e jQuery numa aplicação.
Webservices. Definição, dois grandes tipos: SOAP, REST. Motivação. Descrição da arquitectura SOAP: fornecedor, consumidor, directório de serviços e descrição de serviço. Exemplos canónicos.

Semana 9
RSS feeds como web services.
Estado da aplicação web. Explicação do funcionamento de cookies como primeira solução. Problemas, headers, etc. Explicação do funcionamento da tecnologia HTML5 web storage como solução actual para guardar estado apenas no cliente. LocalStorage e SessionStorage. Demonstração de uma aplicação que grava notas de texto.

Semana 10
ECMAScript 5 Strict Mode: contexto de ficheiro e de função. DOMContentLoaded, vantagens sobre evento onLoad. Minificação de JavaScript e CSS: definição, vantagens. JavaScript closures: guardar estado na declaração de funções. O problema da declaração múltipla dentro de ciclos.

Semana 11
Servidor Apache + PHP. Criação de web services RESTful em PHP com leitura e escrita de informação em ficheiros.

Semana 12
Web services PHP com leitura e escrita de informação em bases de dados relacionais MySQL.
Introdução ao Node.JS e arquitetura servidor javascript

Coerência do programa para com os objetivos

Os conceitos fundamentais estabelecem uma plataforma comum aos estudantes independentemente do seu percurso académico anterior à unidade curricular. É apresentada a linguagem JavaScript como equivalente às linguagens orientadas a objectos já conhecidas. No capítulo das closures é apresentado o conceito de uma função com estado. É também mostrado como este paradigma é fundamental para o desenvolvimento de aplicações autónomas sem colisões com frameworks externas.

Coerência dos métodos de ensino para com os objetivos

As três metodologias de ensino servem para enquadrar as possibilidades tecnológicas que os estudantes têm com a programação web. Os exemplos canónicos servem para mostrar problemas de rápida compreensão e resolução para que o estudante possa assimilar como será o caminho do seu trabalho. A experimentação serve para deixar os estudantes sair fora do que está programado ao mesmo tempo que se focam em obter um resultado delineado à partida. Nestas sessões o aluno terá não só que pensar como fazer, mas conjugar as suas ideias com ideias adversárias e possivelmente contraditórias dos seus pares; fomentado a procura da solução óptima.

competência genérica relevantedesenvolvida?avaliada?
Análise e síntese  
Aptidão para aplicação na prática dos conhecimentos teóricosSimSim
Capacidade crítica e de avaliaçãoSim 
Capacidade de adaptação a novas situaçõesSim 
Capacidade de auto-critica e de auto-avaliação  
Capacidade de iniciativa e espírito empreendedor  
Capacidade de investigaçãoSimSim
Competência em informática e uso de novas tecnologiasSimSim
Competência em língua estrangeiraSim 
Comportamento ético e responsável Sim
CriatividadeSimSim
Gestão da informação e da aprendizagem  
Preocupação com a eficáciaSimSim
Preocupação com a qualidadeSimSim
Resolução de problemasSimSim
Este website usa cookies para funcionar melhor e medir a performance (Diretiva da União Europeia 2009/136/EC)
Por favor dispense alguns minutos para responder a umas perguntas rápidas sobre o nosso website.