Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ferramentas Livres para Desenvolvimento Web

Apresentação feita durante o projeto Pense Livre, realizado pelo CASIQ - UFC Quixadá.

  • Be the first to comment

Ferramentas Livres para Desenvolvimento Web

  1. 1.
  2. 2.
  3. 3. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  4. 4. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  5. 5. Como tudo começou...<br /> A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.<br />Localizador Uniforme de Recursos (URL)<br />Linguagem de Marcação de Hipertexto (HTML)<br />Protocolo de Transferência de Hipertexto (HTTP)<br />Navegador Web (Browser)<br />
  6. 6. A Web<br /> Também conhecida como World-Wide Web (WWW) é a parte multimídia da Internet, portanto possibilita a exibição de páginas de hipertexto, ou seja, texto em formato digital, documentos que podem conter todo o tipo de informação: textos, fotos, animações, trechos de vídeo e sons e programas e que permite conexões entre documentos (os links).<br />
  7. 7. O que é W3C?<br /> W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.<br />Desenvolve Recomendações abertas,<br />até agora mais de 80 padrões...<br />www.w3.org<br />
  8. 8. Os Padrões Web<br /> Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.<br />XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...<br />
  9. 9. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  10. 10.
  11. 11. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  12. 12. Mapa do Site<br />Éumarepresentaçãohierárquicadaestrutura de um site, compostaporpáginas web.<br />O "mapa do site" é feito com os tópicos mais importantes e seus sub-tópicos, se tiver. Ele é um índice para um fácil entendimento da navegação do projeto. <br />
  13. 13.
  14. 14. http://writemaps.com<br />
  15. 15. Wireframe<br />Wireframe seria um esqueleto do site, quedeve ser feito antes de iniciar a montagem do layout com cores eimagens.<br />
  16. 16.
  17. 17. https://gomockingbird.com/<br />
  18. 18. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  19. 19.
  20. 20. http://www.gimp.org/<br />
  21. 21.
  22. 22.
  23. 23. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  24. 24. HTML<br />HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.<br /> Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.<br />
  25. 25.
  26. 26. CSS<br />Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.<br /> Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.<br /> Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando<br /> folhas de estilo alternativas.<br />
  27. 27. JavaScript<br />JavaScript é uma linguagem de programação criada por Brendan Eich em 1995.<br /> A linguagem foi criada para atender, principalmente, às seguintes necessidades:<br /> * Validação de formulários no lado cliente;<br /> * Interação com a página (Comportamento).<br />
  28. 28. JQuery<br />Jquery que é uma biblioteca JavaScript criada por John Resig que tem por finalidade facilitar o desenvolvimento de scripts.<br />A biblioteca jQuery é disponibilizada como software livre( pode ser usada, copiada, estudada, modificada e redistribuída sem restrição), ou seja, você pode usar a biblioteca gratuitamente tanto para desenvolver seus projetos pessoais e comerciais.<br />http://www.jquery.com<br />
  29. 29. PHP<br />É umalinguagemquepermitecriar sites dinâmicos, possibilitandoumainteração com ousuárioatravés de formulários, parâmetrosda URL e links. A diferença de PHP com relação a linguagenssemelhantes a Javascriptéqueocódigo PHP éexecutado no servidor, sendoenviadoparaoclienteapenas html puro. Destamaneiraépossívelinteragir com bancos de dados eaplicaçõesexistentes no servidor.<br />http://www.php.net<br />
  30. 30. MYSQL<br /> O MySQL é um sistema de gerenciamento de banco de dados (SGBD), que utiliza a linguagem SQL (Linguagem de Consulta Estruturada, do inglês StructuredQueryLanguage) como interface. É atualmente um dos bancos de dados mais populares, com mais de 10 milhões de instalações pelo mundo.<br />http://www.mysql.com<br />
  31. 31. PhpMyAdmin<br />http://www.phpmyadmin.net<br />
  32. 32. XAMPP<br />Com o XAMPP é fácil instalar a distribuição Apache contendo PHP, MySQL e Perl. O XAMPP é realmente muito fácil instalar e usar – é necessário apenas baixar, extrair e inicializar. <br />http://www.apachefriends.org/pt_br/xampp.html<br />
  33. 33. Aptana<br />AptanaouAptana Studio é um software open source para IDE (Integrated Development Environment) desenvolvidoem Java quesuporta as linguagens CSS, HTML e JavaScript, emboratambémsejapossívelconfigurá-lo parasuportar PHP, Ruby on Rails, Adobe® AIR eBibliotecas AJAX. É baseado no Eclipse.<br />
  34. 34. http://www.aptana.com/<br />
  35. 35. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  36. 36. http://br.mozdev.org/download/<br />http://www.google.com.br/chrome<br />
  37. 37. FTP: O que é?<br />FTP significa File TransferProtocol (Protocolo de Transferência de Arquivos), e é uma forma bastante rápida e versátil de transferir arquivos, sendo uma das mais usadas na internet.<br />
  38. 38. http://filezilla-project.org/<br />
  39. 39. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  40. 40. CMS: WordPress<br />Criado por Matt Mullenweg, roda em PHP e MySQL sob a licença GPL<br />Tem como foco padrões de usabilidade e facilidades para o usuário final<br />É largamente utilizado como um CMS apesar de ainda não ser um<br />Como todo software livre tem uma comunidade grande e ativa<br />Plataforma utilizada em grandes projetos nacionais e internacionais<br />
  41. 41. CMS: WordPress<br />http://br.wordpress.org<br />
  42. 42.
  43. 43.
  44. 44.
  45. 45.
  46. 46. CMS: WordPress<br />Fazer o download do pacote em:<br />http://br.wordpress.org<br />Conseguir um servidor PHP!<br />Conseguir um banco de dados MYSQL!<br />Mandar os arquivos pro servidor PHP!<br />Criar o banco de dados!<br />Acessar o endereço para iniciar a instalação.<br />
  47. 47. Programa<br />Um pouco de História<br />Etapas do Desenvolvimento<br />Coleta de Informações<br />Planejamento<br />Design<br />Desenvolvimento<br />Testes e Publicação<br />Manutenção<br />Considerações finais<br />
  48. 48. Por onde continuar?<br />http://tools.mozilla.com/<br />
  49. 49.
  50. 50. Obrigado! ;)<br />

×