Exercícios

Fundamentos da Programação Web Atividade Prática ATIVIDADE PRÁTICA 1 OBJETIVO Aplicar os conceitos estudados na disciplina 2 PROGRAMAS NECESSÁRIOS Para desenvolver esta atividade será necessário HTML CSS JavaScript é opcional utilizar JavaScript e se utilizar é livre Acesso a um provedor de hospedagem gratuito para publicar o seu site na internet Na aula prática 1 mostrei duas publicações no 000webhost e no GitHub Pages Um diagramador IDE VS Code por exemplo 3 ORIENTAÇÕES GERAIS Desenvolver um site totalmente funcional com no mínimo quatro links conforme orientações e publicálo num servidor de hospedagem gratuito Procure deixar o menu visível em todas as páginas evite o uso do VOLTAR do navegador Na aula prática 1 há orientações sobre publicações Exemplos Fundamentos da Programação Web Atividade Prática Ou O tema do site Portfólio pessoal CV online Requisitos Um link Sobre mim que fale sobre você hobbies etc Um link sobre sua formação educacional idiomas Fundamentos da Programação Web Atividade Prática As páginas solicitadas deverão ter informações em forma de texto Páginas com Lorem Ipsum terão descontos na nota Um link com seu portfólio Pode colocar links para outros sites que você tenha feito ou com trabalhos que você tenha desenvolvido no curso em outras disciplinas No decorrer da disciplina foram colocados exemplos de sites você pode refazer esses exemplos e utilizar como portfólio Link para contato fazer a parte visual do formulário utilizar inputs nome email mensagem Exemplo Utilizar CSS não pode utilizar bootstrap ou similares Explicar seu código através de comentários sem exageros Não poderá utilizar Wix WordPress e frameworks desse tipo Deve ser desenvolvido com linguagem pura somente HTML e CSS Ao criar o seu usuário no servidor de hospedagem gratuito utilize seu nome como parte do domínio CUIDADO Em programação não existem dois códigos exatamente iguais Cada programador organiza seu código de uma forma diferente declara variáveis com nomes diferentes faz comentários diferentes gera mensagens aos Fundamentos da Programação Web Atividade Prática usuários distintas etc Por este motivo e como a atividade é INDIVIDUAL não serão aceitas páginas idênticas entre alunos ou iguais à Internet Caso o corretor observe respostas iguais elas serão consideradas como PLÁGIO e será atribuída a NOTA ZERO na questão 4 Entrega da atividade Postar os códigos no modelo de documento fornecido Identificar o nome do arquivo e copiar e colar utilizando o botão direito do mouse para cada uma das páginas que você desenvolveu por exemplo Nome do arquivo indexhtml Abaixo copiar e colar códigos que você desenvolveu Nome do arquivo estilocss Abaixo copiar e colar códigos que você desenvolveu Fazer isso para cada arquivo que você criou Não esquecer de colocar o endereço de onde publicou o seu portfólio A entrega do arquivo pode ser docx ou pdf 5 Critérios de Avaliação Para que você obtenha a nota máxima na atividade precisará cumprir todos os requisitos básicos explicados nas ORIENTAÇÕES GERAIS Deverá ser entregue no link Trabalhos o endereço do seu site publicado na internet Dicas Fundamentos da Programação Web Atividade Prática Capriche na diagramação vai ser avaliado se está agradável visualmente Colocar conteúdo principalmente nos itens sobre você formação acadêmica e até experiência profissional se você tiver Utilize o doctype html5 Não utilize bootstrap ou similares Páginas Atendeu Totalmente Valor 25 pontos cada página Atendeu parcialmente Valor de 1 a 24 pontos cada página Não atendeu Valor 0 pontos cada página Nota de cada página Sobre mim Atendeu todos os requisitos solicitados seguiu as orientações do enunciado o código possui comentários e está funcionando corretamente os links estão funcionando corretamente usou sua criatividade fez uma boa diagramação colocou conteúdo Entregou a parte escrita e publicou na internet o site www Atendeu parcialmente os requisitos solicitados indicados na primeira coluna a nota pode variar de 1 a 24 pontos por página Se o link não abrir haverá desconto da nota sem conteúdo haverá desconto de nota Não atendeu os requisitos solicitados ou não apresentou a página solicitada Formação Portfólio Contato Apresentou código igual ao de outro colega ou copiado da internet terá nota zero Fundamentos da Programação Web Atividade Prática Apresentou somente o link para abrir o trabalho sem enviar o código solicitado será descontado 50 da nota Apresentou somente o código sem o link com as páginas hospedadas desconto de 50 sobre a nota total Não colocou conteúdo desconto de 50 da nota Total da Nota CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER ESCOLA SUPERIOR POLITÉCNICA CURSO FERRAMENTAS DA PROGRAMAÇÃO WEB ATIVIDADE PRÁTICA NOME RU CIDADEESTADO 2023 1 Estrutura de pastas do projeto 2 COLOCAR NOME DOS ARQUIVOS COPIAR CÓDIGO indexhtml DOCTYPE html html head meta charsetUTF8 titleMinha Páginatitle link relstylesheet typetextcss hrefestilocss link relstylesheet hrefhttpsfontsgoogleapiscomcss familyNunito400displayswap head body header h1Ricardo Adolfo Mourah1 1 nav ul lia hrefsobreSobre Mimali lia hrefformacaoFormaçãoali lia hrefportfolioPortfólioali lia hrefcontatoContatoali ul nav header section idsobre classpastelbackground h2Sobre Mimh2 div classcolumnas pOlá seja bem vindo p pMeu nome é Ricardo Adolfo Moura e sou um programador Frontend com habilidades em HTML CSS e JavaScript Atualmente estou em transição de carreira na área de Programador CNC para o desenvolvimento web Minha jornada no desenvolvimento de software tem sido emocionante marcada por descobertas e crescimento constante Estou comprometido em manter essa chama acesa sempre ansioso para explorar o desconhecido e criar um impacto significativo no mundo do desenvolvimento de software p p stylefontstyle italicTenho experiência em contribuir para projetos garantindo o alinhamento com as últimas tendências e ferramentas do setor p div section section idformacao classpastelbackground h2Formaçãoh2 ul liEstudante de Análise e Desenvolvimento de Sistemas no UNINTER Centro Universitário Internacional 2023 2026li liEstudante de Programação de Computadores no Dev Club uma instituição de formação de estudantes profissionais2023 2024li ul section section idportfolio classpastelbackground h2Portfólioh2 div classproject h4Projeto 1 Mário Brosh4 p Este projeto envolve um projeto de aprendizado do Mário Bros que aprendi a fazer no Dev Club com muita tentativas e falhas onde é feito uma página com responsividade para se adaptar a uma página de celular p div classprojectimages div classgridcontainer div classgriditemimg srcmariopngdiv div classgriditemimg srcmario1pngdiv div classgriditem1img srcmario2pngdiv div div div div classproject h4Projeto 2 Responsivo mobileh4 p Projeto em que desenvolvi de acordo com as aulas do DevClub onde é feito uma página responsiva para se adaptar a uma página de celular p div classprojectimages div classgridcontainer1 div classgriditemimg srcsitepngdiv div classgriditem2img srcsite1pngdiv div div div section div idscrolltotop a hreftopa div section idcontato classpastelbackground h2Contatoh2 p stylefontstyle italictextalign centerDuvidas ou sugestões entre em contato preenchendo o formulário abaixop form onsubmitalertMensagem enviada com sucesso label fornameNomelabel input typetext idname namename required label foremailEmaillabel input typeemail idemail nameemail required label formessageMensagemlabel textarea idmessage namemessage requiredtextarea button typesubmitEnviarbutton form div classfloatingbutton a hreftop xml version10 svg height42 viewBox0 0 1792 1792 width42 xmlnshttpwwww3org2000svg path dM1412 895q0271845l3623629191q18184518t45 18l91 91362 362q18 1818 45t18 45l91 91q18 18 45 18t4518l189189v502q0 26 19 45t45 19h128q26 0 4519t1945v502l189 189q19 19 45 19t4519l9191q1818 1845zm252 1q0 209103 3855t2795 27953855 103385510327952795 1033855 1033855 27952795 3855103 3855 103 2795 2795 103 3855z svg a div section body html estilocss body fontfamily Nunito Arial sansserif margin 0 padding 0 header backgroundcolor 333 color fff textalign center padding 20px 0 nav ul liststyle none nav ul li display inline margin 0 20px li padding 10px ul marginleft 50px nav a textdecoration none color fff fontweight bold pastelbackground backgroundcolor f3f3f3 padding 20px sobre backgroundcolor f7d9aa padding 70px formacao backgroundcolor b7e1cd portfolio backgroundcolor 87CEFA contato backgroundcolor f5c3cc columnas columncount 2 columngap 30px ul liststyletype disc color 000 fontfamily Nunito Arial sansserif fontsize 16px h2 h4 textalign center formacao p padding 30px textalign center project marginbottom 20px padding 70px border 1px solid 666666 borderradius 5px project h2 fontsize 15rem project p fontsize 1rem margin 10px 0 gridcontainer display grid gridtemplatecolumns repeat3 1fr gridgap 30px gridcontainer1 display grid gridtemplatecolumns repeat2 1fr gridgap 30px projectimages margintop 35px griditem img width 100 height 100 objectfitcontain griditem1 img width 80 height 90 objectfit contain paddingleft 20px griditem2 img width 50 height 100 objectfitfill display flex paddingleft 130px container width 600px container img width 600px margin 30px display flex alignitems center justifycontent end pre borderradius 5px padding 10px margintop 20px display flex alignitems center justifycontent end code fontfamily Courier New Courier monospace width 800px contact backgroundcolor f2f2f2 padding 20px form maxwidth 500px margin auto label display block marginbottom 10px inputtypetext inputtypeemail textarea width 100 padding 12px border 1px solid ccc borderradius 4px boxsizing borderbox buttontypesubmit backgroundcolor 4c98af color white padding 12px 20px border none borderradius 4px cursor pointer floatingbutton position fixed bottom 20px right 20px color white padding 16px border none borderradius 50 fontsize 24px cursor pointer 3 COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO index Portfólio Projeto 1 Mário Bros Este projeto envolve um projeto de aprendizado do Mário Bros que aprendi a fazer no Dev Club com muita tentativas e falhas onde é feito uma página com responsividade para se adaptar a uma página de celular Projeto 2 Responsivo mobile Projeto em que desenvolvi de acordo com as aulas do DevClub onde é feito uma página responsiva para se adaptar a uma pagina de celular Contato Dúvidas ou sugestões entre em contato preenchendo o formulário abaixo Nome Email Mensagem Enviar 4 Colocar endereço onde publicou o site httpsricadolfogithubiositegithubio CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER ESCOLA SUPERIOR POLITÉCNICA CURSO FERRAMENTAS DA PROGRAMAÇÃO WEB ATIVIDADE PRÁTICA NOME RU CIDADEESTADO 2023 1 Estrutura de pastas do projeto Aqui pode colocar imagem do Explorer ou VSCode Exemplo COLOCAR IMAGEM 2 COLOCAR NOME DOS ARQUIVOS COPIAR CÓDIGO Exemplo Nome do arquivo indexhtml Abaixo copiarcolar código Nome do arquivo estilo Css Abaixo copiarcolar código Fazer isso para cada uma das páginas que você criou 3 COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO index Aqui pode abrir seu site na internet e dar um print na tela indexhtml 1 4 Colocar endereço onde publicou o site Teste o link antes de colocar o endereço aqui Exemplo httpsmargakla000webhostappcom Não temos recuperação em trabalhos Se o link não abrir perde 50 da nota Escolher o domínio do site gratuito no 000webhost O domínio gratuito é composto do nome que você escolher mais uma parte do nome do site do 000webhost conforme o exemplo abaixo httpsmargakla000webhostappcom Ao fazer o cadastro é a primeira tela que abre solicitando o nome que você escolhe para parte do domínio Recomendo utilizar a mesma senha que fez para o cadastro A próxima tela será Depois de criar o seu cadastro e ativar ele abrirá essa tela 1 2 3 Na próxima tela talvez abra uma tela para você digitar o nome do usuário que você criou e a senha a mesma que você utiliza para entrar no 000Webhost 4 5 Clicar em Up Load 6 7 Na próxima tela que abrir selecione os arquivos que deseja enviar para o servidor 8 Não esqueça um dos arquivos tem que ter o nome de indexhtml para o site abrir