WebDeveloper - Yesterday, Today, Tomorrow

1,390 views
1,302 views

Published on

Presentation from HTML 5 Day - 5 V 2011 - Gdańsk University, Poland (in Polish)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,390
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WebDeveloper - Yesterday, Today, Tomorrow

  1. 1. Web Developer<br />Yesterday<br />Today<br />Tomorrow<br />Marcin Dembowski <br />.NET Developer @ Goyello<br />4 HTML5 Day @ Uniwersytet Gdański 30 V 2011<br />
  2. 2. Agenda<br /><ul><li>Zwróć uwagę jak piszesz kod
  3. 3. Kto to taki WebDeveloper
  4. 4. Jak to robią inni i czemu źle
  5. 5. O czym powiemy
  6. 6. SVG – na przykładzie zegarka
  7. 7. CANVAS – jak on działa
  8. 8. WebSocket – jest fajny, ale…
  9. 9. JavaScript nie jest taki straszny – Rx/Knockout/MVVM
  10. 10. O czym nie powiemy
  11. 11. O pozostałych 99%</li></li></ul><li>Kim jest WebDeveloper ?<br />Znajomość: HTML, CSS, JavaScript, Silverlight, Flash, WebService, MVC, ASP.NET i jakieś inne dziwactwa<br />Narzędzia:<br /><ul><li>Edytor (np. notatnik)
  12. 12. Sprzęt: np. Laptop</li></li></ul><li>Informatyk to…<br />Charakterystyka (1 z 1024)<br />„Oglądanie strony internetowej zaczyna od podejrzenia źródła.”<br />
  13. 13. Jak robią to inni ?<br />
  14. 14. TEST<br />
  15. 15. NIE:<br />Rozpoznawanie poprzez User Agenta<br />if (x.isIE) { … }<br /><!--[if IE 7]><br />TAK:<br />Featuredetection<br />try {<br />varcanvas = document.createElement("canvas");<br />if(canvas && canvas.getContext && canvas.getContext("2d"))<br /> {<br />// SUPPORTED<br /> } else {<br />// NO SUPPORT<br /> }<br />} catch (Exception e) {<br />// NO SUPPORT<br />}<br />TIP:<br />Featuredetection<br />
  16. 16. TAK:<br /><html><br /> <head><br /> <title>PageTitle</title><br /><link rel="stylesheet" type="text/css" href="mypage.css" /><br /> </head><br /> <body><br /> ...<br /> </body><br /></html><br />NIE:<br /><html><br /> <head><br /> <title>PageTitle</title><br /> <style><br /> .myclass { color: #FF00AA; }<br /> </style><br /> </head><br /> <body><br /> ...<br /> </body><br /></html><br />TIP:<br />Linkuj style w nagłówku<br />
  17. 17. NIE:<br />pozostawiaj komentarzy w kodzie strony<br />/* Kobieta i facet - KiF*/<br />//checkboxy z gustawem i geotargetingiem<br />//wyszarzenie wszystkiego na około<br />//div i tak musi zniknac<br />//gdy myszka jest na divie z miastami ma sie on caly czas wyswietlac<br /><!-- glonews--><br /><!-- pole przechowuje adres, na który przekieruje po poprawnym zalogowaniu --><br /><input id="login_redirect" type="hidden" name="redirect" value="/" /><br />TIP:<br />Usuwaj komentarze w kodzie<br />
  18. 18. <scriptsrc="jquery-1.6.1.min.js" type="text/javascript"></script><br />…<br /><scriptsrc="jquery-1.6.1.min.js" type="text/javascript"></script><br /><imgsrc="Logo.gif" alt="Jakieś logo na strone" id="myLogo" /><br />…<br /><imgsrc="logo.gif" alt="Jakieś logo na strone" id="myLogo" /><br />/danych<br />TIP:<br />Nie powielaj kodu<br />
  19. 19. TIP:<br />Użyj PNG/JPG omijaj GIF<br />
  20. 20. SVG<br />ScalableVectorGraphics<br />Oglądanie strony internetowej zaczyna od podejrzenia źródła.<br />
  21. 21. SVG<br />DEMO<br />
  22. 22. secondHand<br />.setAttribute('transform‚<br /> ,'rotate('+(second / 60 * 360)+‚<br /> ,200<br /> ,200)');<br />secondHand<br />.transform.baseVal<br />.getItem(0)<br />.setRotate((second / 60 * 360),200,200);<br />Serializacja<br />Bezpośredni <br />dostęp<br />TIP:<br />Używaj SVG DOM<br />
  23. 23. <?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Created with Inkscape (http://www.inkscape.org/) --><svgxmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" <br />…<br /><dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <br /> <path style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 286.88332,664.46361 c -0.52155,-3.65088 -0.432,-13.672 -4.04061,-18.18275 -1.78484,-2.23105 -4.40023,-3.73596 -6.06091,-6.06092 -1.75051,-2.45071 -2.54639,-5.46633 -4.04061,-8.08122 -4.432,-7.75599 -6.07654,-7.5263 -12.12183,-16.16244 -4.50371,-6.43386 -7.76548,-13.66851 -12.12183,-20.20305 -1.86778,-2.80166 -4.27632,-5.22586 -6.06092,-8.08122 -6.09137,-9.74619 -2.31156,-5.39363 -6.06091,-14.14213 -2.34522,-5.47216 -6.29711,-13.42723 -10.10153,-18.18275 -1.1899,-1.48737 -2.89775,-2.5168 -4.04061,-4.04061 -0.90351,-1.20468 -1.1168,-2.83593 -2.02031,-4.04061 -1.14285,-1.52381 -2.69374,-2.69374 -4.04061,-4.04061 -2.0203,-2.02031 -3.7752,-4.34663 -6.06091,-6.06092 -1.94248,-1.45686 -3.97883,-2.79136 -6.06092,-4.04061 -1.29125,-0.77475 -2.97581,-0.95551 -4.04061,-2.0203 -1.71693,-1.71693 -2.32368,-4.34399 -4.04061,-6.06092 -1.06479,-1.06479 -2.74935,-1.24555 -4.04061,-2.0203 -2.08208,-1.24925 -3.97883,-2.79136 -6.06091,-4.04061 -1.29125,-0.77475 -2.97582,-0.95551 -4.04061,-2.02031 -1.71693,-1.71693 -2.32368,-4.34398 -4.04061,-6.06091 -1.0648,-1.0648 -2.78767,-1.18501 -4.04061,-2.02031 -2.19281,-1.46187 -5.42954,-7.02893 -6.06092,-8.08122 -0.77475,-1.29125 -1.11679,-2.83593 -2.0203,-4.04061 -1.14286,-1.52381 -3.06062,-2.40729 -4.04061,-4.04061 -1.09567,-1.8261 -0.92464,-4.23481 -2.02031,-6.06091 -0.97999,-1.63332 -2.69374,-2.69374 -4.04061,-4.04061 -0.67343,-0.67344 -1.59439,- …<br />TIP:<br />Uważaj co otrzymujesz z programów<br />
  24. 24. Canvas<br />Oglądanie strony internetowej zaczyna od podejrzenia źródła.<br />
  25. 25. CANVAS<br />DEMO<br />
  26. 26. http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/<br />TIP:<br />Nie wszyscy są tacy sami<br />
  27. 27. ctx.shadowColor= "rgba(0,0,0,1)";<br />ctx.shadowOffsetX= 5;<br />ctx.shadowOffsetY= 5;<br />ctx.shadowBlur= 2;<br />ctx.strokeRect(70,70,160,160);<br />ctx.strokeRect(90,90,120,120);<br />ctx.strokeRect(50,50,200,200);<br />Globalnie<br />ctx.save();<br />ctx.shadowColor= "rgba(0,0,0,1)";<br />ctx.shadowOffsetX= 5;<br />ctx.shadowOffsetY= 5;<br />ctx.shadowBlur= 2;<br />ctx.strokeRect(70,70,160,160);<br />ctx.restore();<br />ctx.strokeRect(90,90,120,120);<br />ctx.strokeRect(50,50,200,200);<br />Zapamiętanie<br />na „stos”<br />Cofnięcie<br />ze „stosu”<br />TIP:<br />Atrybuty w Canvas są globalne<br />
  28. 28. WebSocket<br />Oglądanie strony internetowej zaczyna od podejrzenia źródła.<br />
  29. 29. Server<br />HOW:<br />Odpytywanie - obecnie<br />
  30. 30. Server<br />HOW:<br />Web Socket<br />
  31. 31. WEBSOCKET<br />DEMO<br />
  32. 32. <ul><li>Stale się zmienia
  33. 33. Istnieje też w innych przeglądarkach natywnie*
  34. 34. Brak kompatybilności wstecznej</li></ul>WebSocket :<br />Jeszcze nie jest taki fajny<br />
  35. 35. JavaScript<br />im<br />implementsinterface<br />let<br />packageprivate<br />protected<br />public<br />static<br />yield<br />strict<br />parseInt('09') === 9<br />
  36. 36. JAVA SCRIPT<br />DEMO<br />
  37. 37. NIE:<br /><html><br /> <head><br /> <title>PageTitle</title><br /><scriptsrc="functions.js" ... ></script><br /> </head><br /> <body><br /> ...<br /> </body><br /></html><br />TAK:<br /><html><br /> <head><br /> <title>PageTitle</title><br /> </head><br /> <body><br /> ...<br /> <scriptsrc="functions.js" ... ></script><br /> </body><br /></html><br />TIP:<br />NIE Linkuj JS w nagłówku*<br />
  38. 38. TAK:<br /><html><br /> <head><br /> <title>PageTitle</title><br /><scriptsrc="functions.js" defer=”defer” ... ></script><br /> </head><br /> <body><br /> ...<br /> </body><br /></html><br />TIP:<br />NIE Linkuj JS w nagłówku*<br />
  39. 39. TAK:<br />Używaj TAB zamiast spacji<br />Kompresuj Twoje pliki<br />Usuwaj komentarze<br />TIP:<br />Zmniejsz rozmiar JS<br />
  40. 40. TAK:<br />Document.getElementByID<br />twojKontener.getElementByID<br />Mały DOM<br />TIP:<br />Uważaj jak tworzysz DOM<br />
  41. 41. NIE:<br />…<br /><ul><br /> {{each(index, language) languages}}<br /> <li>${ language.name }</li><br /> {{/each}}<br /></ul><br />…<br /><div data-bind="template: 'langTemplate'"></div><br />TAK:<br />…<br /><scripttype="text/html" id="langTemplate"><br /> <li>${ $data.name }</li><br /></ul><br />…<br /><div data-bind="template: {name:'langTemplate', foreach:languages}"></div><br />TIP:<br />Uważaj jak tworzysz DOM<br />
  42. 42. Podsumowanie<br /><ul><li>Zwróć uwagę jak piszesz kod
  43. 43. Featuredetection !!
  44. 44. Utrzymuj mały DOM
  45. 45. Zwięzłe skrypty, nie powtarzaj się
  46. 46. CSS/JS na zewnątrz w plikach (CACHE)
  47. 47. HTML bez dodatków (NO inside CSS)
  48. 48. Warto zapoznawać się z HTML5
  49. 49. Użyj bibliotek pomocniczych (fallback)
  50. 50. Wiele elementów jest już ’stabilnych’ (IE9+)</li></li></ul><li>Linki<br />http://raphaeljs.com/<br />http://dojotoolkit.org/<br />http://code.google.com/p/svgweb/http://wijmo.com/<br />http://www.modernizr.com/<br />http://jquery.com/<br />http://knockoutjs.com/<br />http://ie.microsoft.com/testdrive/<br />http://html5labs.interoperabilitybridges.com/<br />http://ie.microsoft.com/testdrive/HTML5/CompatInspector/<br />
  51. 51. Pytania ?<br />Web Developer<br />Tomorrow<br />Yesterday<br />Today<br />
  52. 52. Dziękuję za uwagę <br />Goyello<br />Marcin Dembowski<br />marcin.dembowski@gmail.com<br />marcin.dembowski@goyello.com<br />marcindembowski.wordpress.com<br />twitter.com/D3M80L<br />blog.goyello.com<br />twitter.com/goyello<br />facebook.com/goyello<br />Web Developer<br />Tomorrow<br />Yesterday<br />Today<br />

×