01-Introdução à desenvolvimento Web Responsivo

Prévia do material em texto

U
Introdução à desenvolvimento Web
Responsivo
tilizar as ferramentas corretas e mais atuais é quase que um pré-
requisito para o desenvolvimento Web Responsivo e, por isso,
nessa aula abordamos quais são estas ferramentas,
entendemos o que significa “responsivo” e qual a importância
disso no desenvolvimento Web. Vamos abordar, também, questões como
a arquitetura cliente-servidor e a diferença entre frontend e backend.
Naturalmente que para falarmos de desenvolvimento Web responsivo
vamos abordar também temos como o HTML 5 e o CSS3, além dos
principais frameworks do mercado para este fim. Para isso, vamos
desenvolver pequenos projetos que podem ser base para seus projetos
vindouros e a construção de um sólido conhecimento na área. Vamos
abordar, também, o PHP, o banco de dados MariaDB e desenvolver uma
pequena aplicação completa fullstack (frontend e backend).
É muito importante alinharmos as expectativas dessa disciplina pois a
disciplina engloba conceitos que são extremamente amplos e não
poderemos abordar todos os detalhes de todas as tecnologias aqui.
Por isso, de antemão podemos já mencionar que não vamos entrar em
tecnologias avançadas de backend e nem em frameworks específicos,
como Vue, Node, React Native, Angular etc., assim como não entraremos
em desenvolvimento com Ionic, Flutter etc.
Não obstante à isso, é preciso sabermos também que não adentraremos
em questões de experiência do usuário, designe, estética e avaliação de
interfaces ou, ainda, com processos de qualidade de software ou
usabilidade,
 
 
 
Ferramentas de desenvolvimento
A utilização da ferramenta certa para o trabalho certo é primordial e, por
isso, temos que tomar muito cuidado na escolha do software para
desenvolvimento Web. Nessa etapa precisamos nos familiarizar com as
mais utilizados no mercado profissional.
Para isso, vamos listar os principais softwares de edição de código,
realmente usados pros desenvolvedores profissionais.
• Visual Studio Code
• Sublime
• Atom
• Brackets
 
Muito embora você possa utilizar qualquer outra de seu agrado e até
ferramentas mais simples e nativas do sistema operacional, como
Notepad (bloco de notas), VIM ou Nano, claro.
É muito difícil indicar, em uma aula, qual ferramenta deve ser utilizada pois
depende muito do gosto pessoal de cada discente e, portanto, você deve
sentir-se livre para experimentar cada uma delas e descobrir que lhe
agrada mais. Para o desenvolvimento dos códigos dessa disciplina o
professor utiliza o Visual Studio Code, conhecido também como
“VSCode”, devido à infinidade de plug-ins disponíveis e facilidade de uso.
Todas as ferramentas possuem versões gratuitas que podem ser usadas
sem nenhuma licença. Algumas delas possuem versões pagas com
recursos extras, mas para essa disciplina isso não é necessário.
Lembre-se de a ferramenta de edição de código não é necessariamente
uma IDE (Integrated Development Environment (Ambiente de
Desenvolvimento Integrado). Editores de código não fazem compilação,
testes, monitoramento entre outras atividades e, por isso, são mais leves e
fácies de trabalhar. IDEs são normalmente softwares pesados e robustos,
cheias de recursos que exigem muito da máquina. Mesmo para o
backend, nessa disciplina vamos utilizar apenas editores de código, pois
não faremos nenhum tipo de depuração em nosso código-fonte.
Para essa disciplina teremos que utilizar um contêiner de aplicação e para
não termos que instalar vários serviços separadamente vamos utilizar um
muito famoso chamado XAMPP, mas você também poderá utilizar um de
sua escolha. Vamos abordar, na aula sobre backend, melhor essa
ferramenta.
Não deixe de já ter instalado algum editor de código. O processo de
instalação é bastante simples em qualquer sistema profissional e não
requer nenhuma grande interferência do usuário para tal. Basta instalar.
 
 
Evolução da Web e importância do responsivo
Para entendermos o motivo de termos uma disciplina sobre web
responsivo temos que entender um pouco sobre a evolução da web.
Tudo começou os laboratórios do CERN (organização europeia para
pesquisas nuclear) E um dos principais fatores que impulsionou todas as
pesquisas foi algo que sempre faz a ciência a tecnologia avançarem
muito: Uma guerra. Neste caso, a guerra fria (1946-1991), mas foi
somente em 1989 que Tim Berners-Lee publicou o primeiro site do
mundo, ainda disponível no site do CERN e em sua versão original
(terminal).
A linha do tempo abaixo mostra um pouco melhor os eventos que
impactaram o processo de evolução da Web.
Com toda essa evolução e o termo responsivo acabou aparecendo e o
motivo é bastante simples: novas tecnologias e novos dispositivos.
Responsivo significa que dar uma resposta rápida e clara adequando-se a
uma situação. Na tecnologia responsivo é um site que se altera de acordo
com próprio dispositivo em que é visualizado, reorganizando suas
informações e aparência.
Devemos nos preocupar muito com isso pois existem muitas variações de
interfaces, resoluções, tecnologias de display, tamanhos de telas entre
outras. Imagine, por exemplo, se o seu site funcionasse em apenas um
tipo de resolução por exemplo, como era antigamente. Ele seria
praticamente inútil. Imagine, ainda, temos de desenvolver uma versão
para cada resolução. Seria humanamente impossível.
Portanto a ideia do responsivo é que seu site se adapte sozinho, ou seja
automaticamente, a qualquer interface, independentemente da tecnologia
de exibição. Tudo isso com um único código-fonte. Um site que é
perfeitamente visualizado em computadores e celulares.
Veja, ainda, o gráfico abaixo, obtido no site “statcounter”. Ele mostra quais
são os tipos dispositivos mais utilizados globalmente para acesso à
internet. Repare que a “briga” entre celulares e computadores é bastante
acirrada. É por isso que precisamos nos preocupar muito com a
disponibilidade de nossa aplicação, sendo ora apresentada em um
dispositivo móvel, ora em um desktop.
Arquitetura Cliente-Servidor
 
É muito importante entendermos arquitetura Cliente-Servidor para
sabermos como funciona, superficialmente, a internet.
Veja a imagem abaixo. Ela representa a clássica arquitetura cliente
servidor, onde um browser (que pode ser de qualquer tipo de dispositivo)
faz uma requisição de um site (1). Essa requisição chega para o servidor
que hospeda (e responde) este site (2) e é processada. São realizar as
consultas em banco de dados, processamentos, consultas a arquivos etc.
Então o servidor começa o processo de resposta (3) através da rede
mundial, chegando finalmente e de volta ao cliente inicial (4).
A arquitetura cliente-servidor é a “mãe” de todas as arquiteturas atuais
existentes, pois todas trabalham de forma muito similar, além de ter sido
um dos primeiros modelos adotados pelo mercado.
O frontend, neste caso, está do lado do cliente, enquanto o backend está
ao lado do servidor. O frontend é tudo que é visto pelo usuário, enquanto o
backend são todos os recursos utilizados para o processamento em geral.
 
 
Atividade extra
 
Veja os vídeos disponibilizados abaixo para compreender melhor sobre a
qualidade de responsividade e o impacto nas tecnologias atuais.
 
•
https://www.youtube.com/watch?v=srvUrASNj0s
•
https://www.youtube.com/watch?v=zF6VSky4SIc
 
Não deixe, também, de buscar mais sobre a arquitetura cliente-servidor e
como criar sites realmente empolgantes para os usuários, considerando
UI/UX (User Interface e User Experience) englobados na usabilidade, um
dos critérios da qualidade de software e de muitas certificações ISO.
 
 
Referência Bibliográfica
 
Flatschart, F., HTML5 – Embarque imediato, Editora Brasport, 1ª Ed., 2011
Segurado, S. V., Projeto de Interface com Usuário, Editora Pearson, 1ªEd.,
2016
Frain, B., Responsive Web Design with HTML5 and CSS, Editora Packt
Publishing, 3ª Ed., 2020
Libby, A., Gupta G., Talesra A., Responsive Web Design with HTML5 and
CSS3 Essentials, Editora Packt Publishing, 1ª Ed., 2016
Kyrnin, J., Learning Responsive Web Design, Editora Addison-Wesley
Professional,2017
Ir para questão
https://www.youtube.com/watch?v=srvUrASNj0s
https://www.youtube.com/watch?v=zF6VSky4SIc