Introdução ao HTML: Senac

Introdução ao Html

• O material é uma introdução ao HTML, parte do curso de Programação Web do Centro Universitário Senac.
• O professor responsável é Me. Orlando C. Patriarcha.

Sumário

• O material aborda apresentações, introdução à disciplina, internet e web, protocolo HTTP e usabilidade na web.

Introdução Acadêmica

• O professor é graduado em Tecnologia da Informação com ênfase em Gestão de Negócios pela FATEC.
• Possui especialização em Gestão de Tecnologia da Informação pelo Instituto Federal de Educação, Ciência e Tecnologia – IFSP SP.
• Tem mestrado em Sistemas da Informação pela USP, obtido em setembro de 2023.
• Realiza pesquisa aplicada em Geração Automatizada de Código Fonte.
• É membro do Projeto AUSPIN – USP, uma startup que utiliza inteligência artificial e métodos numéricos para people analytics em Tecnologia da Informação para o Banco Santander.
• Atua como CTO e CoFounder na ImedPrime (www.imedprime.com).

Introdução Profissional

• Possui 15 anos de experiência como Diretor de Tecnologia, Pesquisa e Desenvolvimento na Sysped (www.sysped.com.br).
• É Arquiteto JEE e SOA pela Discover / Oracle.
• Tem 2 anos de experiência como CIO Mão na Roda.
• É professor no Senac SP e na FIAP, lecionando em cursos de ADS, IA e Engenharias.

Tópicos de Interesse

• Modelagem de software
• Domain Driven Design
• Arquitetura de Software
• Padrões de Projetos
• Construção de Frameworks
• Domains Specific Languages
• Reúso e qualidade de software
• Geração automatizada de Código
• Inteligência Artificial
• Computação Gráfica e processamento de Imagens
• Arquiteturas Altamente Distribuídas

Contato

• Email Senac: [email protected]
• Email USP (para urgências): [email protected]
• Email pessoal (para urgências extremas): [email protected]

Disciplinas Anteriores

• Algoritmos e programação I
• Algoritmos e Programação II
• Programação Web
• Programação Orientada a Objetos
• Lógica e interfaces humano-computador

Assuntos Importantes - Checklist

• Algoritmos
• Orientação a objetos
• Uso de banco de dados/comandos SQL
• Interfaces Humano-Máquina (UI)
• HTML/CSS/JS

Objetivos da Disciplina

• Apresentar os fundamentos do desenvolvimento frontend para dispositivos móveis e desktop.
• Integrar frontends com backends via serviços web.

Introdução à Internet e à Web

• A história da Internet e da Web é marcada por eventos cruciais.
• Internet e Web são termos frequentemente usados de forma intercambiável, embora possuam significados distintos.
• Será explorada a evolução e as diferenças fundamentais entre essas tecnologias.

Desenvolvimento da Internet

• Anos 1960: Criação da ARPANET em 1969 pelo Departamento de Defesa dos EUA, uma rede experimental para comunicação entre computadores de pesquisa, visando comunicação eficaz mesmo em caso de ataques nucleares.
• Anos 1970: Desenvolvimento do protocolo TCP/IP por Vinton Cerf e Bob Kahn, permitindo comunicação padronizada entre diferentes redes, o que estabeleceu as bases para a Internet global moderna.
• Anos 1980: Expansão internacional da Internet, com conexão de universidades e instituições de pesquisa em todo o mundo. Surgiram os primeiros domínios de nível superior (TLDs) como .com, .org e .gov.
• 1983: Migração para o protocolo TCP/IP como padrão oficial da ARPANET.

Desenvolvimento da Web

• 1989: Tim Berners-Lee, do CERN, propôs um sistema de hipertexto para compartilhamento de informações entre cientistas, formalizado na proposta "Information Management: A Proposal".
• 1990: Berners-Lee desenvolveu o primeiro navegador ("WorldWideWeb") e o primeiro servidor web, marcando o início da Web.
• 1991: A Web começou a ganhar atenção fora da comunidade de pesquisa, com a criação da primeira página web explicando o que é a World Wide Web.
• 1993: O navegador Mosaic, de Marc Andreessen, tornou a navegação na Web mais amigável e visualmente atraente, o que impulsionou o uso da Web.

Diferenças entre Internet e Web

• Internet: Rede global de computadores interconectados para transferência de dados e comunicação.
• Web (World Wide Web): Sistema de informações em hipertexto acessado por navegadores, funcionando na Internet.
• A Internet é a infraestrutura, enquanto a Web é uma aplicação que roda sobre ela.
• Serviços como email e FTP operam na Internet, mas não fazem parte da Web.

Web 2.0: Conceito e Características

• Web 2.0 é uma evolução da World Wide Web que enfatiza a participação ativa dos usuários, colaboração e compartilhamento de informações online.
• Diferente da Web 1.0, a Web 2.0 permite uma experiência mais interativa e dinâmica.
• Usuários como produtores: consomem, criam e compartilham conteúdo (blogs, vídeos, redes sociais).
• Interação social: redes sociais, fóruns e plataformas de colaboração facilitam a conexão e interação.
• Conteúdo gerado pelo usuário: sites permitem contribuições como avaliações, comentários e classificações.

Web 2.0: Características Adicionais

• Aplicativos Web ricos e dinâmicos (AJAX) proporcionam experiências de usuário mais fluidas.
• Plataformas permitem o compartilhamento de fotos, vídeos e outros conteúdos multimídia.
• Ferramentas como wikis e documentos compartilhados possibilitam a criação coletiva.
• Sindicamento de conteúdo (RSS e feeds) permite que usuários acompanhem atualizações de sites e blogs.

Web 2.0: Exemplos de Plataformas

• Redes Sociais: Facebook, LinkedIn, Twitter.
• Compartilhamento de Conteúdo: YouTube, Flickr, Instagram.
• Wikis Colaborativos: Wikipedia, Wikia.
• Blogs e Microblogs: WordPress, Tumblr.

Impacto na Sociedade

• A Internet revolucionou a comunicação, permitindo conexões instantâneas globalmente.
• A Web se tornou uma fonte vital de informações, transformando a maneira como pesquisamos e consumimos dados.
• Houve o surgimento do comércio eletrônico (e-commerce) e da economia digital, com lojas online e serviços digitais.
• Redefinição da educação e aprendizado com recursos online acessíveis em todo o mundo.

Desafios Atuais e Futuros

• Privacidade e Segurança: Crescente quantidade de dados online levanta preocupações sobre a privacidade do usuário e a segurança cibernética.
• Desigualdade Digital: Acesso desigual à Internet e à Web gera uma divisão digital global.
• Tecnologias Emergentes: Novas tecnologias como a Internet das Coisas (IoT) e a realidade virtual prometem transformar ainda mais a forma como interagimos com a Internet e a Web.

Analogia Frontend

• Etapas do projeto/desenvolvimento front-end: wireframe -> protótipo -> codificação HTML -> HTML + CSS -> Javascript

Introdução ao Protocolo HTTP

• Protocolo de comunicação da World Wide Web.
• Permite transferência de recursos entre cliente e servidor.
• Baseado em pedidos e respostas.
• Utiliza o conceito de URIs (Uniform Resource Identifiers).
• Opera sobre o protocolo TCP (Transmission Control Protocol).

Protocolo: Definição

• Um protocolo é um conjunto de regras e convenções que governam a comunicação entre sistemas ou dispositivos em uma rede.
• Define como as informações são trocadas, o formato das mensagens e os passos a serem seguidos durante a comunicação.

Protocolo HTTP: Funcionamento

• É um protocolo utilizado na World Wide Web para solicitar e fornecer recursos, como páginas da web.
• Um cliente (navegador) envia uma requisição HTTP para um servidor web.
• A requisição contém um método, um endereço (URL) e, opcionalmente, dados.
• O servidor processa a requisição e envia uma resposta HTTP de volta ao cliente.
• A resposta contém um código de status e o conteúdo solicitado.

Protocolo HTTP: Componentes das Mensagens

• Requisição HTTP: Linha de Requisição, Cabeçalhos e Corpo.
• Resposta HTTP: Linha de Status, Cabeçalhos e Corpo.

Primeiros Passos do HTTP

• 1989: Tim Berners-Lee propõe hipertexto e HTTP no CERN.
• 1991: HTTP 0.9 - transferência de documentos HTML.
• 1993: HTTP 1.0 - suporte a cabeçalhos e MIME.
• 1996: HTTP 1.1 - conexões persistentes e mais recursos.
• 1997: IANA assume controle dos números de versão.

Métodos HTTP/1.1

• GET: Obter um recurso do servidor.
• POST: Enviar dados para processamento.
• PUT: Enviar dados para substituir um recurso.
• DELETE: Remover um recurso.
• HEAD: Obter apenas cabeçalhos.
• OPTIONS: Obter métodos suportados pelo servidor.
• TRACE: Diagnóstico de roteamento.

Códigos de Status HTTP

• 1xx: Informacional.
• 2xx: Sucesso.
• 3xx: Redirecionamento.
• 4xx: Erro do cliente.
• 5xx: Erro do servidor.

Exemplo de Conversação HTTP

• Cliente envia uma requisição GET para http://www.exemplo.com/recurso.
• Servidor processa a requisição e envia resposta com código de status 200 OK.
• Cliente recebe o conteúdo do recurso e exibe no navegador.

Exemplos de Requisições e Cabeçalhos HTTP

• GET /index.html HTTP/1.1
• Host: www.exemplo.com
• User-Agent: Mozilla/5.0... Safari/537.3
• Accept: text/html, application/xml, /
• Authorization: Bearer your-token

HTTP/2

• 2015: Foco em eficiência e desempenho.
• Multiplexação de fluxos: várias requisições em uma conexão.
• Compressão de cabeçalhos: menor sobrecarga.
• Priorização de requisições: melhora o carregamento de página.

HTTP/3

• 2020: Baseado no protocolo QUIC.
• Objetivo de melhorar velocidade e segurança.
• Uso de conexões UDP para menor latência.
• Suporte a streaming de dados.
• Ideal para ambientes com redes instáveis.

Estado Atual e Futuro do HTTP

• HTTP permanece crucial na Web e comunicação na Internet.
• A evolução continua para atender às demandas.
• Segurança e eficiência são prioridades.
• Possíveis futuras versões visam melhorias contínuas.

Design de Interfaces

• Objetivo: criar um meio pelo qual o usuário possa operar o sistema.
• A interface transmite a "percepção de qualidade" ao usuário.
• Regras de ouro de Theo Mandel:
  • Deixar o usuário no comando.
  • Reduzir a carga de memória do usuário.
  • Tornar a interface consistente.
• Ref: http://theomandel.com/resources/golden-rules-of-user-interface-design/

Etapas para Definir Interfaces

• Análise do usuário: entrevistas para obter informações sobre os perfis dos usuários (nível técnico, educação formal, meio de treinamento, faixa etária, gênero, etc.).
• Análise das tarefas:
  • Qual trabalho será realizado pelos usuários?
  • Qual o fluxo do trabalho?
  • Quais as consequências de um erro na realização das tarefas?

Usabilidade

• Em sistemas computacionais, define a facilidade que o usuário tem para usar o sistema.
• ISO 9241 – Ergonomia de software de escritório: "Medida pela qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico."
• UI: UserInterface
• UX: UsereXperience

Exemplos de Elementos que Afetam a Usabilidade

• Tamanho das letras.
• Contraste de cores.
• Tamanho de botões.
• Uso de dicas (tooltipse placeholders).
• Comportamentos alternativos (textos alternativos às imagens).
• Textos alternativos para leitores de tela.

Dicas de Usabilidade

• Mobile first: Desenhar as telas para dispositivos móveis primeiro devido à limitação de espaço.

Wireframes de GUI

• Design da forma como organizar os elementos gráficos na tela, de forma a facilitar a apresentação da ideia.
• Em sistemas computacionais, envolve o desenho das telas de interface e a sequência de navegação entre as telas, sem a lógica de negócio.
• O wireframe também pode ser referenciado como mockup.

Ferramentas para Wireframes

• Lápis e Papel
• Adobe XD (https://www.adobe.com/br/products/xd.html)
• Figma (https://www.figma.com/)
  • https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/
• Adobe Photoshop
• PencilProject (https://pencil.evolus.vn/)
• Microsoft PowerPoint
• MicrosoftVisio
• Moqups (https://moqups.com/)
• Cacoo (https://cacoo.com/)
• MockFlow (https://mockflow.com/)
• Wireframe.cc (https://wireframe.cc/)
• Marvel App (https://marvelapp.com/) Permite criar protótipos de apps móveis.