How to find us
|
Contacts

Web Systems 2017/2018

  • 6 ECTS
  • Taught in Portuguese
  • Both continuous and final Assessment

Objectives

Once this course is finished, the student ought to be able to:

- Design web projects, following software development methodologies/process, since requirement analysis, to web application release.
- Program web applications using HTML5, CSS3 and JavaScript 5 and making use of local storage, asynchronous processing and server redirection (through PHP/Node.js) to existing web services.
- Infer, by experimentation and critically evaluation, the major role of, Javascript and CSS frameworks and APIs, for developing web applications.

This course helps prepare the students for the programmer career path.

Recommended Prerequisites

Knowledge acquired in the curricular unit:
Algoritmia e Programação, namely: logical conditions, loops and arrays.
Matemática Discreta: logic, boolean expressions and sets.
Programação Orientada a Objetos: information hiding, refactoring.
Redes de Computadores: TCP/IP, HTTP.
Linguagens e Tecnologias Web: HTML, CSS, JavaScript. Client-server architecture.

Teaching Metodology

Exposition, demonstrations, experimental. Concepts are explained in theory, canonical examples are demonstrated, students experiment by applying concepts to practical problems.

Body of Work

Tools and Protocols
- Browsers
- HTTP
- cacheing
- HTML5/CSS3
JavaScript
- Syntax
- Structures
- Functions
- Events
- DOM
- Closures
- Web Storage
Structured Data Formats
- JSON
- XML
- parsing
- transformation
- creation
Server Language
- Apache
- PHP
- APIs
- Web services
- Node.JS

Recommended Bibliography

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/

Complementary Bibliography

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

Weekly Planning

Week 1
HTTP, properties, verbs, return codes, headers.
HTML5, editors, resources. New elements and attributes.

Week 2
CSS 3, what changed? Cascade revisions. Specificity rules. Best and worst practices.
CSS Expressions. Content generation. CSS3 resources.
HTML5/CSS3 demonstration covering: Input types, Form validation, Rounded borders, Shadows, Content-generation, Pseudo-classes, Transitions.
Browser as a development tool. Analysis of pre-defined CSS styles. Classes, selectors, positioning, display, pseudo-classes, units.
Reset CSS.

Week 3
ECMAScript, resources.
Some properties and facts about JavaScript.
The JavaScript language, an incomplete summary.
Strongly versus loosely typed languagens.
Types of values in JavaScript. Undefined versus null. Console prints instead of alerts. Type coerciveness.
Control Structures. Variable scoping. Global e function variable scope. Variable hoisting.
Arrays, indices, length, for...in.
Objects, manipulation, criation, definition. This.
JavaScript application that runs correctly in both IE8 or IE9.

Week 4
Automatic execution and code promiscuity demonstration.
Adder dpplication demonstration: number type INPUT (HTML5), DOM traversal, getElementById, Number or String? Multiplication, parseInt, valueAsNumber. innerHTML. Element events, Event listeners: (onclick, onload). Feature detection. myfirstlibrary/framework. Anonymous functions.
Dynamic button creation demonstration. this keyword. Resolve script collisions through the module pattern. Module communication.
Login application built with HTML5, CSS3 and JavaScript. New input types, HTML5 validation. Element events. Access and modification of element properties through JavaScript.

Week 5
JSON as a structured data transfer format between applications in a client-server architecture. JSON as alternative to XML. Problems of XML in this context.
JSON syntax. Parse e Stringify. Creating dynamic content through data stored in JSON format.
Using data in two JSON files, creating an application that dynamically changes its content through the data and user interaction.

Week 6
Classic web model versus AJAX. Birth of AJAX and the use of XML. Differences in efficiency between JSON and XML for AJAX responses. Problems with the AJAX model. Same-Origin Policy. Reasons and restrictions. DDOS attacks.

Week 7
Server-side programming language (PHP) to overcome the Same-Origin Policy restrictions on AJAX requests to external resources.
CORS as HTML5 technology to avoid the use of a intermediate server.
XAMPP, Apache, PHP. Syntax and some PHP functions.
Installing and configuring a local server through XAMPP.

Week 8
Demonstration of two frameworks: Bootstrap and jQuery in one aplicação.
Webservices. Definition, two major types: SOAP, REST. Motivation. SOAP architecture description: producer, consumer, service directory, service description. Canonical examples.

Week 9
RSS feeds as web services.
Web application state. Cookies as first solution. Problems, headers, etc. Explanation of the HTML5 web storage technology as current solution to store client-side state. LocalStorage and SessionStorage. Note taking application demonstration.

Week 10
ECMAScript 5 Strict Mode: file and function context. DOMContentLoaded, advantages over the onLoad event. JavaScript and CSS minification: definition, advantages. JavaScript closures: storing state in function declaration. The problem of multiple declaration inside loops.

Week 11
Apache server + PHP. Criation of RESTful web services using PHP with reading and writing information on file.

Week 12
PHP Web services with reading and writing information on MySQL relational databases.
introduction to Node.JS - server-side Javascript

Demonstration of the syllabus coherence with the curricular unit's objectives

Fundamentals establish a common ground for students, regardless of their previous academic path. The JavaScript programming language is presented as equivalent to previously known object oriented languages. In the closures chapter, the concept of state function is presented. It's also shown how this paradigm is fundamental in the development of autonomous applications without collisions with external frameworks.

Demonstration of the teaching methodologies coherence with the curricular unit's objectives

The three methologies chosen encompass the technological possibilities students have with web programming. Canonical examples serve to propose quick problems the student can assimilate and understand the workflow. By experimenting, students will be allowed to roam free in their solutions while still focusing on each problem’s end goal. In these sessions, students will need to think not only of how might can achieve their goal but also test their ideas against the ideas of their peers. These potentially contradictory views will breed an optimal solution.

relevant generic skillimproved?assessed?
Achieving practical application of theoretical knowledgeYesYes
Adapting to new situationsYes 
Analytical and synthetic skills  
Commitment to effectivenessYesYes
Commitment to qualityYesYes
CreativityYesYes
Ethical and responsible behaviour Yes
Foreign language proficiencyYes 
Information and learning management  
Initiative and entrepreneurship capability  
IT and technology proficiencyYesYes
Problem Analysis and AssessmentYes 
Problem-solvingYesYes
Research skillsYesYes
Self-assessment  
This website uses cookies to provide better functionality and for performance measurements (European Union Directive 2009/136/EC)
Please take a few minutes do answer a few quick questions about our website.