A web mobile com bootstrap

276 visualizações

Publicada em

Apresentação utilizada no Mini-Curso sobre Bootstrap, na semana acadêmica de Ciência da Computação - Unifacvest - 2015/1

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
276
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

A web mobile com bootstrap

  1. 1. B? ¡ D _NV ' * IÍ4E¡'I: _EI'I agf* ç' -w wa¡ P"? . f a¡ 1. í. . t ; à ; rjrtjlkãiílêü : :c; ::^. ›u; r:r: › , ÊÍíiífêÍíçÍíÊàêifÊfífãil
  2. 2. Ronaldo Scott¡ dos Santos P: @ronaldo_scotti / ronaldoscottis ronaldoscott¡s@hotma¡l. com Front-End na Lands Interativa Trabalho com web desde 2012.
  3. 3. !fi Llǧí<§*í; ¡ariÇIíÍlÍCÊr§> 'gü. [_: _l, íàg4lçfl. Lí| :a “AiÍÉ/ (Êablâgíj - Foi criada em 1989 -Tim Berners-Lee - Hipertexto
  4. 4. Nas eras pré-históricas. .. - H. T.M. L. Texto. Texto. Texto pra cacete. Até tinha link, mas era texto também : (
  5. 5. mma-uno. .- a o n o ! W orld ide cb 'utnnrluyno . ... .». . 4.u. ..emma-nec_. u»r. _.. ... ... ».¡. ,.-«. .m. _m i-«qmunnzau ¡nrcsneauhvxtumA-'oanlúxn- . . mau. ”- : x. ... ..› - A. Í-Cnnuu¡ . me. mana. . . .mama-ana A4.l1., -›- náunvcnhlU-v~vuditt y, an. ; mu. .. u. .. ¡. ... -_. ¡.. : y. .. ¡. _.. ... .m~. ¡.n. ... .. Au4.. .,. ..--. ..a. u¡. . n. _. .4-5.. . «um» : - . num. -. .ngm «. ... ... _.. ». V, i» . .
  6. 6. Yahoo - 1995 e? 157:? " " '-'“' n NLW-n COOL-MANDOU Nov Oyen Yahoo' Sun' Show o An: Runner, Photoznyly, Mhlcckn, o Business and Hconomnnnl] Dnctovy, lrmxnnu, cmmw, “hsm, I Computers and lntcrnzunnl] luana, VVV, Senna, Mlluncdn, . o Education Uuvmimx, x42, Covas, a Enteminmenllnnl] TV, Mwm, Muy, Mszmaz, o Government Pour: mui), Aguda, uv, Mnxmy, o Health Mama, Drugs, Duma, hmm, "N . flw gl. ” *- NEAD YAHOO ADD LIMES_INFO: URL- Mérrzrazzza* um m Options o Nevnnnu Vod( [ñnll, Dnly, Cwvnl Bvvuz, o Reclndnn em; (nm), Gun, Tnvvl, Auoí, o Relaxante Lúhrkx, Dxuonms, Pb¡ Nnkn, o Regional Couumx, Region, US Sims, o Scienu cs, aum. Astmnny, hgmmag, a Social Sciense Amnyobgy, Socwbgy, Bonanza, o Society and Culture Pcoyk, Exnoncn, Ramon, Text-only Yahoo - Contributors CNN INTERA › 3 na' IuLu meu Sia '.5- nu an». Gun¡ IVE - 199 u, .j aC vu; - hn hcvn¡ 3!¡ M# Interactive É: MAI( MQ. ÍNI : :uma mano¡ um( m -. .. v VJ. tem. mw: : HAXHJ $511¡ RAEM UI TUKIAMKAI 9991;¡ mm çateccmfsi Middle East Sites m . m. und-pru: : u. . . . A, . m”. !IJ an¡ . n ? n10 Í/ n »: .1.. -. n n (Laur- rv-ownt-y num. . [rz ¡ün-'t-L¡ ! Hunt/ l Can-av¡ nur. ; : uz-n *uma sm Az» hpr pdn-mrunrhuulxt-v- Gcndvtl Inlnnuluon
  7. 7. 'i Ê : a E Mas então. .. I à n* l Q Ó _, __ E O HTML evoluiu. .. Vieram as imagens. .. j' Tabelas. .. W WH" ÍÍÍHIIIIIIIIW"" Ã '
  8. 8. w251i! _, , , , _ , =j~f': ';_. “¡”, !;›°" . E-, tíiiêliíixéãflaàl. Fropostas: - Melhorar a aparência - Usabilidade - Manutenibilidade dos sites
  9. 9. ;A : íç: .'r; i:; ;›2.: .r: I ! :i: ;1 V» En: : teoria. .. ! g3 g_ . É, Menos stress! g ! g ¡_. _«. ,~Ê,1 Mais produtividadeequalidade! i d' : xiii' ! i1.. ... .e t Mais liberdade! !à l Tudo de bom!
  10. 10. à _FÊWÉÍJÍÍÊFÊÉFIÊÊi l. ; l N É Fmmdnamamon Fmowr@NoEn
  11. 11. í' * 1. ' - t. Ninguem dava/ 'i / importância para o Front-end/ .z. I . /_. /i . ” ”°/ / ; í « . / / / I r
  12. 12. Mas isso mudou! .. x7 ' W Q” v'
  13. 13. 'C4 ç y x ' 6,5» Ú. n» l i; ;~_. lÊi_r'Íiv t; A! ¡É, !§Í§i? I_l"ê_l_i_Xl a¡ 1!] i: ;.-, i"§i; _; [ir srsiialÍitsí N . l, »iii E! !Al/ 'EPLL
  14. 14. .ÊQYLÍJGÍÂ Os navegadores evoluíram. ..
  15. 15. FOLDERS 4 › envvarestagmphp x conedaphp x estagiophp x custoiuss o udadesresladosaálljs x Package Control Messages x V cadastros › v “S . navbar ( L, _ d_ 'J font-size: ldpx; t"'m" “mm” -webizit-tronsition: all Lens linear; -moz-tronsition: all 2.a. ; linear; "m" mis-transition: all 2.015 linear; ›runcuons -o-transitian: all 2.0ns linear; ' 'm9 transition: all 2.0ns linear; P Is ) e I w . btn . bm-primary ( - background: 016799; : r ' _ background: url(data: ímage/ svguml_; baseôd, PD94bwwgdmVyc2lvbj0íMS4wIiA/ Pgo8c3ZnIHhtbGSzPSJodHRwi8vd3d3LnczLm9yZy8 backgroun ›moz-linear-gradlent(top, #125799 0X, Q2989d8 50X, ÇÂOLcÍcÊ 51%, I7db9e8 100%); background: -webkit-gradientüinear, left top, left bottom, color-stop(0%, #1e5799), calar›stop(50%, #2989d8), colo v. background: -webkit-linear-gradientúop, 01677799 0X, #2989d8 50X, B207cca S1X, Q7db9e8 100%); i9 background: -o-linear-gradientüop, l1e5799 0X,82989d8 SOX,0207cca 51%,07db9e8 100!); 26 bachgroun -Ins-línear-gradientüop, #Q5799 0%, #2989d8 S0$,8207cca 51X, i07db9e8 100!); 21 background: línear-gradientüo bottom, 81e5799 0X, #2989d8 50%, #207c: a 51l, #7db9e8 100%); 22 filter: progid : DXIinageTransform. Microsoft . gradient( ÊÉaFtCoIor-stré ' 42135799 ' , enaco1orstr= 'snabses ' , GradientType=0 2,' 24 ) [mí
  16. 16. Vários problemas para manter os sites Funcionando em todos os browsers
  17. 17. ' A' aq* _ '~'-“': '=›: .. .T LF: Logo as pessoas resolveram criar algumas Ferramentas. ..
  18. 18. Frameworks de CSS ootstrap Sleek, intuitiva, and powerful front-end framework for faster and ¡eaísñieirweíodevelonmanr , 'v', E””r5._l_í1§. ll_í_r§J_l FOUndÕUOn 3 _ . , I _ . 3 M* _Siqllloíl nulla: Willi¡ (at. . _. , V A_ _ r' u, l yu) "_lrw'lc~. '.'L›rP- ' llw (W131 . ¡.l. ..›: .r. -.l low »m *L * _ Down| oad0.3.3 _l Vlewon Gnhub l T* Dmnmlond Foundation 3.1 'WNKIHFXÉ
  19. 19. . : ›;. _v. ;;: .~ Segundo o dicionário Collins: Framework é um conjunto particular de regras, ideias e crenças que você usa com o intuito de lidar com problemas reais ou decidir o que fazer
  20. 20. 1.5.iêíliilêííÉiêírlâl? ÉÍÍiií§í§$Yt§flrJiÊâ§Eglêírtã Vantagens; Desvantagens; - Facilidade - Restrições - Padrões robustos - Semântica alheia - Comunidade - Curva de aprendizado - Muitas Ferramentas - Muitas Ferramentas
  21. 21. l- i. #J un' 22; 'ÉSÍTTLZJ One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base_ from phones to tablets to desktops with CSS media queries lÉl m: Full of features With Bootstrap_ you get extensive and beautiful documentation for common HTML elements_ dozens of custom HTML and CSS components_ and awesome jQuery plugins
  22. 22. iÊÍiíÃfãLlíãai_ÊÊÃÊZTÊEI Er) - Originalmente, Ferramenta interna do Twitter - Foi criado por Mark Otto e Jacob Thornto em 2011 - Mais de 20 releases - Atualmente na versão 3.3.4
  23. 23. k N! - "Vl q¡ n , s êritcíiisêtlãiãtat; si E) O Framework de CSS. .. Front-End. .. i i Responsivo. .. l Mobile First. .. Ã t - e Só não Faz caFé. Ainda z)
  24. 24. É' ~ , . tara: : i t: : Í_F_E? §SÍFj/ FÊ. ÀÃEJ l _iii= :is, »tri _t É o design de um site que se adapta ao comportamento do usuário, com base no tamanho da tela, plataForma e orientação.
  25. 25. senai yyyvrrpi . i 1 a'a_-. v'*ur'" F' 1 . ii ; iíQJiÉtsEl-: Íiillifã *ÍVÍIVTSÊÉ Í V' É? " 'TÔ' É ' É» l l lei; *as
  26. 26. x. ; ¡ Exemplos
  27. 27. l ÍlÀÇÃlÂiiLLÉIí1ÉÍí§ÂEÃl a o l Vamosaoqueinteressa!

×