Web e Multimédia I

Licenciatura em Engenharia Multimédia
Unidade Curricular
Web e Multimédia I
Web and Multimedia I
Objetivos
-Compreender o funcionamento das tecnologias HTML5/CSS3 e
JavaScript;
-Entender os fundamentos de JavaScript e Canvas API;
-Aprender a utilização das tecnologias javascript e Áudio e Vídeo API;
-Compreender o funcionamento de JavaScript e Drag and Drop API;
-Desenvolver conteúdos web responsivos com recurso a CSS3;
-Aprender a desenvolver aplicações mobile em HTML5/JS.
Summary of objectives
-To understand the operation of HTML5/CSS3 and JavaScript
technologies;
-To understand the fundamentals of JavaScript and Canvas API;
-To learn the usage of JavaScript Technologies and Audio and Video
API;
-To understand the operation of the JavaScript Drag and Drop API;
-To develop responsive web content using CSS3;
-To learn how to develop mobile apps using HTML5 and JavaScript.
Enquadramento: Obrigatória,
1º ano - 1º Semestre
Pré-requisitos:
Créditos: 4 ECTS
Horas contacto
Orientação tutorial (OT):
Seminário (S):
Teóricas (T):
Prática Laboratoriais (PL):
Teórico-práticas (TP):
12 h
0
0
0
48 h
Contextualização Científica
O HTML é, por excelência, a linguagem de
marcação para conteúdos hipertextuais. Através
da utilização de tags (elementos) de marcação,
permite organizar e estruturar diferentes tipos de
conteúdos para um documento. Desde o início
dos anos 90 do século passado esta linguagem
tem evoluído (encontra-se presentemente na
versão 5) de modo a, por um lado, dar resposta
à evolução dos diferentes média e dispositivos e,
por outro, a otimizar a compatibilidade entre os
diferentes browsers (navegadores de internet),
procurando garantir coerência na apresentação
dos conteúdos independentemente do dispositivo
ou programa utilizado para a visualização do
documento HTML.
O CSS trata-se de uma linguagem de folhas
de estilos que permite estilizar o conteúdo
desenvolvido em HTML5. Deste modo, o CSS3
e o HTML5 são completamente interoperáveis
e permitem em conjunto criar conteúdos
organizados/estruturados (HTML5) agradáveis
visualmente e adaptados a diferentes dispositivos
como computadores e dispositivos móveis
(CSS3).
Por outro lado, o JavaScript trata-se de uma
linguagem de programação interpretada (isto é,
não compilada) e orientada a objetos, que permite
ser executada do lado do cliente (controlando o
navegador de internet). Esta linguagem permite
assim trazer um maior nível de interatividade
aos conteúdos web desenvolvidos em HTML5,
dando também um maior controlo ao utilizador
(aumentando, por inerência, a experiência de
utilização). Embora, como referido, o JavaScript
permita a execução do lado do cliente, esta pode,
também, ocorrer do lado do servidor, aumentando
o leque de funcionalidades desta linguagem de
programação.
Atualmente estas três linguagens surgem
associadas no desenvolvimento de aplicações e
de páginas web responsivas (que funcionem em
múltiplos dispositivos de diferentes dimensões,
e.g., computador, tablet e smartphone). Com
efeito, e dada facilidade de integração do CSS e
do JavaScript com a própria estrutura do HTML
(em particular do HTML5), é imperativo a um Web
Developer conhecer em pormenor estas três
tecnologias, sabendo com clareza para que serve
cada uma e de que modo os seus produtos web
podem ser otimizados com a utilização destas
linguagens.
Operacionalização dos Conteúdos
1. INTRODUÇÃO
a. Internet e Redes
b. Relação Cliente-Servidor
c. Endereços Web
i. URL (Uniform Resource Locator)
ii. Protocolos
iii. Domínios
iv. Recursos
v. DNS e Endereço IP
2. HTML5
a. Contextualização
b. Evolução do HTML
c. Extensão de documentos HTML
d. DOM (Document Object Model)
e. Tags
i. Sintaxe e semântica
ii. Atributos
iii. Tags semânticas
f. Modelos de apresentação (Block e Inline)
g. Comentários em HTML
h. Caracteres Especiais
3. CSS3
a. Contextualização
b. Sintaxe de uma declaração CSS
c. Seletores CSS
i. Elemento
ii. Classe
iii. Identificador
iv. Pseudo-classes
d. Regras agrupadas e combinações
e. Diferentes localizações do CSS
i. Dentro do cabeçalho do HTML
ii. Dentro de uma tag HTML
iii. Ficheiro externo
f. Compreensão do funcionamento do CSS
i. Conflitos e precedências
ii. Modelo de caixa
iii. Posicionamento de elementos
g. Media Queries e web design responsivo
h. Frameworks (ex: Twitter Bootstrap)
4. JavaScript
a. Princípios básicos do JavaScript
i. Introdução à linguagem
ii. Localização do código JavaScript
iii. Definição de variáveis, funções e escopo
b. Tipos de dados
c. Estrutura e sintaxe
d. Manipulação de valores padrão
e. Objetos e Funções
i. Criar objetos
ii. Passagem de variáveis
f. Matrizes e Closures
Bibliografia
OBRIGATÓRIA:
Coelho, P. (2015). Desenvolvimento Móvel com HTML5 – Integração com JavaScript, CSS3 e JQuery Mobile.
Lisboa: FCA
COMPLEMENTAR:
Abreu, L. (2015). HTML 5 – 4ª Edição Atualizada e Aumentada. Lisboa: FCA.
Abreu, L. (2015). JavaScript 6. Lisboa: FCA.
Amirian, P. & Winstanley, A. (2016). Web Application Development Essentials – With HTML5, Javascript, Jquery,
CSS, and ASP.NET. Berlin: Springer
Chinnathambi, K. (2016). Javascript Absolute Beginner’s Guide. New York: Pearson
Ducket, J. (2011). HTML & CSS: Design and Build Web Sites. New Jersey: Wiley & Sons.
Hyslop, B. & Castro, E. (2013). HTML and CSS, Visual QuickStart Guide. New York: Pearson
Larsen, R. (2013). Beginning HTML and CSS. New Jersey: Wiley & Sons.
Remoaldo, P. (2011). CSS 3. Lisboa: FCA.
Sanders, B. (2012). Smashing HTML 5 – Técnicas para a nova geração da Web. Porto Alegre: Bookman
W3Schools (2016). The World’s Largest Web Developer Site. Acedido em http://w3schools.com