minicurso iniciando no mundo front-end - dia 01 - saspi {5}
DESCRIPTION
Minicurso Iniciando no Mundo Front-End - Dia 01 Ministrado na SASPI {5} - Semana Acadêmica do curso de Sistemas para Internet - IFSULTRANSCRIPT
![Page 1: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/1.jpg)
Matheus S. ThomazFront-end Developer
![Page 2: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/2.jpg)
Matheus S. ThomazFront-end Developer
QUEM SOU EU
![Page 3: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/3.jpg)
Matheus S. ThomazFront-end Developer
/Quem sou eu
Matheus Siga Thomaz
/matheus.piska
www.msthomaz.com
Site
![Page 4: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/4.jpg)
Matheus S. ThomazFront-end Developer
/AG2 Publicis ModemDesenvolvedor front-end - 2011
ToyotaSanofiBradescoGrupo SebNaturaRio 2016
![Page 5: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/5.jpg)
Matheus S. ThomazFront-end Developer
/Video
![Page 6: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/6.jpg)
QUEM SÃO VOCÊS?
![Page 7: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/7.jpg)
/Quem são vocês?
/Nome/Conhecimento/Experiência/Porque está aqui?
![Page 8: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/8.jpg)
Matheus S. ThomazFront-end Developer
CRONOGRAMA
![Page 9: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/9.jpg)
Matheus S. ThomazFront-end Developer
/Cronograma
Porque ser front-end?EditoresNavegadoresFerramentas do desenvolvedor
![Page 10: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/10.jpg)
Matheus S. ThomazFront-end Developer
PORQUE SE TORNAR UM FRONTEND
![Page 11: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/11.jpg)
Matheus S. ThomazFront-end Developer
/Quem é o frontend?
Trabalha com o visual do site.
Interação com o usuário.
![Page 12: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/12.jpg)
Matheus S. ThomazFront-end Developer
/Quem é o backend?
Trabalha com a interação site - banco de dados.
Controla e entrada e saída de dados.
![Page 13: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/13.jpg)
Matheus S. ThomazFront-end Developer
/frontend != backend
![Page 14: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/14.jpg)
Matheus S. ThomazFront-end Developer
/Porque se tornar um frontendFrontend evolui diariamente, sempre uma tecnologia nova para aprender.
Mercado em ampla expansão.
![Page 15: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/15.jpg)
Matheus S. ThomazFront-end Developer
EDITORES
![Page 16: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/16.jpg)
WYSIWYG
![Page 17: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/17.jpg)
WYSIWYGWhat You See Is What You Get
![Page 18: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/18.jpg)
Matheus S. ThomazFront-end Developer
/WYSIWYG - Dreamweaver
![Page 19: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/19.jpg)
Matheus S. ThomazFront-end Developer
/WYSIWYG - Dreamweaver
![Page 20: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/20.jpg)
IDE
![Page 21: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/21.jpg)
IDEIntegrated Development Environment
![Page 22: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/22.jpg)
Matheus S. ThomazFront-end Developer
/IDE - Dreamweaver
![Page 23: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/23.jpg)
Matheus S. ThomazFront-end Developer
/IDE - Visual Studio
![Page 24: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/24.jpg)
Matheus S. ThomazFront-end Developer
/IDE - Aptana Studio
![Page 25: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/25.jpg)
Qualquer editor ou ferramenta que vire uma muleta para o dev é
algo ruim!
![Page 26: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/26.jpg)
Fuja de qualquer WYSIWYG e IDE’s!
![Page 27: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/27.jpg)
Matheus S. ThomazFront-end Developer
Ainda quer ser um frontend?
![Page 28: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/28.jpg)
Matheus S. ThomazFront-end Developer
Editores para Frontend
![Page 29: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/29.jpg)
/Editores para Frontend
Sublime Text (windows|mac|linux)
![Page 30: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/30.jpg)
/Editores para Frontend
Brackets (windows|mac|linux)
![Page 31: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/31.jpg)
/Editores para Frontend
Atom (mac|linux)
![Page 32: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/32.jpg)
/Editores para Frontend
Sublime Textwww.sublimetext.com/3Bracketswww.brackets.ioAtomwww.atom.io
![Page 33: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/33.jpg)
Matheus S. ThomazFront-end Developer
BROWSERS
![Page 34: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/34.jpg)
/Browsers
Internet Explorer
![Page 35: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/35.jpg)
/Browsers
Internet Explorer
![Page 36: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/36.jpg)
/Browsers
Chrome
![Page 37: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/37.jpg)
/Browsers
Firefox
![Page 38: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/38.jpg)
/Browsers
SafariOpera
Chrome CanaryFirefox Nightly
![Page 39: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/39.jpg)
Matheus S. ThomazFront-end Developer
FERRAMENTASDO
DESENVOLVEDOR
![Page 40: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/40.jpg)
/O que é?
Compilado de ferramentas que ajuda o desenvolvedor a debugar e desenvolver.
![Page 41: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/41.jpg)
/Porque usar?
Ferramenta essencial para qualquer desenvolvedor frontend.
Inspecionar, verificar onde está posicionado um elemento, verificar e modificar o CSS de um elemento, ect...
![Page 42: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/42.jpg)
/Ferramentas do dev
Chrome
![Page 43: Minicurso Iniciando no Mundo Front-End - Dia 01 - SASPI {5}](https://reader036.vdocuments.site/reader036/viewer/2022062319/557b8ec2d8b42a62418b523a/html5/thumbnails/43.jpg)
/Ferramentas do dev
Firefox