Revista: Atlante. Cuadernos de Educación y Desarrollo
ISSN: 1989-4155

---

DESENVOLVIMENTO DE WEBSITE PARA APRESENTAÇÃO PROFISSIONAL E DIVULGAÇÃO DE PROJETOS PEDAGOGICOS

---

Introdução

Um website1 é um dos instrumentos de publicidade mais eficientes que existe e serve de apoio a outros meios de comunicação como rádios, televisão, jornal, etc. E podem constituir um empreendimento completo ou parcial prestando serviço, vendendo produtos ou simplesmente informando.
De forma geral um website é o trabalho de um único indivíduo, empresa ou organização, ou é dedicado a um tópico ou propósito em particular. Nos dias de hoje um website é uma necessidade até mesmo para profissionais como: (Cantores, Chefes, Professores e etc.). A importância disto está na sua apresentação e na profissionalização de seus serviços ou produtos na internet, estreitando o relacioidnto com seus clientes.
De acordo com o CETIC.br (Centro de Estudos Sobre as Tecnologias da Informação e da Comunicação no Brasil), foi realizada uma pesquisa com 6.400 empresas brasileiras e quase metade das pequenas empresas ainda não tem um website, reduzindo sua participação no mercado, por ainda não conhecerem o grande potencial da internet para seus negócios ou serviços.
Portanto, buscou-se reunir dados/informações com o propósito de responder ao seguinte problema de pesquisa: Por que você precisa de um website? Qual o seu objetivo?
O objetivo do website visa apresentar o currículo profissional e projetos pedagógicos desenvolvidos pela docente.  Com intuito de mostrar a dinâmica em sala de aula e a facilidade do uso da internet para o aprendizado de Jovens e Adultos.
Neste contexto, a proposta de trabalho cientifica visa apresentar ferramentas especifica como programador em linguagem de programação PHP2 , banco de dados MYSQL3 e Servidor Apache4 .
Essa é uma das estratégias para atribuir sua apresentação e seus serviços voltados ao mercado de trabalho educacional.

• Metodologia

As metodologias de desenvolvimento de software servem para não tornar a tarefa, um verdadeiro caos. O problema é que, dependendo do projeto, podem deixar os desenvolvedores amarrados a requisitos desatualizados, que não correspondem às reais necessidades do cliente. (Caetano, 2009).
As metodologias estudadas foram:

• Espiral: uma vez finalizada o desenvolvimento, volta-se para o início para que novas funcionalidades fossem agregadas ao projeto.
• Processo Unificado: as fases não são finalizadas antes do início da próxima fase. As fases eram sobrepostas uma as outras, permitindo que as alterações ocorressem durante o projeto.
• Cascata: as fases possuem uma tendência seqüencial, entre uma fase e a seguinte, podendo haver uma retroalimentação de uma fase para a fase anterior.(Uchôa, s.d.)
• Linear onde as etapas são executadas numa ordem pré-definida, sem revisões tem uma visão racionalista e propõe um processo unidirecional de resolução de problemas. (Couto & Jardim, 2010).

Para o desenvolvimento deste projeto utilizarei a metodologia linear, onde em meados de 2011 John Furness melhorou a metodologia, indicando os tópicos principais nela descritos para o desenvolvimento de um website, uma vez que no decorrer das etapas os processos de criação se interagem, podendo ser redefinidos os detalhes do projeto inicial.No ANEXO A, mostra o um infográfico completo para entender e mostra as principais fases e foram divididas por cores, tamanho e círculos, que tem a função do envolvimento e importância para criação do website.(Mendes, 2013).
O encontro inicial foi com o docente, no qual foram analisadas as necessidades e discutimos as possíveis soluções e viabilidades. Esse momentofoi fundamental para definir o propósitodo projeto. Ainda na primeira semana, foi realizado um estudo onde são levantadas as informações pertinentes ao site. O que a docente está buscando e oferecendo com um diferencial profissional. Feito isso, apresentamos um plano de comunicação para a avaliação do docente e posterior feedback com ajustes. É o escopo do site.
A partir da segunda semana inicia-se o mapa do site.  Nele está contida a representação hierárquica da estrutura do site, composta por páginas Web. O passo seguinte é o escopo do Wireframe5 , que nada, mas é um guia visual básico para sugerir a estrutura do site e a relação entre as páginas nele contidas. Nesta etapa do processo contamos com a participação ativa dadocente para nos passar um feedback sobre o que foi apresentando.
Já na terceira semana é iniciada a produção do escopo, onde será preenchida com o conteúdo do site. O conteúdo é um dos pilares para originar bons resultados em número de visitas. Identificar quais conteúdos devem ser produzidos, e em que periodicidade, é um trabalho complexo e deve ser feito sem erros.
Na quarta semana começa a ser desenvolvida a página inicial. Aqui iniciamos o processo que dará a “cara para o website”. O docente avalia o resultado inicial e faz as correções finais.
A próxima etapa acontece na quinta semana de desenvolvimento, em que será realizada a arte das páginas internas, passando pelo mesmo processo empregado na arte da página inicial.
Na sexta semana entraremos no processo de codificação e validação, que consiste na geração do código fonte, para que o sistema execute o que está sendo pedido. Já a validação é um conjunto de testes realizados com várias ferramentas que asseguram o bom funcioidnto do site, navegabilidade, acessibilidade e funcionalidade. A homologação confere integridade ao sistema, garantindo que ele esteja em pleno funcioidnto, livre de erros e em ambiente seguro.
A sétima semana é a fase de conclusão do site, em que será feito o preenchimento do conteúdo que foi produzido anteriormente e, em paralelo, serão realizados os testes de plataformas e navegadores para assegurar que todo o conteúdo seja exibido corretamente e que todas as ferramentas cumpram com a funcionalidade proposta. Nesta fase o docente realiza a avaliação final.
Na oitava e última semana, é a etapa de finalização do Website que a esta altura, estará prestes a “nascer”. Nesta etapa, é realizado os ajustes finais e possíveis correções necessárias para realizar o lançamento do site na Web e efetivar o cadastro nos mecanismos de busca. A partir daí o serviço poderá ser encontrada pelo público.
A execução de todas as etapas descritas acima acontece juntamente com o cliente, pois a soma de todo o esforço envolvido em conjunto durante o processo de criação do Website, resulta na garantia de uma boa parceria de sucesso e permite alcançar o principal objetivo, que é o de superar as expectativas.(ETAPAS, ENVOLVIMENTO E CRONOGRAMA - WEBSITE PROJETADO, s.d.)

• Ferramentas

Este projeto utilizara a plataforma WordPress com auxílio do Xampp.
Xampp é uma ferramenta bastante utilizada para quem desenvolve um sistema em website, nele está reunido os principais servidores Open Source 6, como Banco de Dados (MySql)6acima da versão 5.0, Transferência de Arquivos (FTP)7 , Apache7 (Web)4, com suporte à linguagem PHP5 eoutros.
Com ele, é possível rodar o sistema WordPess localmente, o que simplifica e torna o desenvolvimento muito mais rápido.Porque ele permite configurar corretamente estes programas, sem ter que se preocupar com os pormenores de cada um.
Não é necessário instalar o Xampp, basta apenas extrair seus arquivos em uma pasta raiz, depois a partir do endereço IP 127.0.0.1/wordpress que é servidor Apache tem o acesso para a Web. Os códigos ficarão armazenados na pasta HTDOCS no diretório Xampp. (HIGA, 2012).
A opção por essa ferramenta simplifica o a programação em PHP, pois evita o processo de instalações individuais como, por exemplo: em um sistema web, temos que instalar em uma máquina local (Localhost) servidores como: Transferência de arquivos (FTP)10, Web (Apache)7, Banco de Dados (MySql)6 e configurá-lo corretamente, o que não facilita em nada. No caso o Xampp mesmo se configura e possibilita a criação de Websites sem muita dificuldade. Com PhpMyAdmin8 , podemos manipular o banco de dados sem maiores dificuldades, pois é uma interface que possibilita a criação de tabelas sem a necessidade de inserir códigos. (Alvarez, 2007).

• PHP5é uma linguagem utilizada para criar websites dinâmicos, que possibilitam a interação com o usuário por meio de formulários, parâmetros da URL e links. O PHP é executado no servidor, o cliente tem acesso apenas ao HTML e pode interagir com o banco de dados. (Barreto, 2015).
• MySQL6 é um Sistema Gerenciador de Banco de Dados (SGBD). É um Banco de Dados relacional que armazena os

dados separadamente em vez de um lugar só e em uma única tabela. Um Banco de Dados é qualquer sistema que reúne e organiza informações em ordem determinadas.Segundo (Pisa, 2012):
“O Banco de Dados implantados em computadores dividem-se em parte física (equipamento de hardware para possibilitar o armazeidnto, processamento e acesso dos dados) e parte lógica que diz respeito ao software de gerenciamento do Banco de Dados, na parte lógica do sistema o banco de dados se conceitua em três níveis são:
Conceitual que identifica os dados que serão armazenados (Analise de requisitos).
Lógico que representa como aos dados serão armazenados seguindo uma metodologia.
Físico é a representação da parte tangível como projeto, interfaces, programas, é o nível mais baixo que descreve o modo que os dados serão armazenados “(Pisa, 2012)..

• Apache7 é um dos principais servidores HTTP9 que utiliza um módulo chamado mod_ssl, que utiliza o protocolo HTTPS12 que criptografa todos os dados entre servidor e cliente.É um servidor multiplataforma que pode ser usado na maioria dos sistemas operacionais. Esse servidor recebe as solicitações do navegador e responde em HTML10 , não respondendo aos códigos.php por isso é necessário um interpretador PHP5, sem ele não é possível dinamizar a página com o envio ou recebimento via correio eletrônico, animações e manipulação no Banco de Dados. (Moura, 2011).

WORDPRESS é um Sistema de Gerenciamento de Conteúdo (CMS)11 que utiliza a linguagem web PHP5, esse CMS14 tem como sua grande vantagem o fato que a implementação de recursos já estar pronta em forma de plug-ins, diminuindo em muito o tempo de programação.(Wordpress Brasil, s.d.)
“O WordPress é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos Padrões Web e na usabilidade. Ao mesmo tempo é um software livre, gratuito e feito por você. Em outras palavras, o WordPress é o que você usa quando quer trabalhar e não lutar com seu software de publicação de conteúdo, sendo hoje a maior plataforma de Gerenciamento de Conteúdo do mundo, com quase 70% do mercado.” (WORDPRESS.ORG., 2016).

• O Projeto

Iniciarei esboçando uma possível solução com algoritmos, seja qual for a linguagem utilizada devemos sempre traçar um esquema para aplicarmos a lógica no programa e diminuir os possíveis erros.
“O Sitemap ou Mapa do Site é a representação das páginas que irão compor o website, pois é a partir dele que é definida a navegação.(Almeida, 2011)
No APÊNDICE A, indica que todas as páginas do projeto dão acesso a todas, ou seja, é um site com navegação totalmente livre.
O website apresentará a “Página Inicial” onde conterá um breve histórico acadêmico e uma imagem da docente.
Acessando o menu “Currículo” será exibida as aulas e especificações realizados pela docente.
Clicando o menu “Sobre” conterá uma breve explicação da docente explicando o porquê da criação do site.
Passando para o menu “Contato”, terá espaço para reclamações, sugestões e elogios.
No menu “Projetos” será exibido duas subpáginas:

• “Temas” que conterá sugestões para oficinas de leitura com breve descrição sobre cada tema.
• “Oficinas” terá links com breve descrição e direcionará a uma página com o conteúdo completo e fotos das atividades.

No último menu “Atividades”, terá uma senha padrão, onde somente os discentes da docente saberá a senha. Para que outros visitantes não acessem a área restrita ao discente. Depois de digitar a senha padrão os discentes terão acesso a dois links:

• Link “Cadastro” em que os discentes farão um cadastro com: nome, sobrenome, turma, ano, e-mail e senha, esses dados ficarão armazenados em um banco de dados.
• Link “Login” no qual os discentes digitarão seu e-mail e senha, já cadastrados e terão acesso a página “Trabalhos” no qual enviarão seus trabalhos realizados como arquivo em anexo e também será preenchido um formulário com: nome, e-mail e turma e será enviado ao e-mail da docente.

Considerações Finais

O desenvolvimento de website nessa tarefa significou um grande aprendizado que vai além da sala de aula, como os conceitos sobre as mais diversas linguagens e seus recursos.
Posso afirmar que o desenvolvimento do Website não foi o meu maior desfio. Desafio maior foi a elaboração do código para a criação dos formulários Login e Cadastro, onde utilizei a ferramenta MAMP que não obteve comunicação com o Banco de Dados. O código foi revisado e não foi constatado o erro, passei então a utilizar o XAMPP, no qual obtive êxito e os resultados foram de grande valia.
Não tinha noção do quão é grande sobre o desenvolvimento Web, então iniciei uma pesquisa exploratória no intuito de escolher uma ferramenta adequada para o desenvolvimento.

Referência Bibliográfica

Almeida, D. F. (07 de 08 de 2011). http://davifma.blogspot.com.br. Acesso em 09 de 11 de 2017, disponível em O que é o Sitema(Mapa do site) em um projeto de website?: http://davifma.blogspot.com.br/2011/08/o-que-e-o-sitemap-mapa-do-site-em-um.html
Alvarez, M. A. (06 de 08 de 2007). Xampp: Apache, PHP e MYSql. Acesso em 16 de 09 de 2017, disponível em CriarWeb.com: http://www.criarweb.com/artigos/xampp-apache-php-mysql.html
Barreto, M. V. (30 de 06 de 2015). Curso de Linguagem PHP. Acesso em 16 de 09 de 2017, disponível em Clique Apostilas: http://www.cliqueapostilas.com.br/programcao/curso-de-linguagem-php#
Caetano, R. (06 de 08 de 2009). Metodologia de desenvolvimento: Qual a mais adequada? Acesso em 02 de 12 de 2017, disponível em Computerworld.com.br: http://computerworld.com.br/gestao/2009/08/05/metodologias-de-desenvolvimento-qual-a-mais-adequada
Couto, G., & Jardim, N. (3 de 6 de 2010). Metodologias no design e na interão. Acesso em 9 de 11 de 2017, disponível em https://pt.slideshare.net/: https://pt.slideshare.net/agner/metodologias-no-design-e-na-interao
ETAPAS, ENVOLVIMENTO E CRONOGRAMA - WEBSITE PROJETADO. (s.d.). Acesso em 16 de 09 de 2017, disponível em N2Midia - Agência de Marketing Digital: http://www.n2midia.com.br/etapas-envolvimento-e-cronograma-website-projetado/
Faria, C. (14 de 09 de 2012). Fluxograma. Acesso em 21 de 09 de 2017, disponível em InfoEscola.com: http://www.infoescola.com/administracao_/fluxograma/
Higa, P. (27 de 02 de 2012). O que é Xampp e para que serve. Acesso em 16 de 09 de 2017, disponível em TechTudo Informática - Sistemas Operacionais: http://www.techtudo.com.br/dicas-e-tutoriais/noticia/2012/02/o-que-e-xampp-e-para-que-serve.html
Mendes, R. (03 de 09 de 2013). Infografico: Todas as etapas para projetas um Website. Acesso em 16 de 09 de 2017, disponível em Profissional de Ecommerce: http://www.profissionaldeecommerce.com.br/infografico-todas-as-etapas-para-projetar-um-website/
Moura, E. C. (29 de 03 de 2011). Servidor web Apache. Acesso em 16 de 09 de 2017, disponível em Software Livre: http://softwarelivre.org/edicarlos/edi-carlos-moura/servidor-web-apache
Pisa, P. (17 de 04 de 2012). O que é e como usar MySQL? Acesso em 16 de 09 de 2017, disponível em TechTudo Infomrática: Sistemas Operacionais: http://www.techtudo.com.br/artigos/noticia/2012/04/o-que-e-e-como-usar-o-mysql.html
Uchôa, J. P. (s.d.). Evoluçãoda metodologia do desenvolvimento de sistemas. Acesso em 02 de 12 de 2017, disponível em www.linha de codigo.com.br: http://www.linhadecodigo.com.br/artigo/2108/evolucao-da-metodologia-do-desenvolvimento-de-sistemas.aspx
Wordpress Brasil. (s.d.). Acesso em 16 de 09 de 2017, disponível em WordPress.org: https://br.wordpress.org/

*Graduando do curso de Bacharelado em Sistema de informação da Faculdade de Tecnologia de São Vicente.
** Professor da Faculdade de Tecnologia de São Vicente, Doutorando bolsista do programa de Ensino em Ciências e Matemática.
*** Professor Dr. da Universidade Cruzeiro do Sul - UNICSUL email: luiz.amaral@cruzeirodosul.edu.br
1É uma palavra que resulta da justaposição das palavras inglesas web (rede) e site (sítio, lugar).  No contexto das comunicações eletrônicas, website e site possuem o mesmo significado e são utilizadas para fazer referência a uma página ou a um agrupamento de páginas relacionadas entre si, acessíveis na internet através de um determinado endereço.
2 (Um acrônimo recursivo para "PHP: Hypertext Pre Processor", originalmente Personal Home Page).
3  É um Sistema de Gerenciamento de Banco de Dados (SGBD), que utiliza a linguagem SQL (Linguagem de Consulta Estruturada, do inglês Structured Query Language) como interface.
4(ou Servidor HTTP Apache, em inglês: Apache HTTP Server, ou simplesmente: Apache) é o servidor web livre mais utilizado do mundo.
5 É um desenho básico, como um esqueleto, que demonstra de forma direta a arquitetura de como o objeto (interface, página da internet, modelo, etc.) final será de acordo com as especificações relatadas.
6Programas que tem seu código fonte aberto. Qualquer um pode baixar o código fonte do programa, estudá-lo ou mesmo aperfeiçoá-lo. Open Source não é a mesma coisa que de domínio público. Um programa Open Source continua pertencendo ao seu criador e a quem ajudou no seu desenvolvimento.
7Sigla para File Transfer Protocol] (Protocolo para Transferência de Arquivos). Protocolo para transmitir ou receber arquivos pela Internet. Quando se deseja, por exemplo, hospedar um site na Internet, a transferência dos arquivos do computador local para o provedor se dá por meio desse protocolo.
8 É um aplicativo web livre e de código aberto desenvolvido em PHP para administração do MySQL pela Internet. A partir deste sistema é possível criar e remover bases de dados, criar, remover e alterar tabelas, inserir, remover e editar campos, executar códigos SQL e manipular campos chaves
9 É sigla de HyperText Transfer Protocol que em português significa "Protocolo de Transferência de Hipertexto". É um protocolo de comunicação entre sistemas de informação que permite a transferência de dados entre redes de computadores, principalmente na World Wide Web (Internet).
10 (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.
11 São as siglas de Content Management System, que se traduz diretamente ao português como Sistema de Gerenciamento de Conteúdo. Como seu próprio nome indica, é um sistema que nos permite gerenciar conteúdos.

Recibido: 11/08/2018 Aceptado: 03/10/2018 Publicado: Octubre de 2018

---

Nota Importante a Leer:
Los comentarios al artículo son responsabilidad exclusiva del remitente.
Si necesita algún tipo de información referente al articulo póngase en contacto con el email suministrado por el autor del articulo al principio del mismo.
Un comentario no es mas que un simple medio para comunicar su opinion a futuros lectores.
El autor del articulo no esta obligado a responder o leer comentarios referentes al articulo.
Al escribir un comentario, debe tener en cuenta que recibirá notificaciones cada vez que alguien escriba un nuevo comentario en este articulo.
Eumed.net se reserva el derecho de eliminar aquellos comentarios que tengan lenguaje inadecuado o agresivo.
Si usted considera que algún comentario de esta página es inadecuado o agresivo, por favor, escriba a lisette@eumed.net.

---