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.

Minicurso Web. Front-end e HTML5 (parte 2)

1,168 views

Published on

Minicurso Web UNIFEI: Front-end e novidades do HTML5
(parte 2)

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Minicurso Web. Front-end e HTML5 (parte 2)

  1. 1. Luiz Felipe F. M. Costahttp://thenets.org/phelip Parte 2 – Desenvolvendo meu próprio website
  2. 2.  Meu nome é Luiz Felipe F. M. Costa. Aluno de Sistemas de Informação na UNIFEI. Estudo web front-end por conta. Meu site: http://TheNets.org/ Meu email: phelip@thenets.org
  3. 3. 1. Front-end e back-end.2. O que é HTML5?3. Instalando Apache+MySQL.4. O que é PHP?5. Criando meu próprio website. 1. Semântica HTML5 2. Colocando a mão na massa6. Onde aprender?• Parte 1: de 1 a 2• Parte 2: de 3 a 6
  4. 4. Extra Dreamweaver CS6: da Adobe e é pago, mas eu acho que é o melhor de todos. Aptana: o único, na minha opinião, que consegue competir com o DW. Notepad++: gratuito. Particularmente, considero bem ruim, mas tem quem goste e diga que é o melhor que existe.
  5. 5.  Servidor HTTP. Voltado para servidores de pequeno e médio porte. Suporta várias linguagens.
  6. 6.  Instalar ambos os aplicativos necessita de conhecimento mais técnico sobre servidores. É complicado. É um tanto complicado. Uma má configuração pode colocar a máquina exposta a ataques. É muito complicado.
  7. 7.  Aplicativo para pré-configuração  Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, O penSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, e WEB- DAV + mod_auth_mysql.
  8. 8.  Acesse o link http://www.apachefriends.org/pt_br/xampp -windows.html Baixa o XAMPP Portable (exe)
  9. 9.  Após extrair, execute e o arquivo “setup_xampp.bat” para definir os diretórios e, em seguida, execute o aplicativo “xampp-control.exe”.
  10. 10.  Clique em “Start” para iniciar tanto o Apache, quanto o MySQL. Pronto, seu servidor já está funcionando! (:
  11. 11.  No diretório “~/xampp/htdocs” estão localizados os arquivos do “localhost”. Para acessar esses arquivos pelo navegador, basta acessar http://localhost/. Os arquivos que já vêm na pasta “htdocs” do XAMPP podem ser excluídos sem problema.
  12. 12.  Controle bancos de dados MySQL Acesse pelo link: http://localhost/phpmyadmin/
  13. 13. Back-end Linguagem back-end voltada para o desenvolvimento de websites dinâmicos. Sintaxe parecida com a da linguagem C. Orientado a Objetos. Muito popular, com diversos framworks. Está perdendo espaço para o Ruby on Rails. Site: http://php.net.
  14. 14. Back-end  Uma das maiores plataformas do mundo é o Yahoo!, que utiliza PHP e chega a receber 150 mil visitantes simultaneamente.  Em geral o PHP é utilizado com:  Um servidor Web: Apache ou Microsoft IIS;  Um SGDB (banco de dados): MySQL, PostgreSQL, Oracle, SQL Server, etc.Fonte: http://www.htmlstaff.org/ver.php?id=23269
  15. 15. Back-end  Web (HTML)  Web Services;  Rich Clients, cliente/servidor (PHP-GTK, PHP-XUL, etc);  Linha de Comando (CLI);  Documentos Office (Open Documents, Open XML, PDF, Flash, etc).Fonte: http://www.htmlstaff.org/ver.php?id=23269
  16. 16. Back-end  Desenvolvimento de Software: Dreamweaver, Eclipse, PHPEdit, Zend Studio;  Otimização: APC, eAccelerator, Smarty, JpCache;  Administração: phpMyAdmin, phpOracleAdmin, phpSysbaseAdmin, phpPgAdmin;  Gerenciamento de Conteúdo: Spip, eZ Publish, Joomla, Typo 3, Wordpress;  Framework: PEAR, Symphony, CakePHP, Prado, Seagull, Zend Framework, eZ Components;  ERP, webshops: Dolibarr (ERP), GeStock (Gerenciamento de estoque), osCommerce (Comércio Virtual), SugarCRM (CRM).Fonte: http://www.htmlstaff.org/ver.php?id=23269
  17. 17. Back-end A web é dividida em duas camadas:  Front-end ▪ HTML: conteúdo e estrutura ▪ CSS: estilo/apresentação ▪ JavaScript: comportamento  Back-end ▪ PHP ▪ Python ▪ Ruby ▪ ...
  18. 18. Tirinha
  19. 19. Front-end Quem criou?  A W3C. Qual a importância?  Torna uma página acessível para qualquer browser, seja de um desktop/notebook ou mobile.
  20. 20. Front-end Digamos que um site muito grande, como o site do Globo Esporte ou UOL consiga reduzir de cada página 50KB. Em portais como esses, 50KB pode representar muito:  3 Terabytes / dia  92 Terabytes / mês  1100 Terabytes / ano
  21. 21. Front-end Um site criado seguindo os padrões da W3C obtém melhores resultados em buscadores, diminui o número de falhas e é melhor renderizado pelo browser.
  22. 22. Front-end O termo “Tableless” ficou muito conhecido no Brasil e se refere ao desenvolvimento de website que substitui tabelas por “divs”, posicionadas usando CSS. Use <table> para criar tabelas, não para posicionar elementos numa página.
  23. 23. Front-end O navegador é como se fosse um leitor de um livro e o conteúdo dele deve possuir uma linguagem que seja entendível para o browser. <a> <title> <h1> <strong> <div> <p> <br>
  24. 24. Front-end<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>Untitled Document</title></head><body></body></html>
  25. 25. Front-endFonte: http://www.youtube.com/watch?v=I7NXjIe9PJs
  26. 26. Front-end Criar tabelas  <table></table> Títulos  <h1></h1> até <h6></h6> Listas ordenadas  <ol></ol> Listas não-ordenadas  <ul> <li></li> <li></li> </ul> Ênfase  <em></em> Ênfase forte (negrito)  <strong></strong> Títulos de campos de formulários  <label></label>
  27. 27. Front-end Cabeçalho da página  <header></header> Rodapé da página  <footer></footer> Informações sobre o conteúdo principa  <aside></aside> Imagem com legenda  <figure> <img src=“imagem.jpg” alt=“Descrição” /> <legend>Legenda da Imagem</legend> </figure>
  28. 28. Front-end Adiciona áudio  <audio src=“audio.ogg” controls=“controls”></audio> Adiciona video  <video src=“audio.ogg” controls=“controls”></video> Sessão de navegação  <nav> <a href=“http://link”>Anterior</a> <a href=“http://link”>Home</a> <a href=“http://link”>Próximo</a> </nav>
  29. 29. Front-end Menus  <menu> <li><input type=“checkbox” />NFS Most Wanted</li> <li><input type=“checkbox” />League of Legends</li> <li><input type=“checkbox” />Torchlight 2</li> </menu>
  30. 30. Front-endFonte: http://slides.html5rocks.com/
  31. 31. Front-end Referência com todas as TAGs:  http://www.w3schools.com/tags/default.asp
  32. 32. Front-end Acesse o link abaixo e mãos-a-obra.  http://thenets.org/works ▪ Chave: minicurso
  33. 33. TUDO GRATUITO! Codecademy (aulas interativas)  Web Fundamentos (HTML+CSS); JavaScript; Python; Ruby; jQuery. Apostilando.com (PDFs / eBooks)  Qualquer tipo de conteúdo de informática. YouTube (video-aulas)  Preciso comentar? (: Google  O oráculo.
  34. 34.  Administrador dos projetos TheNets.org Aluno de Sistemas de Informação na UNIFEI. Meu site:  http://TheNets.org/ Meu email:  phelip@thenets.org Meu twitter:  http://twitter.com/TheNets

×