Fundamentos de Aplicações Web
Objetivos
Compreender os conceitos básicos relacionados à infraestrutura de informação da World Wide Web.
Capacitar o aluno a desenvolver aplicações WEB estáticas para a World Wide Web.
Preparar o aluno para produzir projetos digitais, multimídia e online para internet, dominando técnicas de projeto, criação, desenvolvimento e estruturação via web.
Conteúdo Programático
1 Origem, evolução e desafios da World Wide Web
1.1 Arquitetura Cliente-Servidor
1.2 A origem da Internet
1.3 Definição de sistemas hipermídia (estáticos e dinâmicos), a evolução e os desafios da World Wide Web
1.4 O papel do consórcio W3C
1.5 Usabilidade e acessibilidade na World Wide Web
2 Linguagens de marcação para a World Wide Web
2.1 Linguagens de marcação e linguagens de programação
2.2 Aspectos básicos da linguagem de marcação HTML
2.3 Aspectos avançados da linguagem de marcação HTML
3 CSS (Cascading Style Sheets)
3.1 Como criar estilos
3.2 Tipos de Folhas de Estilo
3.3 Tags Personalizadas
3.4 Atalhos e Atributos de CSS
4 Princípio do Design Responsivo
4.1 Introdução e Princípios
4.2 Layout Fluído
4.3 Imagens e Recursos Flexíveis
4.4 Media Queries
4.5 Mobile First e Web Mobile
4.6 Frameworks para Reponsividade
4.2. Criação de aplicações WEB com PHP e Banco de Dados.
5. Segurança de Informações:
5.1. Segurança do Servidor;
5.2. Segurança de acesso ao Banco de Dados;
5.3. Segurança com JavaScript. Linguagens de programação para WEB. ch. prevista 6h
Bibliografia indicada
[1] Deitel, P. J.; Internet and World Wide Web: How to Program. Ed. Prentice Hall, 2007. 4 edition. ISBN: 0131752421.
[2] XSLT – Interagindo com XML e HTML. Ed. Ciência Moderna, 2001. ISBN: 8573931655.
[3] Fawcett, J.; Ayers, D.; Quin, L. R. E. Beginning XML. Ed. John Wiley, 2012. 5 edition. ISBN: 1118162137.
[4] Marcondes, C. A.; HTML 4.0 Fundamental: a base da programação para Web. Ed. Érica, 2005. ISBN: 8536500573.
[5] Collison, S.; Desenvolvendo CSS na Web. Ed. Alta Books, 2008. ISBN: 9788576081838.
Avaliações
1ª avaliação (P1): 10/04/24 - peso 3
2ª avaliação (P2): 03/07/24 - peso 3
1º Trabalho Prático(T1): ao decorrer do período - peso 1
2º Trabalho Prático(T2): 01/07/24 - peso 2
Prova final: 17/07/24
TRABALHO T2
1. Você deverá montar seu grupo de integrantes do trabalho e escolher um tema para seu site. Recomendamos ser um site para E-Commerce qualquer, porém, não é obrigatório e pode ser feito em qualquer tema/área de atuação
2. A escolha do tema do site é livre para a equipe, porém, NÃO SERÃO ACEITOS TRABALHOS COM O MESMO TEMA. Não poderão ter equipes com sites que vendam sapatos, por exemplo. Porém, pode-se ter como outro exemplo, um site que seja de uma petshop com produtos e serviços e outro site de uma clínica veterinária. São dois temas diferentes para um mesmo ramo de atividade.
3. Para evitar isso, quando escolherem o tema de seu site, registrem na planilha cujo link está no botão abaixo, observando antes se já não há o registro de outro grupo com o tema escolhido pelo seu grupo. Se houver, escolha outro tema e faça o registro na planilha, que será por ordem de chegada.
4. O grupo deverá preencher o "Escopo do seu trabalho" nesta planilha, contendo as informações para serem analisadas a viabilidade do site/trabalho. Esse escopo deverá ser preenchido até o dia XXXX;
5. O professor irá analisar o escopo do seu trabalho, analisará se as informações ali contidas foram ou não determinantes para a escolha do seu tema e poderá convocar o grupo para discutir algumas informações, a fim de orientar a correta implementação do site.
Acessem o material complementar sobre Design Gráfico (no material sobre HTML) que deverá ser lido/estudado e servirá como orientação inicial para elaboração de seu escopo.
A descrição dos requisitos do trabalho estão no link a seguir: Descrição dos requisitos do Trabalho T2
MATERIAL DE AULA
HTML
LINKS PARA FERRAMENTAS ONLINE DE WIREFRAMES
Figma - https://www.figma.com/
Wireframe.cc - https://wireframe.cc/
Cacoo - https://cacoo.com/
MockFlow - https://www.mockflow.com/
Framer - https://www.framer.com/
Moqups - https://moqups.com/
Extensão do Firefox para Mockup - https://addons.mozilla.org/en-US/firefox/addon/moqups-extension/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
Tutorial para uso da Ferramenta Pencil de prototipação - https://enemaneiras.com.br/2017/08/conheca-software-pencil/
CURSOS GRATUITOS (E BONS!) DE JAVASCRIPT
FREECODECAMP: https://www.freecodecamp.org/
JAVASCRIPT NINJA: https://www.udemy.com/course/curso-javascript-ninja/
DIO: https://www.dio.me/
Do básico ao avançado (não é gratuito, mas o valor total é R$ 27.90): https://www.udemy.com/course/curso-de-javascript-moderno-do-basico-ao-avancado/