WebDeveloper - Yesterday, Today, Tomorrow
•
0 gefällt mir•561 views
Presentation from HTML 5 Day - 5 V 2011 - Gdańsk University, Poland (in Polish)
![Agenda ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (15)
Ähnlich wie WebDeveloper - Yesterday, Today, Tomorrow
Ähnlich wie WebDeveloper - Yesterday, Today, Tomorrow (20)
WebDeveloper - Yesterday, Today, Tomorrow
- 1. Web Developer Yesterday Today Tomorrow Marcin Dembowski .NET Developer @ Goyello 4 HTML5 Day @ Uniwersytet Gdański 30 V 2011
- 3. Kto to taki WebDeveloper
- 4. Jak to robią inni i czemu źle
- 5. O czym powiemy
- 6. SVG – na przykładzie zegarka
- 7. CANVAS – jak on działa
- 8. WebSocket – jest fajny, ale…
- 9. JavaScript nie jest taki straszny – Rx/Knockout/MVVM
- 10. O czym nie powiemy
- 13. Jak robią to inni ?
- 14. TEST
- 15. NIE: Rozpoznawanie poprzez User Agenta if (x.isIE) { … } <!--[if IE 7]> TAK: Featuredetection try { varcanvas = document.createElement("canvas"); if(canvas && canvas.getContext && canvas.getContext("2d")) { // SUPPORTED } else { // NO SUPPORT } } catch (Exception e) { // NO SUPPORT } TIP: Featuredetection
- 16. TAK: <html> <head> <title>PageTitle</title> <link rel="stylesheet" type="text/css" href="mypage.css" /> </head> <body> ... </body> </html> NIE: <html> <head> <title>PageTitle</title> <style> .myclass { color: #FF00AA; } </style> </head> <body> ... </body> </html> TIP: Linkuj style w nagłówku
- 17. NIE: pozostawiaj komentarzy w kodzie strony /* Kobieta i facet - KiF*/ //checkboxy z gustawem i geotargetingiem //wyszarzenie wszystkiego na około //div i tak musi zniknac //gdy myszka jest na divie z miastami ma sie on caly czas wyswietlac <!-- glonews--> <!-- pole przechowuje adres, na który przekieruje po poprawnym zalogowaniu --> <input id="login_redirect" type="hidden" name="redirect" value="/" /> TIP: Usuwaj komentarze w kodzie
- 18. <scriptsrc="jquery-1.6.1.min.js" type="text/javascript"></script> … <scriptsrc="jquery-1.6.1.min.js" type="text/javascript"></script> <imgsrc="Logo.gif" alt="Jakieś logo na strone" id="myLogo" /> … <imgsrc="logo.gif" alt="Jakieś logo na strone" id="myLogo" /> /danych TIP: Nie powielaj kodu
- 19. TIP: Użyj PNG/JPG omijaj GIF
- 20. SVG ScalableVectorGraphics Oglądanie strony internetowej zaczyna od podejrzenia źródła.
- 21. SVG DEMO
- 22. secondHand .setAttribute('transform‚ ,'rotate('+(second / 60 * 360)+‚ ,200 ,200)'); secondHand .transform.baseVal .getItem(0) .setRotate((second / 60 * 360),200,200); Serializacja Bezpośredni dostęp TIP: Używaj SVG DOM
- 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#" … <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <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,- … TIP: Uważaj co otrzymujesz z programów
- 24. Canvas Oglądanie strony internetowej zaczyna od podejrzenia źródła.
- 25. CANVAS DEMO
- 26. http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/ TIP: Nie wszyscy są tacy sami
- 27. ctx.shadowColor= "rgba(0,0,0,1)"; ctx.shadowOffsetX= 5; ctx.shadowOffsetY= 5; ctx.shadowBlur= 2; ctx.strokeRect(70,70,160,160); ctx.strokeRect(90,90,120,120); ctx.strokeRect(50,50,200,200); Globalnie ctx.save(); ctx.shadowColor= "rgba(0,0,0,1)"; ctx.shadowOffsetX= 5; ctx.shadowOffsetY= 5; ctx.shadowBlur= 2; ctx.strokeRect(70,70,160,160); ctx.restore(); ctx.strokeRect(90,90,120,120); ctx.strokeRect(50,50,200,200); Zapamiętanie na „stos” Cofnięcie ze „stosu” TIP: Atrybuty w Canvas są globalne
- 28. WebSocket Oglądanie strony internetowej zaczyna od podejrzenia źródła.
- 29. Server HOW: Odpytywanie - obecnie
- 30. Server HOW: Web Socket
- 31. WEBSOCKET DEMO
- 33. Istnieje też w innych przeglądarkach natywnie*
- 34. Brak kompatybilności wstecznejWebSocket : Jeszcze nie jest taki fajny
- 35. JavaScript im implementsinterface let packageprivate protected public static yield strict parseInt('09') === 9
- 36. JAVA SCRIPT DEMO
- 37. NIE: <html> <head> <title>PageTitle</title> <scriptsrc="functions.js" ... ></script> </head> <body> ... </body> </html> TAK: <html> <head> <title>PageTitle</title> </head> <body> ... <scriptsrc="functions.js" ... ></script> </body> </html> TIP: NIE Linkuj JS w nagłówku*
- 38. TAK: <html> <head> <title>PageTitle</title> <scriptsrc="functions.js" defer=”defer” ... ></script> </head> <body> ... </body> </html> TIP: NIE Linkuj JS w nagłówku*
- 39. TAK: Używaj TAB zamiast spacji Kompresuj Twoje pliki Usuwaj komentarze TIP: Zmniejsz rozmiar JS
- 40. TAK: Document.getElementByID twojKontener.getElementByID Mały DOM TIP: Uważaj jak tworzysz DOM
- 41. NIE: … <ul> {{each(index, language) languages}} <li>${ language.name }</li> {{/each}} </ul> … <div data-bind="template: 'langTemplate'"></div> TAK: … <scripttype="text/html" id="langTemplate"> <li>${ $data.name }</li> </ul> … <div data-bind="template: {name:'langTemplate', foreach:languages}"></div> TIP: Uważaj jak tworzysz DOM
- 45. Zwięzłe skrypty, nie powtarzaj się
- 46. CSS/JS na zewnątrz w plikach (CACHE)
- 47. HTML bez dodatków (NO inside CSS)
- 48. Warto zapoznawać się z HTML5
- 49. Użyj bibliotek pomocniczych (fallback)
- 51. Pytania ? Web Developer Tomorrow Yesterday Today
- 52. Dziękuję za uwagę Goyello Marcin Dembowski marcin.dembowski@gmail.com marcin.dembowski@goyello.com marcindembowski.wordpress.com twitter.com/D3M80L blog.goyello.com twitter.com/goyello facebook.com/goyello Web Developer Tomorrow Yesterday Today