Prévia do material em texto

<p>Relatório de Aula Prática - Desenvolvimento Responsivo</p><p>Desenvolvimento Responsivo (Unopar e Anhanguera)</p><p>Digitalizar para abrir em Studocu</p><p>A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade</p><p>Relatório de Aula Prática - Desenvolvimento Responsivo</p><p>Desenvolvimento Responsivo (Unopar e Anhanguera)</p><p>Digitalizar para abrir em Studocu</p><p>A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>https://www.studocu.com/pt-br/document/unopar-e-anhanguera/desenvolvimento-responsivo/relatorio-de-aula-pratica-desenvolvimento-responsivo/83608061?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>https://www.studocu.com/pt-br/course/unopar-e-anhanguera/desenvolvimento-responsivo/6730927?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>https://www.studocu.com/pt-br/document/unopar-e-anhanguera/desenvolvimento-responsivo/relatorio-de-aula-pratica-desenvolvimento-responsivo/83608061?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>https://www.studocu.com/pt-br/course/unopar-e-anhanguera/desenvolvimento-responsivo/6730927?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>Rio de Janeiro/RJ</p><p>2024</p><p>NOME: VITOR HUGO FERNANDO PEREIRA BRANDÃO</p><p>RA: 3478159801</p><p>DESENVOLVIMENTO WEB</p><p>PORTIFÓLIO – RELATÓRIO DE AULA PRÁTICA</p><p>DISCIPLINA: DESENVOLVIMENTO RESPONSIVO</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>SUMÁRIO</p><p>INTRODUÇÃO ............................................................................................... 3</p><p>METODOLOGIA ........................................................................................... 3</p><p>RESULTADOS ............................................................................................... 4</p><p>CONCLUSÃO ................................................................................................. 6</p><p>REFERÊNCIAS BIBLIÓGRAFICAS .............................................................. 6</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>3</p><p>INTRODUÇÃO</p><p>A responsividade em páginas web é fundamental para garantir uma boa</p><p>experiência do usuário, independentemente do dispositivo utilizado para acessar o</p><p>conteúdo. Este relatório descreve o processo de implementação da responsividade em</p><p>uma página web, utilizando media queries em CSS, com o objetivo de adaptar o layout</p><p>da página em diferentes dispositivos, como computadores, tablets e smartphones.</p><p>METODOLOGIA</p><p>A atividade foi realizada utilizando o website Replit (https://replit.com), uma plataforma</p><p>de edição de código online que permite a construção e teste de páginas web com</p><p>conteúdos HTML, CSS e JavaScript. O template utilizado disponibiliza arquivos HTML,</p><p>CSS e JS para a criação da página web.</p><p>• Foi construída uma página web simples contendo seis blocos dentro de uma</p><p>“<div>”.</p><p>• Utilizando o conceito de media queries em CSS, a responsividade da página foi</p><p>implementada com base em diferentes breakpoints:</p><p>• Break Point 1280 pixels (largura mínima): A página exibe os seis blocos</p><p>em seis colunas, adequado para acesso por computadores.</p><p>• Break Point 768 pixels (largura mínima): A página adapta-se para exibir</p><p>as informações em três colunas, adequado para tablets e dispositivos com telas</p><p>menores.</p><p>• Break Point 480 pixels (largura mínima): A página é ajustada para exibir</p><p>as informações em duas colunas, considerando dispositivos com telas ainda</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>4</p><p>menores.</p><p>• Break Point menor que 480 pixels (largura mínima): A página é adaptada</p><p>para exibir as informações em uma única coluna, ideal para smartphones e outros</p><p>dispositivos móveis com espaço limitado na tela.</p><p>RESULTADOS</p><p>Após a implementação da responsividade utilizando media queries, foram</p><p>observados os seguintes resultados:</p><p>Figura 1: Captura de tela – index.html em página web (width mínimo: 768px)</p><p>Fonte: Visual Studio Code in Live Server. Elaborado pelo Autor (2024).</p><p>A página web se ajusta de forma adequada e eficiente em diferentes dispositivos,</p><p>mantendo a mesma funcionalidade e usabilidade.</p><p>Os breakpoints definidos permitem uma transição suave do layout da página</p><p>conforme o tamanho da tela do dispositivo.</p><p>A seguir, estão os códigos HTML e CSS utilizados para a construção da página</p><p>web e implementação da responsividade, respectivamente:</p><p>Código 1: HTML</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><meta charset="utf-8"></p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p><meta name="viewport" content="width=device-width"></p><p><title>Desenvolvimento Responsivo</title></p><p><link href="style.css" rel="stylesheet" type="text/css" /></p><p></head></p><p><body></p><p><div class="grid"></p><p><h3 class="franca">França</h3></p><p><h3 class="estadosunidos">Estados Unidos</h3></p><p><h3 class="espanha">Espanha</h3></p><p><h3 class="china">China</h3></p><p><h3 class="italia">Itália</h3></p><p><h3 class="turquia">Turquia</h3></p><p></div></p><p></body></p><p></html></p><p>Fonte: Visual Studio Code. Elaborado pelo Autor (2024).</p><p>Código 2: CSS</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p><p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>html {</p><p>height: 100%;</p><p>width: 100%;</p><p>}</p><p>.grid {</p><p>display: grid;</p><p>}</p><p>.franca {</p><p>color: red;</p><p>}</p><p>.estadosunidos {</p><p>color: green;</p><p>}</p><p>.espanha {</p><p>color: blue;</p><p>}</p><p>.china {</p><p>color: yellow;</p><p>}</p><p>.italia {</p><p>color: orange;</p><p>}</p><p>.turquia {</p><p>color: purple;</p><p>}</p><p>@media (min-width: 1280px) {</p><p>.grid {</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p><p>6</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p><p>41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p><p>51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p><p>60</p><p>61</p><p>62</p><p>grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;</p><p>}</p><p>}</p><p>@media (min-width: 768px) and (max-width: 1280px) {</p><p>.grid {</p><p>grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;</p><p>}</p><p>}</p><p>@media (min-width: 480px) and (max-width: 767px) {</p><p>.grid {</p><p>grid-template-columns: 1fr 1fr 1fr;</p><p>}</p><p>}</p><p>@media (min-width: 290px) and (max-width: 479px) {</p><p>.grid {</p><p>grid-template-columns: 1fr 1fr;</p><p>}</p><p>}</p><p>@media (max-width: 289px) {</p><p>.grid {</p><p>grid-template-columns: 1fr;</p><p>}</p><p>}</p><p>Fonte: Visual Studio Code. Elaborado pelo Autor (2024).</p><p>CONCLUSÃO</p><p>A atividade demonstrou a importância e a aplicação prática da responsividade em</p><p>páginas web. Através do uso de media queries em CSS, foi</p><p>possível criar uma página que</p><p>se adapta de forma eficiente a diferentes dispositivos, proporcionando uma experiência</p><p>consistente e acessível para o usuário.</p><p>REFERÊNCIAS BIBLIÓGRAFICAS</p><p>Replit. The software creation platform. IDE, AI, and Deployments. Disponível em:</p><p>https://replit.com/. Acesso em: 06 fev. 2024.</p><p>MICROSOFT. Visual Studio Code. Versão 1.85.2. Microsoft Corporation, 2024.</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>7</p><p>Disponível em: https://code.visualstudio.com/. Acesso em: 06 fev. 2024.</p><p>Baixado por Ricardo Lanzoni (riclanzoni@gmail.com)</p><p>lOMoARcPSD|29003882</p><p>https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=relatorio-de-aula-pratica-desenvolvimento-responsivo</p>