Plano de Execucao Projeto Integrador - Desenvolvimento Aplicacao Web HTML CSS JavaScript

PLANO DE EXECUÇÃO TEMA DESENVOLVIMENTO DE UMA APLICAÇÃO WEB UTILIZANDO OS CONCEITOS BÁSICOS DE ENGENHARIA DE SOFTWARE E PROGRAMAÇÃO WEB OBJETIVOS Realizar o levantamento de requisitos e a criação de um diagrama de classes para projetar assim como desenvolver aplicações web através da utilização dos conceitos de programação baseados em HTML CSS e JavaScript Como atividade de extensão prevista os alunos em grupos irão propor a um site Web para o Instituto de Menores Dom Antônio Zattera IMDAZ DESCRIÇÃO DAS ETAPAS DO PROJETO 1 PESQUISA Tendo por base os conceitos explorados nas unidades de aprendizagem e nas webconferências das disciplinas de Ferramentas de Desenvolvimento Web e Engenharia de Software bem como a contextualização dos mesmos feitos na disciplina do Projeto Integrador IVA os alunos irão sistematizar os conhecimentos teóricos adquiridos de modo a transformálos em prática através do desenvolvimento de uma aplicação web Durante o processo de criação obrigatoriamente deverão ser utilizados conceitos de Programação Web e de Engenharia de Software 2 DESENVOLVIMENTO O projeto integrador será voltado para o desenvolvimento de uma aplicação web de forma iterativa e incremental Durante todo o projeto os alunos serão conduzidos ao resgate dos conceitos das duas disciplinas do módulo assim como também serão orientados a empregar a Internet como uma das fontes de referência para as atividades práticas Este projeto será composto por duas etapas principais Primeiramente os alunos irão definir o enfoque da aplicação web levantar os requisitos necessários para a realização do projeto e montar um diagrama de classes justificando cada uma das suas escolhas Em seguida os estudantes irão praticar a programação web focando em comandos básicos existentes no HTML no CSS e no JavaScript Cada encontro presencial será baseado na resolução de problemas práticos que englobam assuntos em comum entre os diferentes projetos propostos pelos estudantes 3 ENTREGA PARCIAL Na entrega parcial que contempla 40 da nota final deve ser preparado pelos alunos um relatório contendo a definição do enfoque de sua aplicação web b apresentação de toda a análise de requisitos funcionais e não funcionais para a realização de um projeto estático c criação de um diagrama de classes para demonstrar o funcionamento das funcionalidades da aplicação O relatório deverá ser entregue em formato PDF por meio da Plataforma A até o dia 1109 às 23h59 4 ENTREGA FINAL Na entrega final que contempla 60 da nota final deve ser realizado todo o processo de desenvolvimento de software da aplicação web escolhida de modo estático Esta entrega irá consistir na preparação de um relatório o qual irá contemplar um resumo das atividades práticas desenvolvidas registrando os procedimentos realizados as capturas de tela que caracterizam as funcionalidades da aplicação desenvolvida bem como os códigos correspondentes à aplicação Durante a apresentação do projeto integrador IVA os alunos devem mostrar todas as etapas feitas e desenvolvidas tanto na entrega parcial quanto na entrega final O relatório deverá ser entregue em formato PDF por meio da Plataforma A Além do relatório final também será feita uma apresentação com slides na qual os alunos irão apresentar o funcionamento e todas as etapas do projeto A apresentação será dia 0710 às 23h59 É esperado que os alunos apresentem os seguintes itens no contexto de suas aplicações Cabeçalho do website Exemplo Fig 1 Barra com o nome da aplicação ou site Barra de menu com pelo menos os itens Início Sobre Serviços oferecidos Páginas relacionadas e Contato Campo para pesquisa de informações no site Inserir um slider show com pelo menos três abas dica utilizar plugin slick slider Fig 1 Exemplo de cabeçalho Blocos de conteúdo do website Exemplo Fig 2 Criação de blocos de conteúdos Fig 2 Exemplo de blocos de conteúdo Rodapé do website Exemplo Fig 3 Criação do rodapé contendo pelo menos os itens Publicações mais populares Tags Um pouco sobre nós e Contato Criação da barra de informação dos direitos autorais com os links para acesso às redes sociais Popular Post Lorem Ipsum is simply dummy text of the printing 25September 2013 Lorem Ipsum is simply dummy text of the printing 25September 2013 Tags apps blog blogroll christmas cms coda concert daily design develop dialog drinks envato food fun gallery gift holiday icon illustration ipad iphone journal jquery label link marketing mobile motion music photo profession quotation recipes show sound strategy tv typography video A little about us There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some form by injected humour or randomised words which dont look even slightly believable If you are going to use a passage of Lorem Ipsum you need to be sure there isnt anything Get in touch Lorem Ipsum is simply dummy of the printing and typesetting industry Lorem Ipsum has been the industrys standard dummy text ever since Texas US emailemailcom 8900988045590 2013 Web world All rights reserved Theme by cssauthor Relatório de Desenvolvimento da Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Parte 2 Desenvolvimento Estático Nome do aluno INTRODUÇÃO Este relatório marca um ponto de controle importante no processo de desenvolvimento da aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Ele abrange as atividades práticas realizadas até o momento fornecendo um resumo das etapas concluídas e uma visão geral dos elementoschave da aplicação Durante esta fase estática detalharemos a implementação dos principais elementos da aplicação como cabeçalho blocos de conteúdo e rodapé conforme requisitado no projeto integrador IVA Esses elementos desempenham um papel fundamental na usabilidade e na apresentação da aplicação aos usuários Vamos abordar a estrutura da aplicação os procedimentos realizados e fornecer uma visão geral dos códigosfonte associados a esses elementos É importante destacar que esta versão estática servirá como base para futuros desenvolvimentos e melhorias continuando a aplicação a se alinhar com as necessidades em evolução do IMDAZ e seus usuários seguindo os princípios da engenharia de software e programação web OBJETIVOS O objetivo deste relatório é fornecer uma visão geral das atividades práticas realizadas durante a fase estática do desenvolvimento da aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Ao criar este relatório temos os seguintes objetivos em mente Registro das Etapas Concluídas Documentar de forma clara e precisa as etapas do desenvolvimento da aplicação até o momento incluindo o design e a implementação dos elementoschave Apresentação das Funcionalidades Apresentar as funcionalidades estáticas da aplicação destacando elementos como o cabeçalho do site os blocos de conteúdo e o rodapé Demonstração de CódigosFonte Oferecer uma visão geral dos códigosfonte relevantes para os elementos implementados facilitando a compreensão das implementações técnicas Cumprimento dos Requisitos Certificarse de que a aplicação estática aborda os requisitos estabelecidos no contexto do projeto integrador IVA incluindo elementos como a barra de menu o campo de pesquisa e a integração do slider show Preparação para o Desenvolvimento Contínuo Estabelecer uma base sólida para o desenvolvimento contínuo da aplicação garantindo que as estruturas e funcionalidades existentes possam ser aprimoradas e expandidas conforme necessário Conformidade com Princípios de Engenharia de Software Assegurar que o desenvolvimento até o momento esteja alinhado com os princípios de engenharia de software incluindo boas práticas de codificação modularidade e documentação adequada Prontidão para Apresentação Preparar o material necessário para a apresentação do projeto integrador IVA destacando as etapas realizadas e as funcionalidades implementadas até o momento DESENVOLVIMENTO Cabeçalho do Website O cabeçalho do website é a primeira impressão que os usuários têm da aplicação Nossa aplicação inclui Uma barra com o nome da instituição garantindo uma identidade visual clara Uma barra de menu contendo itens essenciais como Início Sobre Serviços oferecidos Páginas relacionadas e Contato para facilitar a navegação Um campo para pesquisa de informações no site tornando mais fácil encontrar conteúdo relevante A inserção de um slider show com três abas utilizando o plugin Slick Slider para destacar informações e imagens relevantes Figura 1 Cabeçalho do website Fonte Autoria Própria 2023 Blocos de Conteúdo do Website Os blocos de conteúdo são componentes fundamentais para apresentar informações de forma organizada e acessível Criamos blocos de conteúdo que ajudam a estruturar e apresentar informações de maneira eficaz contribuindo para a experiência do usuário Figura 2 Blocos de conteúdo do website Fonte Autoria Própria 2023 Rodapé do Website O rodapé é a parte final do site mas não menos importante Ele oferece informações adicionais e recursos para os visitantes Nosso rodapé inclui Itens como Publicações mais populares Tags Um pouco sobre nós e Contato para facilitar o acesso a informações relevantes Uma barra de informação dos direitos autorais com links para acesso às redes sociais fortalecendo a presença online do IMDAZ Figura 3 Rodapé do website Fonte Autoria Própria 2023 Em anexo está inserido todo o código HTML e CSS necessário para a criação dessas 3 partes do desenvolvimento CONSIDERAÇÕES FINAIS Este relatório marca uma fase significativa no desenvolvimento da aplicação web destinada ao Instituto de Menores Dom Antônio Zattera IMDAZ Durante o processo de criação nossa equipe se empenhou em aplicar os conceitos de engenharia de software e programação web adquiridos ao longo das unidades de aprendizagem e das webconferências das disciplinas Ferramentas de Desenvolvimento Web e Engenharia de Software Também integramos a contextualização proporcionada pela disciplina do Projeto Integrador IVA tornando a uma experiência prática valiosa Ao abordar os requisitos funcionais e não funcionais tivemos a oportunidade de identificar as necessidades específicas do IMDAZ e traduzilas em funcionalidades tangíveis Estabelecemos uma base sólida para a aplicação considerando aspectos críticos como segurança usabilidade performance e manutenibilidade Através deste processo adquirimos uma compreensão mais profunda de como a engenharia de software e a programação web se aplicam na prática No que diz respeito aos elementos essenciais da aplicação web conseguimos implementar com sucesso um cabeçalho que oferece identificação clara da aplicação navegação intuitiva e um mecanismo de pesquisa eficiente blocos de conteúdo que estruturam informações de maneira organizada e acessível e um rodapé que fornece informações adicionais e recursos úteis para os usuários ANEXO Código HTML html head form actionsearch methodget input typetext nameq placeholderPesquisar button typesubmitPesquisarbutton form link relstylesheet typetextcss hrefhttpscdnjsdelivrnetnpmslickcarousel181slickslickcs s link relstylesheet typetextcss hrefhttpscdnjsdelivrnetnpmslickcarousel181slickslick themecss script typetextjavascript srchttpscodejquerycomjquery360minjsscript script typetextjavascript srchttpscdnjsdelivrnetnpmslick carousel181slickslickminjsscript div classslider divimg srchttpsscontentfgyn181fnafbcdnnetvt3930808 621388536841775485889777978685593195158581384njpg nccat110ccb1 7ncsid52f669ncohcWxcUQDwzLlsAX7MP2Inchtscontentfgyn18 1fnaoh00AfDyxlxSyK2k8xUGRWTFmD9vAtQR7dzrbfbPMt6LRwv7NAoe64F9825E altImagem 1div divimg srchttpsucpeledubrlaravelpublicstoragenoticiasOld37927062 014162118jpg altImagem 2div div script typetextjavascript documentreadyfunction sliderslick autoplay true autoplaySpeed 2000 dots true arrows false script titleTitletitle link relshortcut icon hrefFavicon link relalternate typeapplicationrssxml hrefRSS blockDescription meta namedescription contentMetaDescription blockDescription meta namecolorText content000000 meta namecolorLink content515151 meta namefontText contentFutura meta nameselectText Size content12 titleNormal meta nameselectText Size content10 titleSmall meta nameselectText Size content16 titleBig meta nameifShow Photo Caption content1 meta nameifShow Photo Border content1 meta nameifInfinite Scroll content1 meta nameifShow RSS content0 meta nameifShow Archive content0 meta nameifShow Theme Link content0 meta nametextTwitter Username content meta nametextInstagarm Username content meta nametextFacebook URL content meta nametextCustom Link One URL content meta nametextCustom Link One Title content meta nametextCustom Link Two URL content meta nametextCustom Link Two Title content meta nametextCustom Link Three URL content meta nametextCustom Link Three Title content HEDER VARIABLES LONDON meta nameimageCover content meta namecolorFont Header contentFFFFFF meta namecolorCover Accent content213f52 meta namefontHeader contentFutura style body margin 0 padding 0 background FFFFFF backgroundimage urlimageBackground backgroundattachment fixed fontsize selectText Sizepx selectFont Size fontfamily fontText a color colorLink colorLink textdecoration none Header themebylutzpreuss position absolute textalign right zindex 43 width 300px right 10px lineheight 75px color rgba0 0 0 06 fontfamily fontHeader themebylutzpreuss a color rgba0 0 0 06 borderbottom 1px solid rgba0 0 0 02 header paddingtop 75px width 100 backgroundcolor FFFFFF position relative top 0px color colorFont Header fontfamily fontHeader header coverbackground paddingtop 200px paddingbottom 150px width 100 position relative zindex 1 display block header underphoto height 100 width 100 top 0px position absolute backgroundimage urlimageCover backgroundsize cover backgroundposition center center display block filter grayscale100 webkitfilter grayscale100 mozfilter grayscale100 msfilter grayscale100 ofilter grayscale100 filter black webkitfilter grayscale1 header overcolor height 100 width 100 top 0px position absolute backgroundcolor colorCover Accent display block opacity 06 header cover position relative zindex 2 textalign center header title fontsize 22px border 3px solid colorFont Header padding 5px paddingleft 10px paddingright 10px color colorFont Header textdecoration none header fancy width 300px height 2px backgroundcolor colorFont Header border none position relative margintop 30px header two margintop 10px important header description width 600px position relative left 50 marginleft 300px header links width 600px position relative left 50 marginleft 300px fontsize 16px margintop 10px header links link color colorFont Header textdecoration none marginleft 10px marginright 10px GENERAL infscrloading display none opacity 0 content width 700px height 100 margin 0 auto fontfamily fontText content a color 000 colorLink textdecoration none borderbottom 1px solid rgba100 100 100 02 description a color colorDescription colorLink textdecoration underline overlayer position fixed zindex 1 top 0px height 100 backgroundcolor FFF paddingleft 20px paddingright 20px left calc50 selectContent Size2 20px width selectContent Size GENERAL POST content post background FFF colorPost Background color colorText colorText width 100 wordwrap breakword overflow hidden position relative fontsize selectText Size selectFont Size padding 14px paddingbottom 50px margintop 60px marginbottom 60px content post text width 500px position relative left 50 marginleft 250px content post blockquote display block webkitmarginbefore 5px important webkitmarginafter 5px important webkitmarginstart 8px important webkitmarginend 8px important borderleft 3px solid rgb230 230 230 paddingleft 10px top 3px position relative content post a color colorLink colorLink textdecoration none borderbottom 1px solid rgba100 100 100 02 content post img height auto width auto position relative display block content post iframe img embed object video maxwidth 100 content post answerformcontainer minheight 140px position relative content post headline fontweight 300 textalign center borderbottom 3px solid rgba0 0 0 01 paddingbottom 10px fontsize 150 fontweight 400 width 500px position relative content post headline a color colorText colorText border none textdecoration none POST CONTROLS content post control width 134px height 30px position relative left 50 margintop 20px marginleft 67px borderradius 4px border 1px solid rgba100 100 100 02 content post control buttons width 134px height 20px top 10px right 5 opacity 04 content post control buttons perm position relative width 20px float left opacity 05 backgroundimage urlhttpstatictumblrcomhcjwxorcZdn75y57tumblrmsdalj1trt1s3zdk 4o1500png backgroundsize 20px height 23px opacity 05 paddingtop 7px opacity 05 paddingleft 10px paddingright 14px backgroundrepeat norepeat backgroundposition center center content post control buttons permhover opacity 1 content post control buttons like position relative width 20px height 23px paddingtop 7px float left opacity 05 paddingleft 14px paddingright 10px borderright 1px solid rgba0 0 0 03 content post control buttons likehover opacity 1 borderright 1px solid rgba100 100 100 02 content post control buttons reblog position relative width 20px float left right 0 height 23px opacity 05 paddingtop 7px opacity 05 paddingleft 14px paddingright 10px borderright 1px solid rgba0 0 0 03 content post control buttons rebloghover opacity 1 borderright 1px solid rgba50 50 50 02 content post control buttons reblog a border none POST TEXT content text width 500px position relative left 100px content text body width 500px position relative fontsize 16px lineheight 20px textalign justify POST PHOTO content photo background FFF blockIndexPage padding 14px blockIndexPage content photo img margin 0 auto content photo caption width 500px position relative left 100px fontsize 120 POST PANORAMA POST PHOTOSET content photoset image margintop 10px content photoset imagefirstchild margintop 0px POST QUOTE content quote quote fontsize 150 position relative content quote source textalign right position relative margintop 10px width 80 left 20 fontsize 80 POST LINK content link width 500px position relative left 100px content link box position absolute top 0px left 0 width calc90 3px paddingleft 5 paddingright 5 paddingtop 20px paddingbottom 20px backgroundcolor colorLink ColorLink Post color FFF textalign center fontsize 110 borderradius 4px content link visiblebox position relative top 0px left 0 width 100 paddingtop 25px paddingbottom 20px opacity 0 content link box link position relative color FFF zindex 2 fontweight 100 POST CHAT content chat fontsize 110 width 500px position relative left 100px content chat li liststyle none margintop 10px bordertop 3px solid rgba150 150 150 01 paddingtop 10px content chat lifirstchild border none margintop 0px content chat label fontweight bold important POST VIDEO video tumblrvideocontainer width 100 important POST AUDIO audio width 500px important overflow hidden position relative left 100px audio cover position absolute top 0px right 0px width 100 left 15px top 15px audio infos paddingtop 15px paddingbottom 15px backgroundcolor rgba0 0 0 1 color FFF width 484px left 15px height 28px wordwrap breakword lineheight 16px textalign center position relative audio coverhover infos backgroundcolor rgba0 0 0 1 audio caption margintop 46px audio player iframe height 40px width 500px spotifyaudioplayer height 90px maxheight 90px POST ANSWER content answer width 500px position relative left 100px content answer avatar position relative float left marginright 8px marginbottom 10px content answer asker fontsize 100 fontweight bold wordwrap breakword borderbottom 3px solid rgba150 150 150 01 content answer text margintop 10px content answer answer margintop 14px bordertop 3px solid rgba150 150 150 01 PERMALINK PAGE permalinkpage width 700px position relative left 50 marginleft 350px permalinkpage reblogs width 100 margintop 30px position relative height 40px color colorText Text color permalinkpage reblogs a color colorText important Text color textdecoration none borderbottom 3px solid rgb240 240 240 permalinkpage reblogs reblog width 100 height 40px position relative backgroundcolor FFF float left textalign center lineheight 40px permalinkpage reblogs source width 49 marginleft 2 height 40px position relative backgroundcolor FFF float left textalign center lineheight 40px permalinkpage notescontainer width 470px margintop 12px backgroundcolor FFF padding 15px position relative left 100px color colorText Text color permalinkpage notescontainer info position relative height 22px width 100 permalinkpage notescontainer info left textalign left width 470px left 0px top 0px fontsize 18px position absolute permalinkpage notescontainer info center textalign center width 470px left 0px top 5px fontsize 12px position absolute permalinkpage notescontainer info right textalign right width 470px right 0px top 0px fontsize 18px position absolute permalinkpage notescontainer caption width 100 position relative bordertop 2px solid colorText Text color borderbottom 2px solid colorText Text color fontsize 12px textalign justify margintop 20px paddingtop 8px paddingbottom 8px permalinkpage notescontainer caption a color colorText TextLink color textdecoration none borderbottom 3px solid rgb240 240 240 permalinkpage notescontainer source width 100 height 40px backgroundcolor colorText TextLink color lineheight 40px fontsize 18px color FFF textalign center margintop 12px permalinkpage notescontainer tags width 430px position relative display block paddingtop 8px paddingbottom 8px marginleft 0px liststyle none bordertop 3px solid rgba100 100 100 02 borderbottom 3px solid rgba100 100 100 02 permalinkpage notescontainer tags li clear none important display inlineblock height 15px margin 0 4px 0 0 overflow hidden width auto permalinkpage notescontainer tags li lable fontweight 400 permalinkpage notescontainer tags lifirstchild marginleft 3em permalinkpage notescontainer tags li a color colorText TextLink color textdecoration none border none permalinkpage notescontainer olnotes width 100 marginbottom 60px PERMALINK PAGE BOTTOM position relative display block marginleft 36px liststyle none permalinkpage notescontainer olnotes linote clear none important display inlineblock height 15px margin 0 4px 0 0 overflow hidden width 15px permalinkpage notescontainer olnotes a border none important permalinkpage notescontainer olnotes linote imgavatar width 15px height 15px border none important permalinkpage notescontainer olnotes linote spanaction display none permalinkpage notescontainer morenoteslinkcontainer clear both important display block important fontsize 10px height auto overflow visible position relative important textalign left important width 100 important textalign center important margintop 20px important olnotes linote answercontent display none olnotes linote blockquote display none olnotes linote blockquote a display none FOOTER navigation navigation marginbottom 50px nextpage width 100 margintop 50px height 60px backgroundcolor rgba255 255 255 09 bottom 0 fontsize 18px lineheight 60px textalign center position relative paddingleft 15px paddingright 15px nextpage a color rgba40 40 40 1 border none prepage width 100 margintop 20px paddingleft 15px paddingright 15px height 60px backgroundcolor rgba255 255 255 09 bottom 0 fontsize 18px lineheight 60px textalign center position relative prepage a color rgba40 40 40 1 border none CSS CustomCSS style head body script typetextjavascript if self top documentgetElementByIdbuttonstylebottom34px script div classheader div idcoverbackground div idunderphotodiv div idovercolordiv div idcover h1a href idtitleTitleah1 blockDescription hr idfancy div iddescriptionDescriptiondiv hr idfancy classtwo blockDescription div idlinks blockAskEnableda classlink hrefaskAskLabela blockAskEnabled blockHasPages blockPagesa classlink hrefURLLabelablockPagesblockHasPages blockifShowArchivea classlink hrefarchiveArchiveablockifShowArchive blockifShowRSSa classlink hrefRSSRSSablockifShowRSS blockIfCustomLinkOneTitlea classlink hrefTextCustom Link One URLTextCustom Link One TitleablockIfCustomLinkOneTitle blockIfCustomLinkTwoTitlea classlink hrefTextCustom Link Two URLTextCustom Link Two TitleablockIfCustomLinkTwoTitle blockIfCustomLinkThreeTitlea classlink hrefTextCustom Link Three URLTextCustom Link Three TitleablockIfCustomLinkThreeTitle blockifTwitterUsernamea classlink hrefhttptwittercomTextTwitter UsernameTwitterablockifTwitterUsername blockifInstagarmUsernamea classlink hrefhttpinstagramcomTextInstagarm UsernameInstagramablockifInstagarmUsername blockifFacebookURLa classlink hrefTextFacebook URLFacebookablockifFacebookURL blockifShowThemelinka classlink hrefhttpthemesthatyouliketumblrcomThemea blockifShowThemelink div div div div div idcontent blockPermalinkPagediv classpermalinkpageblockPermalinkPage blockPostsblockText article classpost text blockTitle h3 idheadlinea hrefPermalinkTitleah3 blockTitle div idbodyBodydiv article blockTextblockPhoto article classpost photo a hrefPermalink img srcPhotoURLHighRes altPhotoAlt a blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage article blockPhotoblockPanorama article classpost panorama LinkOpenTag img srcPhotoURLPanorama altPhotoAlt LinkCloseTagblockCaption div classcaptionCaptiondiv blockCaption article blockPanoramablockPhotoset article classpost photoset Photoset700 blockIndexPage blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage blockPermalinkPage Photoset500 blockPermalinkPage article blockPhotosetblockQuote article classpost quote div idquoteQuotediv blockSource div idsourceSourcediv blockSource article blockQuoteblockLink article classpost link a hrefURL idlink Target div idbox Name div a a hrefURL idlink Target div idvisiblebox Name div a blockDescription div classdescriptionDescriptiondiv blockDescription article blockLinkblockChat article classpost chat blockTitle h3 idheadlinea hrefPermalinkTitleah3 blockTitle blockLines li classAlt userUserNumber blockLabel span classlabelLabelspan blockLabelLine li blockLines article blockChatblockVideo article classpost video blockIndexPage centerVideo700center blockIndexPage blockIndexPage blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage article blockVideoblockAudio article classpost audio div idnone styleopacity 0 blockAlbumArt img srcAlbumArtURL blockAlbumArt div styleblockAlbumArtmargintop 58pxblockAlbumArt idinfos blockArtist Artist blockArtist blockTrackName TrackName blockTrackName div div div idcover blockAlbumArt img srcAlbumArtURL blockAlbumArt div styleblockAlbumArtmargintop 58px backgroundcolor rgba0 0 0 03blockAlbumArt idinfos blockArtist Artist blockArtist blockTrackName br TrackName blockTrackName div div idplayer AudioPlayerBlack div div blockIndexPage blockCaption div styleblockAlbumArt margintop 64pxblockAlbumArt idcaptionCaptiondiv blockCaption blockIndexPage article blockAudioblockAnswer article classpost answer div classquestion img idavatar srcAskerPortraitURL48 span idaskerAsker askedspan div idtextQuestiondiv div div idanswerAnswerdiv article blockAnswer blockIndexPage div styleblockPhoto display none blockPhoto blockifShowPhotoCaption display block blockifShowPhotoCaption classcontrol div idbuttons div idlikeLikeButton size16 colorBlackdiv div idreblogReblogButton size16 colorBlackdiv a hrefPermalink titlePermalink Page classnotesdiv idpermdiva div div blockIndexPage article blockPermalinkPage blockDate blockRebloggedFrom div classreblogs div styleblockContentSourcewidth 49 blockContentSource idreblogReblogged from a targetblank hrefReblogParentURLReblogParentNameadiv blockContentSource div idsourceSource a targetblank hrefSourceURLSourceTitleadiv blockContentSource div blockRebloggedFrom div classnotescontainer div idinfo div idleftDayOfMonthWithZero MonthNumberWithZeroShortYeardiv div idcenterNoteCountWithLabeldiv div idrightTimeAgodiv div blockCaption div idcaption blockCaption Caption blockCaption div blockCaption blockHasTags ul idtags li span idlableTagsspan li blockTags li a hrefTagURLTaga li blockTags ul blockHasTags PostNotes div div blockDate blockPermalinkPage blockPosts div idnavigation blockNextPage div idnextpage a idnextpagelink hrefNextPageNext Page 187a div blockNextPage blockPreviousPage div idprepage a hrefPreviousPage171 Previous Pagea div blockPreviousPage div div footer div classfootercontent div classfootersection h3Publicações mais popularesh3 ul lia hrefMateriaisali lia hrefCrescimento da Educaçãoali lia hrefDados sobre Educaçãoali ul div div classfootersection h3Tagsh3 ul lia hrefMateriaisali lia hrefDicasali lia hrefInspiraçãoali ul div div classfootersection h3Um pouco sobre nósh3 pO Instituto de Menores Dom Antônio Zattera é uma instituição dedicada ao cuidado e educação de jovens em situação de vulnerabilidade situada em Pelotas Rio Grande do Sul Brasil Fundado em 1942 o instituto tem desempenhado um papel crucial na transformação de vidas por meio de programas de assistência e educação de qualidade Sua missão é proporcionar oportunidades e um ambiente seguro para o desenvolvimento desses jovens p div div classfootersection h3Contatoh3 pEndereço Av Domingos de Almeida 3150 Areal Pelotas RS 96085470p pEmail exemploemailcomp div div div classfooterbar pcopy 2023 Todos os direitos reservadosp div classsociallinks a hrefimg srchttpspngpngtreecomelementoursm20180515sm5afaf0c4b6017 jpg altFacebooka a hrefimg srchttpsstaticvecteezycomsystemresourcespreviews018930745 originaltwitterlogotwittericontransparentfreefreepngpng altTwittera a hrefimg srchttpsimgfreepikcomvetorespremiumiconedoinstagramde logotipodedistintivomoderno578229124jpg altInstagrama div div footer body html Código CSS style footer backgroundcolor 333 color fff padding 20px 0 footercontent display flex justifycontent spacebetween flexwrap wrap footersection flex 1 margin 0 10px footersection h3 fontsize 18px marginbottom 10px footersection ul liststyle none padding 0 footersection ul li marginbottom 5px footerbar display flex justifycontent spacebetween alignitems center margintop 20px footerbar p fontsize 14px sociallinks a marginleft 10px sociallinks img width 20px height 20px style Desenvolvimento da Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Seu Nome INTRODUÇÃO Este relatório marca um ponto de controle no desenvolvimento da aplicação web para o IMDAZ abrangendo as atividades até agora incluindo cabeçalho conteúdo e rodapé Esta fase estática detalha a implementação dos elementoschave fornecendo uma base para futuras melhorias alinhadas com as necessidades do IMDAZ e seguindo princípios de engenharia de software e programação web OBJETIVOS Este relatório tem como objetivo fornecer uma visão geral das atividades práticas na fase estática do desenvolvimento de uma aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Isso inclui o registro das etapas concluídas apresentação das funcionalidades estáticas demonstração de códigosfonte relevantes garantia do cumprimento dos requisitos do projeto integrador IVA preparação para o desenvolvimento contínuo e conformidade com princípios de engenharia de software Além disso buscase a prontidão para a apresentação do projeto destacando as etapas realizadas e as funcionalidades implementadas até o momento CABEÇALHO DO WEBSITE O cabeçalho do website é a primeira impressão que os usuários têm da aplicação Nossa aplicação inclui Uma barra com o nome da instituição garantindo uma identidade visual clara Uma barra de menu contendo itens essenciais como Início Sobre Serviços oferecidos Páginas relacionadas e Contato para facilitar a navegação Um campo para pesquisa de informações no site tornando mais fácil encontrar conteúdo relevante A inserção de um slider show com três abas utilizando o plugin Slick Slider para destacar informações e imagens relevantes CABEÇALHO DO WEBSITE Figura 1 Cabeçalho do website Instituto de Menores Dom Antônio Zattera IMDAZ Início Sobre Serviços oferecidos Páginas relacionadas Contato Fonte Autoria Própria 2023 BLOCOS DE CONTEÚDO DO WEBSITE Os blocos de conteúdo são componentes fundamentais para apresentar informações de forma organizada e acessível Criamos blocos de conteúdo que ajudam a estruturar e apresentar informações de maneira eficaz contribuindo para a experiência do usuário BLOCOS DE CONTEÚDO DO WEBSITE Figura 2 Blocos de conteúdo do website Fonte Autoria Própria 2023 RODAPÉ DO WEBSITE O rodapé é a parte final do site mas não menos importante Ele oferece informações adicionais e recursos para os visitantes Nosso rodapé inclui Itens como Publicações mais populares Tags Um pouco sobre nós e Contato para facilitar o acesso a informações relevantes Uma barra de informação dos direitos autorais com links para acesso às redes sociais fortalecendo a presença online do IMDAZ RODAPÉ DO WEBSITE Figura 3 Rodapé do website Publicações mais populares Tags Um pouco sobre nós Contato Materiais O Instituto de Menores Dom Antônio Endereço Av Domingos de Almeida 3150 Materiais Zattera é uma instituição dedicada ao Areal Pelotas RS 96085470 Crescimento da Educação Dicas cuidado e educação de jovens em Email exemploemailcom Dados sobre Educação Inspiração situação de vulnerabilidade situada em Pelotas Rio Grande do Sul Brasil Fundado em 1942 o instituto tem desempenhado um papel crucial na transformação de vidas por meio de programas de assistência e educação de qualidade Sua missão é proporcionar oportunidades e um ambiente seguro para o desenvolvimento desses jovens 2023 Todos os direitos reservados Fonte Autoria Própria 2023 CONSIDERAÇÕES FINAIS Neste relatório destacamos o desenvolvimento da aplicação web para o IMDAZ aplicando conhecimentos de engenharia de software e programação web adquiridos em disciplinas relevantes Priorizamos requisitos funcionais e não funcionais assegurando segurança usabilidade e desempenho Essa experiência aprofundou nosso entendimento prático dessas áreas Implementamos com êxito elementos essenciais incluindo um cabeçalho claro navegação intuitiva pesquisa eficiente blocos de conteúdo organizados e um rodapé informativo e útil para os usuários Relatório de Desenvolvimento de Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Nome do aluno INTRODUÇÃO A presente documentação tem como propósito a elaboração de um projeto para o desenvolvimento de uma aplicação web empregando os conceitos fundamentais de Engenharia de Software e Programação Web O projeto será desenvolvido em conformidade com os requisitos estabelecidos pelo Instituto de Menores Dom Antônio Zattera IMDAZ e servirá como uma ferramenta vital para otimizar a gestão de informações a comunicação interna e externa bem como o acesso a recursos educacionais para os alunos da instituição OBJETIVOS Realizar um levantamento detalhado de requisitos para a criação de uma aplicação web que atenda às necessidades específicas do Instituto de Menores Dom Antônio Zattera IMDAZ Desenvolver um diagrama de classes que representam as principais funcionalidades da aplicação e suas interações proporcionando uma visão clara do sistema Aplicar os conhecimentos teóricos adquiridos nas disciplinas de Ferramentas de Desenvolvimento Web e Engenharia de Software para transformar conceitos em prática garantindo uma abordagem eficaz para o desenvolvimento da aplicação Utilizar a metodologia de desenvolvimento iterativo e incremental assegurando que o projeto evolua de forma organizada e atenda às necessidades em constante mudança do IMDAZ Fornecer uma plataforma segura de fácil utilização e responsiva que permita a autenticação e autorização de diferentes tipos de usuários incluindo alunos professores e funcionários Facilitar a gestão de alunos permitindo o cadastro atualização e visualização de informações relacionadas aos alunos atendidos pela instituição Implementar recursos de comunicação interna como mensagens anúncios e calendários de eventos para melhorar a colaboração entre os membros da comunidade do IMDAZ Disponibilizar recursos educacionais como materiais didáticos videoaulas e exercícios de forma acessível aos alunos promovendo o aprendizado Permitir o acompanhamento do progresso dos alunos incluindo a atribuição de tarefas o registro de notas e o monitoramento do desempenho acadêmico Oferecer relatórios e estatísticas que auxiliem na avaliação do desempenho da instituição e dos alunos permitindo tomadas de decisão informadas DEFINIÇÃO DO ENFOQUE DA APLICAÇÃO WEB A definição do enfoque da aplicação web é um passo fundamental no processo de desenvolvimento pois estabelece a direção e o propósito do projeto Nesse contexto a aplicação web a ser criada tem como foco principal atender às demandas e requisitos específicos do Instituto de Menores Dom Antônio Zattera IMDAZ O enfoque central desta aplicação é proporcionar uma plataforma online abrangente destinada a melhorar a gestão de informações facilitar a comunicação interna e externa e disponibilizar recursos educacionais para os alunos que fazem parte da comunidade do IMDAZ A escolha desse enfoque é motivada pela necessidade de modernizar e otimizar os processos no IMDAZ tornandoos mais eficientes e acessíveis por meio de uma solução tecnológica Ao adotar uma abordagem orientada para a web o IMDAZ busca melhorar a experiência dos alunos professores e funcionários promovendo uma comunicação mais eficaz acesso fácil a recursos educacionais e um ambiente virtual de aprendizado e administração mais eficiente Portanto a aplicação web será concebida como um centro de informações e interação onde alunos poderão acessar materiais de estudo entregar tarefas acompanhar seu progresso acadêmico e interagir com colegas e professores Por outro lado professores e funcionários terão a capacidade de gerenciar informações dos alunos comunicarse com a comunidade escolar e administrar os processos internos da instituição de maneira mais eficaz ANÁLISE DE REQUISITOS FUNCIONAIS E NÃO FUNCIONAIS Requisitos Funcionais Autenticação e Autorização A aplicação deve permitir que os usuários se autentiquem com diferentes níveis de acesso alunos professores funcionários e atribuições específicas Gestão de Alunos Os professores e funcionários devem ser capazes de cadastrar atualizar e visualizar informações dos alunos atendidos pelo IMDAZ Comunicação Interna A aplicação deve suportar a comunicação interna entre professores funcionários e alunos incluindo mensagens anúncios e calendários de eventos Recursos Educacionais Deve haver uma seção para disponibilização de recursos educacionais como materiais didáticos videoaulas e exercícios Acompanhamento de Progresso A aplicação deve permitir que os professores acompanhem o progresso dos alunos incluindo notas e desempenho acadêmico Gestão de Tarefas Os professores podem atribuir tarefas e atividades aos alunos e os alunos devem poder entregálas online Relatórios e Estatísticas A aplicação deve fornecer relatórios e estatísticas para avaliar o desempenho da instituição e dos alunos Requisitos Não Funcionais Segurança A aplicação deve garantir a segurança dos dados dos alunos e a integridade das informações Usabilidade A interface da aplicação deve ser intuitiva e de fácil utilização para usuários de diferentes níveis de habilidade Performance A aplicação deve ser responsiva e de rápido carregamento Disponibilidade A aplicação deve estar disponível 247 para que os usuários acessem as informações quando necessário Compatibilidade Deve ser compatível com os principais navegadores web para garantir o acesso a um público amplo Manutenibilidade O códigofonte deve ser bem documentado e modular para facilitar futuras atualizações e manutenções DIAGRAMA DE CLASSES A seguir apresentamos um diagrama de classes simplificado para demonstrar o funcionamento das principais funcionalidades da aplicação Figura 1 Diagrama de Classes Fonte Autoria Própria 2023 Explicação do Diagrama de Classes Usuário Representa todos os tipos de usuários da aplicação alunos professores funcionários Pessoa Superclasse de Usuário contendo informações básicas como nome email e senha Aluno Subclasse de Usuário contendo informações específicas dos alunos como matrícula e curso Professor Subclasse de Usuário contendo informações específicas dos professores como disciplinas ministradas Funcionário Subclasse de Usuário contendo informações específicas dos funcionários como cargo Mensagem Representa as mensagens enviadas entre os usuários Tarefa Representa as tarefas atribuídas pelos professores aos alunos Material Educacional Representa os recursos educacionais disponibilizados na aplicação CONSIDERAÇÕES FINAIS O desenvolvimento da aplicação web proposta para atender às demandas do Instituto de Menores Dom Antônio Zattera IMDAZ representa um compromisso com a modernização e eficiência dos processos educacionais e administrativos Ao longo deste projeto estabelecemos com clareza o enfoque da aplicação definindoo como uma plataforma centralizada para melhorar a gestão de informações comunicação interna e externa bem como o acesso a recursos educacionais A partir dessa definição delineamos requisitos funcionais e não funcionais que guiarão o desenvolvimento garantindo que a aplicação seja segura responsiva de fácil utilização e que atenda às necessidades específicas de alunos professores e funcionários do IMDAZ Além disso a criação de um diagrama de classes permitirá uma representação visual das principais funcionalidades da aplicação proporcionando uma visão clara do sistema O projeto está alinhado com os conceitos de Engenharia de Software e Programação Web adotando uma abordagem iterativa e incremental para o desenvolvimento assegurando que as melhores práticas sejam seguidas em todas as fases O objetivo é criar uma aplicação que não apenas atenda aos requisitos iniciais mas que também seja escalável e adaptável para futuras necessidades No âmbito educacional essa aplicação tem o potencial de transformar a experiência dos alunos tornando o aprendizado mais acessível e interativo Para os professores e funcionários oferece ferramentas poderosas para administrar informações de forma eficaz e facilitar a comunicação com a comunidade escolar Em última análise a conclusão deste projeto não representa apenas o desenvolvimento de uma aplicação web mas sim a contribuição significativa para a melhoria do IMDAZ e seu compromisso com a excelência educacional A aplicação a ser desenvolvida é uma ferramenta que pode moldar o futuro da instituição proporcionando uma base sólida para o crescimento inovação e eficácia contínua Com um enfoque claro requisitos bem definidos e uma estratégia de desenvolvimento sólida estamos prontos para transformar essa visão em realidade Relatório de Desenvolvimento de Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Nome do aluno INTRODUÇÃO A presente documentação tem como propósito a elaboração de um projeto para o desenvolvimento de uma aplicação web empregando os conceitos fundamentais de Engenharia de Software e Programação Web O projeto será desenvolvido em conformidade com os requisitos estabelecidos pelo Instituto de Menores Dom Antônio Zattera IMDAZ e servirá como uma ferramenta vital para otimizar a gestão de informações a comunicação interna e externa bem como o acesso a recursos educacionais para os alunos da instituição OBJETIVOS Realizar um levantamento detalhado de requisitos para a criação de uma aplicação web que atenda às necessidades específicas do Instituto de Menores Dom Antônio Zattera IMDAZ Desenvolver um diagrama de classes que representam as principais funcionalidades da aplicação e suas interações proporcionando uma visão clara do sistema Aplicar os conhecimentos teóricos adquiridos nas disciplinas de Ferramentas de Desenvolvimento Web e Engenharia de Software para transformar conceitos em prática garantindo uma abordagem eficaz para o desenvolvimento da aplicação Utilizar a metodologia de desenvolvimento iterativo e incremental assegurando que o projeto evolua de forma organizada e atenda às necessidades em constante mudança do IMDAZ Fornecer uma plataforma segura de fácil utilização e responsiva que permita a autenticação e autorização de diferentes tipos de usuários incluindo alunos professores e funcionários Facilitar a gestão de alunos permitindo o cadastro atualização e visualização de informações relacionadas aos alunos atendidos pela instituição Implementar recursos de comunicação interna como mensagens anúncios e calendários de eventos para melhorar a colaboração entre os membros da comunidade do IMDAZ Disponibilizar recursos educacionais como materiais didáticos videoaulas e exercícios de forma acessível aos alunos promovendo o aprendizado Permitir o acompanhamento do progresso dos alunos incluindo a atribuição de tarefas o registro de notas e o monitoramento do desempenho acadêmico Oferecer relatórios e estatísticas que auxiliem na avaliação do desempenho da instituição e dos alunos permitindo tomadas de decisão informadas DEFINIÇÃO DO ENFOQUE DA APLICAÇÃO WEB A definição do enfoque da aplicação web é um passo fundamental no processo de desenvolvimento pois estabelece a direção e o propósito do projeto Nesse contexto a aplicação web a ser criada tem como foco principal atender às demandas e requisitos específicos do Instituto de Menores Dom Antônio Zattera IMDAZ O enfoque central desta aplicação é proporcionar uma plataforma online abrangente destinada a melhorar a gestão de informações facilitar a comunicação interna e externa e disponibilizar recursos educacionais para os alunos que fazem parte da comunidade do IMDAZ A escolha desse enfoque é motivada pela necessidade de modernizar e otimizar os processos no IMDAZ tornandoos mais eficientes e acessíveis por meio de uma solução tecnológica Ao adotar uma abordagem orientada para a web o IMDAZ busca melhorar a experiência dos alunos professores e funcionários promovendo uma comunicação mais eficaz acesso fácil a recursos educacionais e um ambiente virtual de aprendizado e administração mais eficiente Portanto a aplicação web será concebida como um centro de informações e interação onde alunos poderão acessar materiais de estudo entregar tarefas acompanhar seu progresso acadêmico e interagir com colegas e professores Por outro lado professores e funcionários terão a capacidade de gerenciar informações dos alunos comunicarse com a comunidade escolar e administrar os processos internos da instituição de maneira mais eficaz ANÁLISE DE REQUISITOS FUNCIONAIS E NÃO FUNCIONAIS Requisitos Funcionais Autenticação e Autorização A aplicação deve permitir que os usuários se autentiquem com diferentes níveis de acesso alunos professores funcionários e atribuições específicas Gestão de Alunos Os professores e funcionários devem ser capazes de cadastrar atualizar e visualizar informações dos alunos atendidos pelo IMDAZ Comunicação Interna A aplicação deve suportar a comunicação interna entre professores funcionários e alunos incluindo mensagens anúncios e calendários de eventos Recursos Educacionais Deve haver uma seção para disponibilização de recursos educacionais como materiais didáticos videoaulas e exercícios Acompanhamento de Progresso A aplicação deve permitir que os professores acompanhem o progresso dos alunos incluindo notas e desempenho acadêmico Gestão de Tarefas Os professores podem atribuir tarefas e atividades aos alunos e os alunos devem poder entregálas online Relatórios e Estatísticas A aplicação deve fornecer relatórios e estatísticas para avaliar o desempenho da instituição e dos alunos Requisitos Não Funcionais Segurança A aplicação deve garantir a segurança dos dados dos alunos e a integridade das informações Usabilidade A interface da aplicação deve ser intuitiva e de fácil utilização para usuários de diferentes níveis de habilidade Performance A aplicação deve ser responsiva e de rápido carregamento Disponibilidade A aplicação deve estar disponível 247 para que os usuários acessem as informações quando necessário Compatibilidade Deve ser compatível com os principais navegadores web para garantir o acesso a um público amplo Manutenibilidade O códigofonte deve ser bem documentado e modular para facilitar futuras atualizações e manutenções DIAGRAMA DE CLASSES A seguir apresentamos um diagrama de classes simplificado para demonstrar o funcionamento das principais funcionalidades da aplicação Figura 1 Diagrama de Classes Fonte Autoria Própria 2023 Explicação do Diagrama de Classes Usuário Representa todos os tipos de usuários da aplicação alunos professores funcionários Pessoa Superclasse de Usuário contendo informações básicas como nome email e senha Aluno Subclasse de Usuário contendo informações específicas dos alunos como matrícula e curso Professor Subclasse de Usuário contendo informações específicas dos professores como disciplinas ministradas Funcionário Subclasse de Usuário contendo informações específicas dos funcionários como cargo Mensagem Representa as mensagens enviadas entre os usuários Tarefa Representa as tarefas atribuídas pelos professores aos alunos Material Educacional Representa os recursos educacionais disponibilizados na aplicação CONSIDERAÇÕES FINAIS O desenvolvimento da aplicação web proposta para atender às demandas do Instituto de Menores Dom Antônio Zattera IMDAZ representa um compromisso com a modernização e eficiência dos processos educacionais e administrativos Ao longo deste projeto estabelecemos com clareza o enfoque da aplicação definindoo como uma plataforma centralizada para melhorar a gestão de informações comunicação interna e externa bem como o acesso a recursos educacionais A partir dessa definição delineamos requisitos funcionais e não funcionais que guiarão o desenvolvimento garantindo que a aplicação seja segura responsiva de fácil utilização e que atenda às necessidades específicas de alunos professores e funcionários do IMDAZ Além disso a criação de um diagrama de classes permitirá uma representação visual das principais funcionalidades da aplicação proporcionando uma visão clara do sistema O projeto está alinhado com os conceitos de Engenharia de Software e Programação Web adotando uma abordagem iterativa e incremental para o desenvolvimento assegurando que as melhores práticas sejam seguidas em todas as fases O objetivo é criar uma aplicação que não apenas atenda aos requisitos iniciais mas que também seja escalável e adaptável para futuras necessidades No âmbito educacional essa aplicação tem o potencial de transformar a experiência dos alunos tornando o aprendizado mais acessível e interativo Para os professores e funcionários oferece ferramentas poderosas para administrar informações de forma eficaz e facilitar a comunicação com a comunidade escolar Em última análise a conclusão deste projeto não representa apenas o desenvolvimento de uma aplicação web mas sim a contribuição significativa para a melhoria do IMDAZ e seu compromisso com a excelência educacional A aplicação a ser desenvolvida é uma ferramenta que pode moldar o futuro da instituição proporcionando uma base sólida para o crescimento inovação e eficácia contínua Com um enfoque claro requisitos bem definidos e uma estratégia de desenvolvimento sólida estamos prontos para transformar essa visão em realidade Desenvolvimento da Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Seu Nome INTRODUÇÃO Este relatório marca um ponto de controle no desenvolvimento da aplicação web para o IMDAZ abrangendo as atividades até agora incluindo cabeçalho conteúdo e rodapé Esta fase estática detalha a implementação dos elementoschave fornecendo uma base para futuras melhorias alinhadas com as necessidades do IMDAZ e seguindo princípios de engenharia de software e programação web OBJETIVOS Este relatório tem como objetivo fornecer uma visão geral das atividades práticas na fase estática do desenvolvimento de uma aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Isso inclui o registro das etapas concluídas apresentação das funcionalidades estáticas demonstração de códigosfonte relevantes garantia do cumprimento dos requisitos do projeto integrador IVA preparação para o desenvolvimento contínuo e conformidade com princípios de engenharia de software Além disso buscase a prontidão para a apresentação do projeto destacando as etapas realizadas e as funcionalidades implementadas até o momento CABEÇALHO DO WEBSITE O cabeçalho do website é a primeira impressão que os usuários têm da aplicação Nossa aplicação inclui Uma barra com o nome da instituição garantindo uma identidade visual clara Uma barra de menu contendo itens essenciais como Início Sobre Serviços oferecidos Páginas relacionadas e Contato para facilitar a navegação Um campo para pesquisa de informações no site tornando mais fácil encontrar conteúdo relevante A inserção de um slider show com três abas utilizando o plugin Slick Slider para destacar informações e imagens relevantes CABEÇALHO DO WEBSITE Figura 1 Cabeçalho do website Instituto de Menores Dom Antônio Zattera IMDAZ Início Sobre Serviços oferecidos Páginas relacionadas Contato Fonte Autoria Própria 2023 BLOCOS DE CONTEÚDO DO WEBSITE Os blocos de conteúdo são componentes fundamentais para apresentar informações de forma organizada e acessível Criamos blocos de conteúdo que ajudam a estruturar e apresentar informações de maneira eficaz contribuindo para a experiência do usuário BLOCOS DE CONTEÚDO DO WEBSITE Figura 2 Blocos de conteúdo do website Fonte Autoria Própria 2023 RODAPÉ DO WEBSITE O rodapé é a parte final do site mas não menos importante Ele oferece informações adicionais e recursos para os visitantes Nosso rodapé inclui Itens como Publicações mais populares Tags Um pouco sobre nós e Contato para facilitar o acesso a informações relevantes Uma barra de informação dos direitos autorais com links para acesso às redes sociais fortalecendo a presença online do IMDAZ RODAPÉ DO WEBSITE Figura 3 Rodapé do website Publicações mais populares Tags Um pouco sobre nós Contato Materiais Crescimento da Educação Dados sobre Educação Materiais Dicas Inspiração O Instituto de Menores Dom Antônio Zattera é uma instituição dedicada ao cuidado e educação de jovens em situação de vulnerabilidade situada em Pelotas Rio Grande do Sul Brasil Fundado em 1942 o instituto tem desempenhado um papel crucial na transformação de vidas por meio de programas de assistência e educação de qualidade Sua missão é proporcionar oportunidades e um ambiente seguro para o desenvolvimento desses jovens Endereço Av Domingos de Almeida 3150 Areal Pelotas RS 96085470 Email exemploemailcom 2023 Todos os direitos reservados Fonte Autoria Própria 2023 CONSIDERAÇÕES FINAIS Neste relatório destacamos o desenvolvimento da aplicação web para o IMDAZ aplicando conhecimentos de engenharia de software e programação web adquiridos em disciplinas relevantes Priorizamos requisitos funcionais e não funcionais assegurando segurança usabilidade e desempenho Essa experiência aprofundou nosso entendimento prático dessas áreas Implementamos com êxito elementos essenciais incluindo um cabeçalho claro navegação intuitiva pesquisa eficiente blocos de conteúdo organizados e um rodapé informativo e útil para os usuários LOAN OFFICE PH 9180019516 CEL HOME LOCATORS HomeLocators OKC Reverse Mortgage Locators Reverse mortgage is best for recent retirees and seniors who want to remain in their home stay independent and get a taxfree source of cash flow No credit checks no monthly mortgage payments required Property Taxes and Home Insurance must stay current Loan pay off after homeowners vacate the property or die NMLS 884467 Assured Reverse Mortgage Not affiliated with HUD License MLD002451 Licensed by the Oklahoma Department of Consumer Credit Use good judgment and ask questions Call or text Metta today Questions or to get qualified NMLS 177393 Metta AU License 20148 MO License 3927 License by the Oklahoma Department of Consumer Credit Licensed by the Mississippi Department of Banking and Consumer Finance Good Faith Estimate will be prepared on request No cancellations after five 5 days from date of application unless the property does not appraise or borrower does not qualify Licensed in Michigan Mississippi Oklahoma Texas BENEFITS FOR THE HOMEOWNER LOWER MORTGAGE PAYMENT TAX SAVINGS IMPROVED CASH FLOW USE EQUITY EXTRA MONEY FOR BILLS HOME RENOVATIONS OR OTHER PURPOSES NO RESTRICTIONS ON HOW TO USE THE MONEY GETTING TO PLAY CHAMPION FOR YOUR LIFE HOW IT WORKS EXAMPLES Lets say the value of your home is 200000 You owe 100000 on your mortgage Reverse Mortgage could pay you 100000 TAXFREE in a lump sum or 3000month every month Relatório de Desenvolvimento da Aplicação Web para o Instituto de Menores Dom Antônio Zattera IMDAZ Parte 2 Desenvolvimento Estático Nome do aluno INTRODUÇÃO Este relatório marca um ponto de controle importante no processo de desenvolvimento da aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Ele abrange as atividades práticas realizadas até o momento fornecendo um resumo das etapas concluídas e uma visão geral dos elementoschave da aplicação Durante esta fase estática detalharemos a implementação dos principais elementos da aplicação como cabeçalho blocos de conteúdo e rodapé conforme requisitado no projeto integrador IVA Esses elementos desempenham um papel fundamental na usabilidade e na apresentação da aplicação aos usuários Vamos abordar a estrutura da aplicação os procedimentos realizados e fornecer uma visão geral dos códigosfonte associados a esses elementos É importante destacar que esta versão estática servirá como base para futuros desenvolvimentos e melhorias continuando a aplicação a se alinhar com as necessidades em evolução do IMDAZ e seus usuários seguindo os princípios da engenharia de software e programação web OBJETIVOS O objetivo deste relatório é fornecer uma visão geral das atividades práticas realizadas durante a fase estática do desenvolvimento da aplicação web para o Instituto de Menores Dom Antônio Zattera IMDAZ Ao criar este relatório temos os seguintes objetivos em mente Registro das Etapas Concluídas Documentar de forma clara e precisa as etapas do desenvolvimento da aplicação até o momento incluindo o design e a implementação dos elementoschave Apresentação das Funcionalidades Apresentar as funcionalidades estáticas da aplicação destacando elementos como o cabeçalho do site os blocos de conteúdo e o rodapé Demonstração de CódigosFonte Oferecer uma visão geral dos códigosfonte relevantes para os elementos implementados facilitando a compreensão das implementações técnicas Cumprimento dos Requisitos Certificarse de que a aplicação estática aborda os requisitos estabelecidos no contexto do projeto integrador IVA incluindo elementos como a barra de menu o campo de pesquisa e a integração do slider show Preparação para o Desenvolvimento Contínuo Estabelecer uma base sólida para o desenvolvimento contínuo da aplicação garantindo que as estruturas e funcionalidades existentes possam ser aprimoradas e expandidas conforme necessário Conformidade com Princípios de Engenharia de Software Assegurar que o desenvolvimento até o momento esteja alinhado com os princípios de engenharia de software incluindo boas práticas de codificação modularidade e documentação adequada Prontidão para Apresentação Preparar o material necessário para a apresentação do projeto integrador IVA destacando as etapas realizadas e as funcionalidades implementadas até o momento DESENVOLVIMENTO Cabeçalho do Website O cabeçalho do website é a primeira impressão que os usuários têm da aplicação Nossa aplicação inclui Uma barra com o nome da instituição garantindo uma identidade visual clara Uma barra de menu contendo itens essenciais como Início Sobre Serviços oferecidos Páginas relacionadas e Contato para facilitar a navegação Um campo para pesquisa de informações no site tornando mais fácil encontrar conteúdo relevante A inserção de um slider show com três abas utilizando o plugin Slick Slider para destacar informações e imagens relevantes Figura 1 Cabeçalho do website Fonte Autoria Própria 2023 Blocos de Conteúdo do Website Os blocos de conteúdo são componentes fundamentais para apresentar informações de forma organizada e acessível Criamos blocos de conteúdo que ajudam a estruturar e apresentar informações de maneira eficaz contribuindo para a experiência do usuário Figura 2 Blocos de conteúdo do website Fonte Autoria Própria 2023 Rodapé do Website O rodapé é a parte final do site mas não menos importante Ele oferece informações adicionais e recursos para os visitantes Nosso rodapé inclui Itens como Publicações mais populares Tags Um pouco sobre nós e Contato para facilitar o acesso a informações relevantes Uma barra de informação dos direitos autorais com links para acesso às redes sociais fortalecendo a presença online do IMDAZ Figura 3 Rodapé do website Fonte Autoria Própria 2023 Em anexo está inserido todo o código HTML e CSS necessário para a criação dessas 3 partes do desenvolvimento CONSIDERAÇÕES FINAIS Este relatório marca uma fase significativa no desenvolvimento da aplicação web destinada ao Instituto de Menores Dom Antônio Zattera IMDAZ Durante o processo de criação nossa equipe se empenhou em aplicar os conceitos de engenharia de software e programação web adquiridos ao longo das unidades de aprendizagem e das webconferências das disciplinas Ferramentas de Desenvolvimento Web e Engenharia de Software Também integramos a contextualização proporcionada pela disciplina do Projeto Integrador IVA tornandoa uma experiência prática valiosa Ao abordar os requisitos funcionais e não funcionais tivemos a oportunidade de identificar as necessidades específicas do IMDAZ e traduzilas em funcionalidades tangíveis Estabelecemos uma base sólida para a aplicação considerando aspectos críticos como segurança usabilidade performance e manutenibilidade Através deste processo adquirimos uma compreensão mais profunda de como a engenharia de software e a programação web se aplicam na prática No que diz respeito aos elementos essenciais da aplicação web conseguimos implementar com sucesso um cabeçalho que oferece identificação clara da aplicação navegação intuitiva e um mecanismo de pesquisa eficiente blocos de conteúdo que estruturam informações de maneira organizada e acessível e um rodapé que fornece informações adicionais e recursos úteis para os usuários ANEXO Código HTML html head form actionsearch methodget input typetext nameq placeholderPesquisar button typesubmitPesquisarbutton form link relstylesheet typetextcss hrefhttpscdnjsdelivrnetnpmslickcarousel181slickslickcs s link relstylesheet typetextcss hrefhttpscdnjsdelivrnetnpmslickcarousel181slickslickth emecss script typetextjavascript srchttpscodejquerycomjquery360minjsscript script typetextjavascript srchttpscdnjsdelivrnetnpmslickcarousel181slickslickmin jsscript div classslider divimg srchttpsscontentfgyn181fnafbcdnnetvt393080862138853684 1775485889777978685593195158581384njpgnccat110ccb17ncsid 52f669ncohcWxcUQDwzLlsAX7MP2Inchtscontentfgyn181fnaoh00 AfDyxlxSyK2k8xUGRWTFmD9vAtQR7dzrbfbPMt6LRwv7NAoe64F9825E altImagem 1div divimg srchttpsucpeledubrlaravelpublicstoragenoticiasOld37927062 014162118jpg altImagem 2div div script typetextjavascript documentreadyfunction sliderslick autoplay true autoplaySpeed 2000 dots true arrows false script titleTitletitle link relshortcut icon hrefFavicon link relalternate typeapplicationrssxml hrefRSS blockDescription meta namedescription contentMetaDescription blockDescription meta namecolorText content000000 meta namecolorLink content515151 meta namefontText contentFutura meta nameselectText Size content12 titleNormal meta nameselectText Size content10 titleSmall meta nameselectText Size content16 titleBig meta nameifShow Photo Caption content1 meta nameifShow Photo Border content1 meta nameifInfinite Scroll content1 meta nameifShow RSS content0 meta nameifShow Archive content0 meta nameifShow Theme Link content0 meta nametextTwitter Username content meta nametextInstagarm Username content meta nametextFacebook URL content meta nametextCustom Link One URL content meta nametextCustom Link One Title content meta nametextCustom Link Two URL content meta nametextCustom Link Two Title content meta nametextCustom Link Three URL content meta nametextCustom Link Three Title content HEDER VARIABLES LONDON meta nameimageCover content meta namecolorFont Header contentFFFFFF meta namecolorCover Accent content213f52 meta namefontHeader contentFutura style body margin 0 padding 0 background FFFFFF backgroundimage urlimageBackground backgroundattachment fixed fontsize selectText Sizepx selectFont Size fontfamily fontText a color colorLink colorLink textdecoration none Header themebylutzpreuss position absolute textalign right zindex 43 width 300px right 10px lineheight 75px color rgba0 0 0 06 fontfamily fontHeader themebylutzpreuss a color rgba0 0 0 06 borderbottom 1px solid rgba0 0 0 02 header paddingtop 75px width 100 backgroundcolor FFFFFF position relative top 0px color colorFont Header fontfamily fontHeader header coverbackground paddingtop 200px paddingbottom 150px width 100 position relative zindex 1 display block header underphoto height 100 width 100 top 0px position absolute backgroundimage urlimageCover backgroundsize cover backgroundposition center center display block filter grayscale100 webkitfilter grayscale100 mozfilter grayscale100 msfilter grayscale100 ofilter grayscale100 filter black webkitfilter grayscale1 header overcolor height 100 width 100 top 0px position absolute backgroundcolor colorCover Accent display block opacity 06 header cover position relative zindex 2 textalign center header title fontsize 22px border 3px solid colorFont Header padding 5px paddingleft 10px paddingright 10px color colorFont Header textdecoration none header fancy width 300px height 2px backgroundcolor colorFont Header border none position relative margintop 30px header two margintop 10px important header description width 600px position relative left 50 marginleft 300px header links width 600px position relative left 50 marginleft 300px fontsize 16px margintop 10px header links link color colorFont Header textdecoration none marginleft 10px marginright 10px GENERAL infscrloading display none opacity 0 content width 700px height 100 margin 0 auto fontfamily fontText content a color 000 colorLink textdecoration none borderbottom 1px solid rgba100 100 100 02 description a color colorDescription colorLink textdecoration underline overlayer position fixed zindex 1 top 0px height 100 backgroundcolor FFF paddingleft 20px paddingright 20px left calc50 selectContent Size2 20px width selectContent Size GENERAL POST content post background FFF colorPost Background color colorText colorText width 100 wordwrap breakword overflow hidden position relative fontsize selectText Size selectFont Size padding 14px paddingbottom 50px margintop 60px marginbottom 60px content post text width 500px position relative left 50 marginleft 250px content post blockquote display block webkitmarginbefore 5px important webkitmarginafter 5px important webkitmarginstart 8px important webkitmarginend 8px important borderleft 3px solid rgb230 230 230 paddingleft 10px top 3px position relative content post a color colorLink colorLink textdecoration none borderbottom 1px solid rgba100 100 100 02 content post img height auto width auto position relative display block content post iframe img embed object video maxwidth 100 content post answerformcontainer minheight 140px position relative content post headline fontweight 300 textalign center borderbottom 3px solid rgba0 0 0 01 paddingbottom 10px fontsize 150 fontweight 400 width 500px position relative content post headline a color colorText colorText border none textdecoration none POST CONTROLS content post control width 134px height 30px position relative left 50 margintop 20px marginleft 67px borderradius 4px border 1px solid rgba100 100 100 02 content post control buttons width 134px height 20px top 10px right 5 opacity 04 content post control buttons perm position relative width 20px float left opacity 05 backgroundimage urlhttpstatictumblrcomhcjwxorcZdn75y57tumblrmsdalj1trt1s3zdk 4o1500png backgroundsize 20px height 23px opacity 05 paddingtop 7px opacity 05 paddingleft 10px paddingright 14px backgroundrepeat norepeat backgroundposition center center content post control buttons permhover opacity 1 content post control buttons like position relative width 20px height 23px paddingtop 7px float left opacity 05 paddingleft 14px paddingright 10px borderright 1px solid rgba0 0 0 03 content post control buttons likehover opacity 1 borderright 1px solid rgba100 100 100 02 content post control buttons reblog position relative width 20px float left right 0 height 23px opacity 05 paddingtop 7px opacity 05 paddingleft 14px paddingright 10px borderright 1px solid rgba0 0 0 03 content post control buttons rebloghover opacity 1 borderright 1px solid rgba50 50 50 02 content post control buttons reblog a border none POST TEXT content text width 500px position relative left 100px content text body width 500px position relative fontsize 16px lineheight 20px textalign justify POST PHOTO content photo background FFF blockIndexPage padding 14px blockIndexPage content photo img margin 0 auto content photo caption width 500px position relative left 100px fontsize 120 POST PANORAMA POST PHOTOSET content photoset image margintop 10px content photoset imagefirstchild margintop 0px POST QUOTE content quote quote fontsize 150 position relative content quote source textalign right position relative margintop 10px width 80 left 20 fontsize 80 POST LINK content link width 500px position relative left 100px content link box position absolute top 0px left 0 width calc90 3px paddingleft 5 paddingright 5 paddingtop 20px paddingbottom 20px backgroundcolor colorLink ColorLink Post color FFF textalign center fontsize 110 borderradius 4px content link visiblebox position relative top 0px left 0 width 100 paddingtop 25px paddingbottom 20px opacity 0 content link box link position relative color FFF zindex 2 fontweight 100 POST CHAT content chat fontsize 110 width 500px position relative left 100px content chat li liststyle none margintop 10px bordertop 3px solid rgba150 150 150 01 paddingtop 10px content chat lifirstchild border none margintop 0px content chat label fontweight bold important POST VIDEO video tumblrvideocontainer width 100 important POST AUDIO audio width 500px important overflow hidden position relative left 100px audio cover position absolute top 0px right 0px width 100 left 15px top 15px audio infos paddingtop 15px paddingbottom 15px backgroundcolor rgba0 0 0 1 color FFF width 484px left 15px height 28px wordwrap breakword lineheight 16px textalign center position relative audio coverhover infos backgroundcolor rgba0 0 0 1 audio caption margintop 46px audio player iframe height 40px width 500px spotifyaudioplayer height 90px maxheight 90px POST ANSWER content answer width 500px position relative left 100px content answer avatar position relative float left marginright 8px marginbottom 10px content answer asker fontsize 100 fontweight bold wordwrap breakword borderbottom 3px solid rgba150 150 150 01 content answer text margintop 10px content answer answer margintop 14px bordertop 3px solid rgba150 150 150 01 PERMALINK PAGE permalinkpage width 700px position relative left 50 marginleft 350px permalinkpage reblogs width 100 margintop 30px position relative height 40px color colorText Text color permalinkpage reblogs a color colorText important Text color textdecoration none borderbottom 3px solid rgb240 240 240 permalinkpage reblogs reblog width 100 height 40px position relative backgroundcolor FFF float left textalign center lineheight 40px permalinkpage reblogs source width 49 marginleft 2 height 40px position relative backgroundcolor FFF float left textalign center lineheight 40px permalinkpage notescontainer width 470px margintop 12px backgroundcolor FFF padding 15px position relative left 100px color colorText Text color permalinkpage notescontainer info position relative height 22px width 100 permalinkpage notescontainer info left textalign left width 470px left 0px top 0px fontsize 18px position absolute permalinkpage notescontainer info center textalign center width 470px left 0px top 5px fontsize 12px position absolute permalinkpage notescontainer info right textalign right width 470px right 0px top 0px fontsize 18px position absolute permalinkpage notescontainer caption width 100 position relative bordertop 2px solid colorText Text color borderbottom 2px solid colorText Text color fontsize 12px textalign justify margintop 20px paddingtop 8px paddingbottom 8px permalinkpage notescontainer caption a color colorText TextLink color textdecoration none borderbottom 3px solid rgb240 240 240 permalinkpage notescontainer source width 100 height 40px backgroundcolor colorText TextLink color lineheight 40px fontsize 18px color FFF textalign center margintop 12px permalinkpage notescontainer tags width 430px position relative display block paddingtop 8px paddingbottom 8px marginleft 0px liststyle none bordertop 3px solid rgba100 100 100 02 borderbottom 3px solid rgba100 100 100 02 permalinkpage notescontainer tags li clear none important display inlineblock height 15px margin 0 4px 0 0 overflow hidden width auto permalinkpage notescontainer tags li lable fontweight 400 permalinkpage notescontainer tags lifirstchild marginleft 3em permalinkpage notescontainer tags li a color colorText TextLink color textdecoration none border none permalinkpage notescontainer olnotes width 100 marginbottom 60px PERMALINK PAGE BOTTOM position relative display block marginleft 36px liststyle none permalinkpage notescontainer olnotes linote clear none important display inlineblock height 15px margin 0 4px 0 0 overflow hidden width 15px permalinkpage notescontainer olnotes a border none important permalinkpage notescontainer olnotes linote imgavatar width 15px height 15px border none important permalinkpage notescontainer olnotes linote spanaction display none permalinkpage notescontainer morenoteslinkcontainer clear both important display block important fontsize 10px height auto overflow visible position relative important textalign left important width 100 important textalign center important margintop 20px important olnotes linote answercontent display none olnotes linote blockquote display none olnotes linote blockquote a display none FOOTER navigation navigation marginbottom 50px nextpage width 100 margintop 50px height 60px backgroundcolor rgba255 255 255 09 bottom 0 fontsize 18px lineheight 60px textalign center position relative paddingleft 15px paddingright 15px nextpage a color rgba40 40 40 1 border none prepage width 100 margintop 20px paddingleft 15px paddingright 15px height 60px backgroundcolor rgba255 255 255 09 bottom 0 fontsize 18px lineheight 60px textalign center position relative prepage a color rgba40 40 40 1 border none CSS CustomCSS style head body script typetextjavascript if self top documentgetElementByIdbuttonstylebottom34px script div classheader div idcoverbackground div idunderphotodiv div idovercolordiv div idcover h1a href idtitleTitleah1 blockDescription hr idfancy div iddescriptionDescriptiondiv hr idfancy classtwo blockDescription div idlinks blockAskEnableda classlink hrefaskAskLabela blockAskEnabled blockHasPages blockPagesa classlink hrefURLLabelablockPagesblockHasPages blockifShowArchivea classlink hrefarchiveArchiveablockifShowArchive blockifShowRSSa classlink hrefRSSRSSablockifShowRSS blockIfCustomLinkOneTitlea classlink hrefTextCustom Link One URLTextCustom Link One TitleablockIfCustomLinkOneTitle blockIfCustomLinkTwoTitlea classlink hrefTextCustom Link Two URLTextCustom Link Two TitleablockIfCustomLinkTwoTitle blockIfCustomLinkThreeTitlea classlink hrefTextCustom Link Three URLTextCustom Link Three TitleablockIfCustomLinkThreeTitle blockifTwitterUsernamea classlink hrefhttptwittercomTextTwitter UsernameTwitterablockifTwitterUsername blockifInstagarmUsernamea classlink hrefhttpinstagramcomTextInstagarm UsernameInstagramablockifInstagarmUsername blockifFacebookURLa classlink hrefTextFacebook URLFacebookablockifFacebookURL blockifShowThemelinka classlink hrefhttpthemesthatyouliketumblrcomThemea blockifShowThemelink div div div div div idcontent blockPermalinkPagediv classpermalinkpageblockPermalinkPage blockPostsblockText article classpost text blockTitle h3 idheadlinea hrefPermalinkTitleah3 blockTitle div idbodyBodydiv article blockTextblockPhoto article classpost photo a hrefPermalink img srcPhotoURLHighRes altPhotoAlt a blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage article blockPhotoblockPanorama article classpost panorama LinkOpenTag img srcPhotoURLPanorama altPhotoAlt LinkCloseTagblockCaption div classcaptionCaptiondiv blockCaption article blockPanoramablockPhotoset article classpost photoset Photoset700 blockIndexPage blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage blockPermalinkPage Photoset500 blockPermalinkPage article blockPhotosetblockQuote article classpost quote div idquoteQuotediv blockSource div idsourceSourcediv blockSource article blockQuoteblockLink article classpost link a hrefURL idlink Target div idbox Name div a a hrefURL idlink Target div idvisiblebox Name div a blockDescription div classdescriptionDescriptiondiv blockDescription article blockLinkblockChat article classpost chat blockTitle h3 idheadlinea hrefPermalinkTitleah3 blockTitle blockLines li classAlt userUserNumber blockLabel span classlabelLabelspan blockLabelLine li blockLines article blockChatblockVideo article classpost video blockIndexPage centerVideo700center blockIndexPage blockIndexPage blockCaption div classcaptionCaptiondiv blockCaption blockIndexPage article blockVideoblockAudio article classpost audio div idnone styleopacity 0 blockAlbumArt img srcAlbumArtURL blockAlbumArt div styleblockAlbumArtmargintop 58pxblockAlbumArt idinfos blockArtist Artist blockArtist blockTrackName TrackName blockTrackName div div div idcover blockAlbumArt img srcAlbumArtURL blockAlbumArt div styleblockAlbumArtmargintop 58px backgroundcolor rgba0 0 0 03blockAlbumArt idinfos blockArtist Artist blockArtist blockTrackName br TrackName blockTrackName div div idplayer AudioPlayerBlack div div blockIndexPage blockCaption div styleblockAlbumArt margintop 64pxblockAlbumArt idcaptionCaptiondiv blockCaption blockIndexPage article blockAudioblockAnswer article classpost answer div classquestion img idavatar srcAskerPortraitURL48 span idaskerAsker askedspan div idtextQuestiondiv div div idanswerAnswerdiv article blockAnswer blockIndexPage div styleblockPhoto display none blockPhoto blockifShowPhotoCaption display block blockifShowPhotoCaption classcontrol div idbuttons div idlikeLikeButton size16 colorBlackdiv div idreblogReblogButton size16 colorBlackdiv a hrefPermalink titlePermalink Page classnotesdiv idpermdiva div div blockIndexPage article blockPermalinkPage blockDate blockRebloggedFrom div classreblogs div styleblockContentSourcewidth 49blockContentSource idreblogReblogged from a targetblank hrefReblogParentURLReblogParentNameadiv blockContentSource div idsourceSource a targetblank hrefSourceURLSourceTitleadiv blockContentSource div blockRebloggedFrom div classnotescontainer div idinfo div idleftDayOfMonthWithZeroMonthNumberWithZeroShortYeardiv div idcenterNoteCountWithLabeldiv div idrightTimeAgodiv div blockCaption div idcaption blockCaption Caption blockCaption div blockCaption blockHasTags ul idtags li span idlableTagsspan li blockTags li a hrefTagURLTaga li blockTags ul blockHasTags PostNotes div div blockDate blockPermalinkPage blockPosts div idnavigation blockNextPage div idnextpage a idnextpagelink hrefNextPageNext Page 187a div blockNextPage blockPreviousPage div idprepage a hrefPreviousPage171 Previous Pagea div blockPreviousPage div div footer div classfootercontent div classfootersection h3Publicações mais popularesh3 ul lia hrefMateriaisali lia hrefCrescimento da Educaçãoali lia hrefDados sobre Educaçãoali ul div div classfootersection h3Tagsh3 ul lia hrefMateriaisali lia hrefDicasali lia hrefInspiraçãoali ul div div classfootersection h3Um pouco sobre nósh3 pO Instituto de Menores Dom Antônio Zattera é uma instituição dedicada ao cuidado e educação de jovens em situação de vulnerabilidade situada em Pelotas Rio Grande do Sul Brasil Fundado em 1942 o instituto tem desempenhado um papel crucial na transformação de vidas por meio de programas de assistência e educação de qualidade Sua missão é proporcionar oportunidades e um ambiente seguro para o desenvolvimento desses jovens p div div classfootersection h3Contatoh3 pEndereço Av Domingos de Almeida 3150 Areal Pelotas RS 96085470p pEmail exemploemailcomp div div div classfooterbar pcopy 2023 Todos os direitos reservadosp div classsociallinks a hrefimg srchttpspngpngtreecomelementoursm20180515sm5afaf0c4b6017 jpg altFacebooka a hrefimg srchttpsstaticvecteezycomsystemresourcespreviews018930745 originaltwitterlogotwittericontransparentfreefreepngpng altTwittera a hrefimg srchttpsimgfreepikcomvetorespremiumiconedoinstagramdelog otipodedistintivomoderno578229124jpg altInstagrama div div footer body html Código CSS style footer backgroundcolor 333 color fff padding 20px 0 footercontent display flex justifycontent spacebetween flexwrap wrap footersection flex 1 margin 0 10px footersection h3 fontsize 18px marginbottom 10px footersection ul liststyle none padding 0 footersection ul li marginbottom 5px footerbar display flex justifycontent spacebetween alignitems center margintop 20px footerbar p fontsize 14px sociallinks a marginleft 10px sociallinks img width 20px height 20px style