ferramentas livres para desenvolvimento web
DESCRIPTION
Apresentação feita durante o projeto Pense Livre, realizado pelo CASIQ - UFC Quixadá.TRANSCRIPT
![Page 1: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/1.jpg)
![Page 2: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/2.jpg)
![Page 3: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/3.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 4: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/4.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 5: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/5.jpg)
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.
Localizador Uniforme de Recursos (URL)Linguagem de Marcação de Hipertexto (HTML)
Protocolo de Transferência de Hipertexto (HTTP)Navegador Web (Browser)
Como tudo começou...
![Page 6: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/6.jpg)
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).
A Web
![Page 7: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/7.jpg)
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.
Desenvolve Recomendações abertas,até agora mais de 80 padrões...
www.w3.org
O que é W3C?
![Page 8: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/8.jpg)
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.
XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...
Os Padrões Web
![Page 9: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/9.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 10: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/10.jpg)
![Page 11: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/11.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 12: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/12.jpg)
Mapa do Site
• É uma representação hierárquica da estrutura de um site, composta por páginas web.
• 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.
![Page 13: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/13.jpg)
![Page 14: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/14.jpg)
http://writemaps.com
![Page 15: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/15.jpg)
Wireframe
• Wireframe seria um esqueleto do site, que deve ser feito antes de iniciar a montagem do layout com cores e imagens.
![Page 16: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/16.jpg)
![Page 17: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/17.jpg)
https://gomockingbird.com/
![Page 18: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/18.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 19: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/19.jpg)
![Page 20: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/20.jpg)
http://www.gimp.org/
![Page 21: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/21.jpg)
![Page 22: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/22.jpg)
![Page 23: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/23.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 24: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/24.jpg)
HTML
HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.
![Page 25: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/25.jpg)
![Page 26: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/26.jpg)
CSS
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.
Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criandofolhas de estilo alternativas.
![Page 27: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/27.jpg)
JavaScript
JavaScript é uma linguagem de programação criada por Brendan Eich em 1995.
A linguagem foi criada para atender, principalmente, às seguintes necessidades:
* Validação de formulários no lado cliente; * Interação com a página (Comportamento).
![Page 28: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/28.jpg)
JQuery
Jquery que é uma biblioteca JavaScript criada por John Resig que tem por finalidade facilitar o desenvolvimento de scripts.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.
http://www.jquery.com
![Page 29: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/29.jpg)
PHP
É uma linguagem que permite criar sites dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. A diferença de PHP com relação a linguagens semelhantes a Javascript é que o código PHP é executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira é possível interagir com bancos de dados e aplicações existentes no servidor.
http://www.php.net
![Page 30: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/30.jpg)
MYSQL
O MySQL é 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. É atualmente um dos bancos de dados mais populares, com mais de 10 milhões de instalações pelo mundo.
http://www.mysql.com
![Page 32: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/32.jpg)
XAMPP
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.
http://www.apachefriends.org/pt_br/xampp.html
![Page 33: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/33.jpg)
Aptana
Aptana ou Aptana Studio é um software open source para IDE (Integrated Development Environment) desenvolvido em Java que suporta as linguagens CSS, HTML e JavaScript, embora também seja possível configurá-lo para suportar PHP, Ruby on Rails, Adobe® AIR e Bibliotecas AJAX. É baseado no Eclipse.
![Page 34: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/34.jpg)
http://www.aptana.com/
![Page 35: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/35.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 36: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/36.jpg)
http://br.mozdev.org/download/
http://www.google.com.br/chrome
![Page 37: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/37.jpg)
FTP: O que é?
• FTP significa File Transfer Protocol (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.
![Page 38: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/38.jpg)
http://filezilla-project.org/
![Page 39: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/39.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 40: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/40.jpg)
CMS: WordPress
• Criado por Matt Mullenweg, roda em PHP e MySQL sob a licença GPL
• Tem como foco padrões de usabilidade e facilidades para o usuário final
• É largamente utilizado como um CMS apesar de ainda não ser um
• Como todo software livre tem uma comunidade grande e ativa
• Plataforma utilizada em grandes projetos nacionais e internacionais
![Page 42: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/42.jpg)
![Page 43: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/43.jpg)
![Page 44: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/44.jpg)
![Page 45: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/45.jpg)
![Page 46: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/46.jpg)
CMS: WordPress
• Fazer o download do pacote em:http://br.wordpress.org
• Conseguir um servidor PHP!• Conseguir um banco de dados MYSQL!• Mandar os arquivos pro servidor PHP!• Criar o banco de dados!• Acessar o endereço para iniciar a instalação.
![Page 47: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/47.jpg)
Programa
• Um pouco de História• Etapas do Desenvolvimento– Coleta de Informações– Planejamento– Design– Desenvolvimento– Testes e Publicação– Manutenção
• Considerações finais
![Page 49: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/49.jpg)
![Page 50: Ferramentas Livres para Desenvolvimento Web](https://reader035.vdocuments.net/reader035/viewer/2022070318/5579a1dad8b42ac1148b4857/html5/thumbnails/50.jpg)
Obrigado! ;)