• Save
WebDeveloper - Yesterday, Today, Tomorrow
Upcoming SlideShare
Loading in...5
×
 

WebDeveloper - Yesterday, Today, Tomorrow

on

  • 1,514 views

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

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

Statistics

Views

Total Views
1,514
Views on SlideShare
1,512
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://paper.li 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WebDeveloper - Yesterday, Today, Tomorrow WebDeveloper - Yesterday, Today, Tomorrow Presentation Transcript

  • Web Developer
    Yesterday
    Today
    Tomorrow
    Marcin Dembowski
    .NET Developer @ Goyello
    4 HTML5 Day @ Uniwersytet Gdański 30 V 2011
  • Agenda
    • Zwróć uwagę jak piszesz kod
    • Kto to taki WebDeveloper
    • Jak to robią inni i czemu źle
    • O czym powiemy
    • SVG – na przykładzie zegarka
    • CANVAS – jak on działa
    • WebSocket – jest fajny, ale…
    • JavaScript nie jest taki straszny – Rx/Knockout/MVVM
    • O czym nie powiemy
    • O pozostałych 99%
  • Kim jest WebDeveloper ?
    Znajomość: HTML, CSS, JavaScript, Silverlight, Flash, WebService, MVC, ASP.NET i jakieś inne dziwactwa
    Narzędzia:
    • Edytor (np. notatnik)
    • Sprzęt: np. Laptop
  • Informatyk to…
    Charakterystyka (1 z 1024)
    „Oglądanie strony internetowej zaczyna od podejrzenia źródła.”
  • Jak robią to inni ?
  • TEST
  • 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
  • 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
  • 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
  • <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
  • TIP:
    Użyj PNG/JPG omijaj GIF
  • SVG
    ScalableVectorGraphics
    Oglądanie strony internetowej zaczyna od podejrzenia źródła.
  • SVG
    DEMO
  • 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
  • <?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
  • Canvas
    Oglądanie strony internetowej zaczyna od podejrzenia źródła.
  • CANVAS
    DEMO
  • http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/
    TIP:
    Nie wszyscy są tacy sami
  • 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
  • WebSocket
    Oglądanie strony internetowej zaczyna od podejrzenia źródła.
  • Server
    HOW:
    Odpytywanie - obecnie
  • Server
    HOW:
    Web Socket
  • WEBSOCKET
    DEMO
    • Stale się zmienia
    • Istnieje też w innych przeglądarkach natywnie*
    • Brak kompatybilności wstecznej
    WebSocket :
    Jeszcze nie jest taki fajny
  • JavaScript
    im
    implementsinterface
    let
    packageprivate
    protected
    public
    static
    yield
    strict
    parseInt('09') === 9
  • JAVA SCRIPT
    DEMO
  • 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*
  • TAK:
    <html>
    <head>
    <title>PageTitle</title>
    <scriptsrc="functions.js" defer=”defer” ... ></script>
    </head>
    <body>
    ...
    </body>
    </html>
    TIP:
    NIE Linkuj JS w nagłówku*
  • TAK:
    Używaj TAB zamiast spacji
    Kompresuj Twoje pliki
    Usuwaj komentarze
    TIP:
    Zmniejsz rozmiar JS
  • TAK:
    Document.getElementByID
    twojKontener.getElementByID
    Mały DOM
    TIP:
    Uważaj jak tworzysz DOM
  • 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
  • Podsumowanie
    • Zwróć uwagę jak piszesz kod
    • Featuredetection !!
    • Utrzymuj mały DOM
    • Zwięzłe skrypty, nie powtarzaj się
    • CSS/JS na zewnątrz w plikach (CACHE)
    • HTML bez dodatków (NO inside CSS)
    • Warto zapoznawać się z HTML5
    • Użyj bibliotek pomocniczych (fallback)
    • Wiele elementów jest już ’stabilnych’ (IE9+)
  • Linki
    http://raphaeljs.com/
    http://dojotoolkit.org/
    http://code.google.com/p/svgweb/http://wijmo.com/
    http://www.modernizr.com/
    http://jquery.com/
    http://knockoutjs.com/
    http://ie.microsoft.com/testdrive/
    http://html5labs.interoperabilitybridges.com/
    http://ie.microsoft.com/testdrive/HTML5/CompatInspector/
  • Pytania ?
    Web Developer
    Tomorrow
    Yesterday
    Today
  • 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