%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% DISSERTAÇÃO PROFMAT
%
% Created by Michelle Cristina de Sousa Baltazar
%
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\title{Dissertation HTML}
\documentclass[12pt, a4paper,oneside]{book}
% margens segundo abnt
\usepackage[top=3cm,left=3cm,right=2cm,bottom=2cm]{geometry}
% espaçamento entre linhas
\linespread{1.3}
% espacamento entre parágrafos
\setlength{\parindent}{1.25cm}
% colocar parágrafo no começo das seções
\usepackage{indentfirst}
% para subitem
\usepackage{enumitem}
% para sub sub item
\usepackage{outlines}
% bibliografia e estilo
\usepackage[round]{natbib}
\bibliographystyle{apa}
% insere paginas em pdf (usar para inserir a ficha)
\usepackage{pdfpages}
% retira primeira página do capítulo
\usepackage{etoolbox}
\patchcmd{\chapter}{plain}{empty}{}{}
\patchcmd{\part}{plain}{empty}{}{}
% tira a palavra capitulo dos capitulos (ABNT)
\usepackage{titlesec}
\titleformat{\chapter}{\huge\bf}{\thechapter}{20pt}{\huge\bf}
%\documentclass{article}
\usepackage[brazilian]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{tabularx}
\usepackage{multirow}
\usepackage{parskip} % inserir linhas entre paragrafos
\usepackage{graphicx} % Required for including images
\graphicspath{{figures/}} % Directory in which figures are stored
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
\begin{tabularx}{\textwidth}{X X}
\textbf{HTML} & \multirow{3}{*}{\includegraphics[width=60mm]{html_logo.png}}\\
\\
\textbf{HTML} e uma abreviação para \textit{Hyper Text Markup Language} ou \textit{Linguagem de Marcação de Hipertexto}. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas" no navegador do usuário.\\
\end{tabularx}
\\
\\
\\
As páginas de internet funcionam graças ao protocolo \textbf{HTTP} que, em português, seria \textit{Protocolo de Transferência de Hipertexto} – é um protocolo de comunicação na camada de aplicação que permite a comunicação de dados na \textbf{Wide World Web}. Se observarmos a \textit{barra de endereços} onde aparece o endereço do site atual, veremos que o texto \textit{http://} ou \textit{https://} precedem o endereço, informando ao navegador que este protocolo é o responsável pelo funcionamento do site digitado, permitindo a correta interpretação do endereço e do conteúdo da página.\\
\\
\textbf{Hipertexto} é o texto estruturado que utiliza ligações lógicas (\textit{hiperlinks}) e o \textit{HTTP} é o protocolo que permite que estas ligações funcionem. Ou seja, a partir de uma determinada página eu clico em um "\textit{link}" (\textit{hiperlink}) que irá me redirecionar para outra página no mesmo site ou em outro endereço. \\
\\
Também podemos acessar uma página digitando diretamente o endereço da página correspondente ou simplesmente copiando o "\textit{link}" e colando na \textit{barra de endereços} do navegador. \\
\\
O \textbf{HTTP} funciona em um modelo computacional \textit{cliente-servidor} onde o navegador que está abrindo a página é o cliente e a aplicação que está hospedada em um site da web é o servidor. O \textit{HTTP} foi projetado para agilizar ao máximo a comunicação entre clientes e servidores de forma que sites de alto tráfego geralmente se utilizam de recursos como servidores de \textit{cache} assim como do próprio \textit{cache} local do computador cliente. \\
\\
O \textbf{cache} é simplesmente uma cópia local do site armazenado online, de forma que ao acessarmos o site, a cópia local é aberta primeiro e depois as atualizações são baixadas do servidor. Desta forma, para o usuário a página abriu de forma quase imediata, mas na prática ele estava apenas vendo uma cópia do que foi acessado na sua última visita.\\
\\
Muitos erros na navegação acontecem devido a problemas com o \textit{cache} e mesmo no sistema operacional \textit{Windows}. O que ocorre é que às vezes ao acessarmos uma determinada página ele carrega apenas do cache e não atualiza com a versão do servidor, de forma que o que vemos é apenas uma cópia não totalmente funcional (nem mesmo atual) da página previamente visitada e portanto pode não funcionar ou apresentar erros. Na maioria dos casos, teclar um simples "\textit{F5}" pode resolver o problema atualizando a página e forçando o navegador a carregar a versão original do servidor. Em outros casos pode ser necessário efetuar uma limpeza no cache local a fim de carregar novamente todas as páginas diretamente dos servidores. \\
\\
O \textit{Windows} pode também apresentar travamentos e problemas de acesso exatamente por causa do cache, pois este vai se acumulando indefinidamente a cada página visualizada e pode chegar a consumir diversos \textit{gigabytes} de espaço em disco. Por isso é sempre recomendável utilizar regularmente programas de limpeza tais como o \textit{cCleaner} ou realizar o processo manualmente para eliminar o cache de cada navegador utilizado. \\
\\
Durante muito tempo foi utilizado \textit{html} simples para a criação de páginas, mas como a própria linguagem foi evoluindo, as ferramentas e técnicas utilizadas também foram se aprimorando e se tornando mais complexas e com visual mais arrojado e eficiente. Atualmente podemos utilizar sistemas complexos de banco de dados, criptografia de última geração e diversos tipo de aplicativos embutidos. Desta forma temos bancos online, animações, jogos, filmes, etc. \\
\\
Esta evolução também foi necessária para atender as diversas plataformas utilizadas para a exibição das páginas \textit{html}. Passamos a ter diversos navegadores concorrentes no mercado (\textit{Mozila Firefox}, \textit{Google Chrome}, \textit{Internet Explorer}, \textit{Opera}, etc.), diversos sistemas operacionais tais como \textit{Linux}, \textit{Windows}, \textit{OS2}, além de plataformas diferentes como celulares, tablets, notebooks, computadores, smartTVs, etc. \\
A estrutura funciona com o formato: \\
\\
\textbf{\hspace*{1cm}\textit{<abre>conteúdo</fecha>}} \\
\newpage
A estrutura básica mínima para criação de uma página é a seguinte: \\
\\
\textbf{ \textit{
\hspace*{0.5cm}<!DOCTYPE html> \\
\hspace*{1cm}<html> \\
\hspace*{1cm}<head> \\
\hspace*{1.5cm}<title>Primeira Webpage</title> \\
\hspace*{1cm}</head> \\
\hspace*{1cm}<body> \\
\hspace*{1.5cm}<p>Hello, world!</p> \\
\hspace*{1cm}</body> \\
\hspace*{0.5cm}</html> \\
}}
\\
O resultado será mostrado na figura a seguir: \\
%--------------FIGURA 1-------------------------------%
\begin{center}
\includegraphics{estrutura_basica_minima_aparencia.PNG}
\end{center}
.\\
HTML é basicamente formado por \textbf{TAGs} e cada declaração aberta deverá ter sua contrapartida fechando e o efeito desejado será aplicado sobre o conteúdo que estiver entre a declaração. \\
Além desta estrutura básica, podemos inserir diversos tipos de formatação para adequar a página à estética desejada ou ao formato necessário para exibição. \\
\\
\\
%---------------------------------------------
\textbf{Boas Práticas:} \\
\\
\textbf{- Uso de Indentação ou Recuos:} \\
\\
A indentação no HTML não é obrigatória, porém é sempre recomendável a fim de melhorar a organização e visualização do código fonte. \\
\\
\textbf{- Inserção de comentários:} \\
\\
A utilização de comentários é útil para deixar o código fonte mais facilmente localizável e identificável. Também podemos utilizá-los de forma instrutiva, explicando as ações tomadas e a forma de utilização. \\
\\
\textit{\hspace*{0.5cm}<!-- este é um comentário -->} \\
\textit{\hspace*{0.5cm}<!-------------------------------->} \\
\textit{\hspace*{0.5cm}<!--Tabela inicia aqui------>} \\
\\
\\
Diversas outras opções podem ser inseridas em páginas \textbf{HTML}, inclusive comandos de programação e bancos de dados e animação, entre outros. \\
\end{document}