Your SlideShare is downloading. ×
0
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
2010 Best Practices pro tvorbu Webových aplikací
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2010 Best Practices pro tvorbu Webových aplikací

1,423

Published on

Best Practices, Tips and Tricks, Tvorba webových aplikací, User Experience, WebDesign, HTML, CSS, JavaScript, Stripes

Best Practices, Tips and Tricks, Tvorba webových aplikací, User Experience, WebDesign, HTML, CSS, JavaScript, Stripes

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

No Downloads
Views
Total Views
1,423
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Copyright © 2007 KOMIX s.r.o. Martin Ptáček , KOMIX s.r.o. Praha Best Practices p ro tvorbu Webových aplikací
  • 2. Obsah prezentace User Experience Webdesign HTML, CSS a JavaScript Stripes Framework Otázky a odpovědi
  • 3.
    • User Experience ( UX )
      • Uživatelský prožitek
      • Kvalita zážitku uživatele při interakci z určitým designem (klika, auto, lednice, webová stránka, aplikace, systém atd.)
      • UX je „konkurenční výhoda“
      • UX Designer
    • http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources /
    • http://konference. dobryweb . cz / ux / cs /
    User Experience Co je User Experience?
  • 4.
    • Pou žitelnost – jednoduchost ovládání
      • Krásnější = Použitelnější ?
    • Design
      • Cílem designu je co nejúčelněji propojit funkční a estetickou složku navrhovaného produktu.
      • Design není jen to jak produkt vypadá ale i to jak funguje.
    • První dojem
      • Estetika, Obal prodává
      • Na vytvoření prvního dojmu na webu stačí méně než 1 vteřina
    • http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources /
    • http://konference. dobryweb . cz / ux / cs /
    User Experience Co ovlivňuje uživatelský požitek?
  • 5.
    • Zaměřte se na uživatele a jeho potřeby
      • Přizpůsobte se cílům uživatele.
    • Usnadněte uživatelům učení
      • Známé, jednoduché UI prvky, konzistentní design a dobrá navigace.
    • Nezdržujte uživatele
    • Sdělujte informace ne data
      • Mluvte k uživatelům srozumitelně ať nemusí dumat nad tím, co jim vlastně chcete sdělit.
    • Testujte na uživatelích
      • Nepřeceňujte vlastní úsudek a testujte na skutečných uživatelích.
    • Doveďte nejdůležitější funkce k dokonalosti
    • http://www. smashingmagazine . com /2010/10/05/ what - is -user- experience -design- overview - tools - and - resources /
    • http://konference. dobryweb . cz / ux / cs /
    User Experience Best Practices
  • 6.
    • Inspirujte se existujícími aplikacemi – Používejte je
      • YouTube, twitter, LinkedIn, Gmail, Facebook ….
      • InvoiceMachine, Fakturoid
      • http://www. tripwiremagazine . com /2010/05/15- best - sites -to- find - useful - online - web -2.0- applications . html
    • Čtěte specializované publikace
      • http://www. smashingmagazine . com /
      • http:// blog .filosof. biz / category / webdesign /
      • http:// designshack .co. uk / articles / css / holiday - wish -list-15- web -design- books - youll - want -for- christmas
    Webdesign Dívejte se kolem sebe
  • 7.
    • Wireframing
      • První a současně jedna z nejdůležitějších částí procesu tvorby designu.
      • Efektivní při komunikaci se zákazníkem.
      • Snadné zapracování změn.
    • Wireframe ( „drátěný model“ )
      • Definuje textový i grafický obsah, rozmístění funkčních prvků, navigaci a ujasňuje funkce.
      • Není grafickým návrhem, nepoužívá barvy !
    Webdesign Navrhujte, kreslete a prototypujte
  • 8.
    • Mockup
      • Zaměřen na vizuální stránku. Obsahuje veškeré grafické prvky, typografii a ostatní prvky stránky.
      • Velmi blízký finálnímu řešení.
      • Většinou v podobě obrázku.
    • Prototype
      • Polofunkční aplikace s uživatelským rozhraním (HTML/CSS).
    • http:// sixrevisions . com /user-interface/ website - wireframing
    • http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/
    Webdesign Navrhujte, kreslete a prototypujte
  • 9.
    • Brainstorming ( „burza nápadů“ )
      • Skupinová technika zaměřená na generování co nejvíce nápadů na dané téma.
    • Pozvěte ty, kteří mají co k danému tématu říci a o jejichž názor stojíte.
    • Pozvěte ty, kteří se navzájem znají.
    Webdesign Provádějte B rainstorming
  • 10.
    • Neotvírejte odkazy do nového okna
      • Uživatel si sám určí jak a kam chce obsah odkazu otevřít.
    • Uživatelé raději scrolují nežli klikají
    • Používejte záložky pro navigaci
    • Využívejte modální okna
    • Komunikujte s uživatelem (Feedback)
      • Feedback Message
        • Dejte najevo uživateli že akce se provedla v pořádku (Growler).
        • Provádějte klientské validace (LiveValidation)
    Webdesign UI Best Practices
  • 11. Webdesign UI Best Practices – Mluvte s uživatelem srozumitelně
  • 12.
    • http://www. smashingmagazine . com /2009/06/23/10- ui -design- patterns - you - should - be - paying - attention -to/
    • Progressive Disclosure
      • Zobrazujte pouze informace významné pro konkrétní akci uživatele. Ostatní informace zobrazujte až na vyžádání.
    • Breadcrumbs
      • Zlepšení/zpřehlednění navigace
    • Steps Left
      • Vícekrokové vyplňování dat (wizard)
    Webdesign UI Best Practices
  • 13.
    • Hover Controls
      • Zobrazujte přípustné akce či operace až po najetí na konkrétní záznam.
    • Clear Primary Action
      • Pokud je více tlačítek u formuláře, vždy dejte uživateli najevo, která akce je ta hlavní (primární).
    • Required Field Marker
      • Označte uživateli povinná pole na formuláři.
    Webdesign UI Best Practices
  • 14.
    • http://www. smashingmagazine . com /2008/12/15/10- useful - techniques -to- improve - your -user-interface- designs /
    • Using contrast to manage focus
      • Méně důležité informace zobrazujte s menším kontrastem.
    • Using color to manage attention
      • Použijte barvy pro zvýraznění chybných, problémových či jinak důležitých informací.
    • White Space indicates relationships
      • Různé použití mezer mezi jednotlivými elementy umožňuje zpřehlednit související informace.
    Webdesign UI Best Practices
  • 15.
    • Minimalizujte složitost UI
      • http://www. smashingmagazine . com /2009/10/07/ minimizing - complexity - in -user- interfaces /
    • Používejte CAPTCHA s rozvahou
      • „ Completely Automated Public Turing test to tell Computers and Human Apart“
      • http:// webdesignledger . com / tips / why - you - should -stop- using - captchas
    • Umožněte uživatelům bookmarkovat vaše stránky
    Webdesign UI Best Practices
  • 16.
    • http://www. smashingmagazine . com /2009/01/19/12- useful - techniques -for- good -user-interface-design- in - web - applications /
    • http://www. smashingmagazine . com /2009/09/24/10- useful - usability - findings - and - guidelines /
      • Most Users Do Scroll
      • Blue is the Best Color for Links
    • http://www. slideshare . net / lukew / web - form -design- best - practices
      • Form Labels Work Best Above Field
    • http://www.h1.cz/kniha-10x10
    Webdesign UI Best Practices
  • 17.
    • Dodržujte strukturu webové aplikace
      • /css
      • /js
      • /images
        • /button
        • /tabs
        • atd…
      • /WEB-INF
        • /template
        • /tld
      • * .jsp
    • Smysluplně pojmenovávejte jednotlivé resources
    HTML, CSS a JavaScript Dodržujte standardní strukturu webové aplikace Neve řejné šablony a includes
  • 18.
    • Používejte správný DocType
      • http://www. klikzone . cz /sekce- html /seznam- html - tagu / doctype . php
    • Dodržujte strukturu stránky
      • http://www. smashingmagazine . com /2009/06/18/10- ways -to- make - your - site - accessible - using - web - standards /
    • Začněte používat HTML5
      • http://www. onextrapixel . com /2010/11/15/ useful -html5- code - snippets - you - can -use- today /
      • http://www. smashingmagazine . com /2010/09/23/html5- the - facts - and - the - myths /
    HTML, CSS a JavaScript HTML Best Practices
  • 19.
    • Omezte použití HTML tag <img>
      • Všechny obrázky definujte jako CSS background
    • Vytvářejte HTML emailové zprávy
      • http://www. vdotmedia . com / blog /9- best - practices -for-email-design/
    • Tvořte webové stránky pro tisk
      • http://www. smashingmagazine . com /2007/02/21/ printing - the - web - solutions - and - techniques /
    • Používejte Firebug a naučte se používat Photoshop
    HTML, CSS a JavaScript HTML Best Practices
  • 20.
    • Pokud to lze používejte vždy relativní odkazy
      • HTML, CSS a JavaScript
      • JSP a Action
    • V případě absolutních odkazů použijte proměnnou definovanou v taglibs.jsp
    • < c:set var = &quot;ctx&quot; value = &quot; ${pageContext.request.contextPath} &quot; />
    • Pozor na mapování kontextů při použití web proxy
      • URL Rewriting Module
    • Pozor tag <stripes:form> generuje absolutn í odkaz
      • Vytvořte vlastní tag
    HTML, CSS a JavaScript Pozor na používání absolutních odkazů
  • 21.
    • Nepoužívejte inline style < div style = &quot;width:20px;&quot; > Text </ div >
    • Zpřehledněte CSS soubory
      • Rozdělte CSS na více souborů – použijte @import
      • Komentujte CSS , Kombinujte pravidla, pou žívejte několikanásobné CSS třídy
      • http:// net . tutsplus . com / tutorials / html - css - techniques /30- css - best - practices -for- beginners /
    • Použijte Reset CSS
      • common.css
      • http:// sixrevisions . com / css / the - history - of - css - resets /
    HTML, CSS a JavaScript CSS Best Practices
  • 22.
    • CSS Framework
      • LESS CSS http:// lesscss . org /
        • http://www. smashingmagazine . com /2010/12/06/ using - the - less - css - preprocessor -for- smarter -style- sheets /
      • SASS http:// sass - lang . com /
    • 100 CSS Tips and Tricks
      • http:// sixrevisions . com / css /100- exceedingly - useful - css - tips - and - tricks /
    HTML, CSS a JavaScript CSS Best Practices
  • 23.
    • Dodržujte základní pravidla pro psaní JavaScript
      • Rozdělte JavaScript na více souborů
      • Komentujte
      • http:// google - styleguide . googlecode . com / svn /trunk/ javascriptguide . xml
    • Použijte JavaScript Framework
      • Prototype
      • JQuery
      • Ext JS
        • Příklady použití Ext JS pro tabulky
    HTML, CSS a JavaScript JavaScript Best Practices
  • 24.
    • Inspirujte se použitými JavaScript knihovnami
      • /WEB-INF/js
      • controllers.js
        • LoggerController (using blackbird.js), IndicatorController (using cvi_busy_lib.js), GrowlerController (using growler.js), FormClearController, CheckBoxController
      • table-controller.js, tabs-controller.js, form-controller.js, carousel.js, autocomplete-controller.js, datepicker.js
      • window-controller.js
      • layoutmanager.js, panedivider.js
      • livevalidation.js, livevalidation-helpers.js ( using jsdate_util.js )
      • tree-navigator-controller.js ( using xdhtmltree.js )
    HTML, CSS a JavaScript JavaScript Best Practices
  • 25.
    • Minimalizujte počet HTTP requestů
      • Pack CSS, Pack JavaScript, Compress
      • Použijte Web Resource Optimizer for Java (wro4j)
        • Merge, Pack, CSS Variable, LessCSS framework support …
        • http:// code . google . com /p/wro4j
    • Použijte techniku CSS Sprites
      • http:// css - tricks . com / css - sprites /
    HTML, CSS a JavaScript Optimalizujte
  • 26.
    • Zak ázání použití cache pro JSP a Action
      • web.filter.DefaultFilter
      • response.setHeader( &quot;Cache-Control&quot; , &quot;no-cache, no-store&quot; ); //HTTP 1. 1
      • response.setHeader( &quot;Pragma&quot; , &quot;no-cache&quot; ); //HTTP 1.0
      • response.setDateHeader( &quot;Expires&quot; , 0);
    • Definice cache pro CSS , JavaScript a Images
      • web.filter.CacheFilter
      • response.setHeader( &quot;Cache-Control&quot; ,
      • &quot;post-check=3600, pre-check=43200, max-age=14400, must-revalidate&quot; ); //HTTP 1. 1
      • response.setHeader( &quot;Pragma&quot; , &quot;&quot; ); //HTTP 1.0
      • response.setDateHeader( &quot;Expires&quot; , new Date().getTime() + 14400 * 1000);
    • http://www. jakpsatweb . cz / clanky / caching - tutorial - czech - translation . html
    Stripes Používejte Filtry pro nastavení HTTP hlaviček
  • 27.
    • package web.extensions
      • ActionContextImpl.java
      • ActionResolutionImpl .java
      • ConverterFactoryImpl .java , FormatterFactoryImpl .java
        • DateConverter .java
        • DoubleConverter .java
        • DateFormatter .java
      • LocalePickerImpl .java
      • LocalizationBundleFactoryImpl .java
      • InvocationInterceptor .java
      • ExceptionHandlerImpl .java
    Stripes Vytv ářejte vlastní Extensions
  • 28.
    • package web.helper.resolution
      • DocumentResolution.java
      • JsonResolution .java
      • XMLResolution.java
      • CloseWindowResolution.java
      • AutocompleteResultResolution.java
    Stripes Vytv ářejte vlastní implementace Resolution
  • 29.
    • Standardní
      • Definition:
        • <%@ taglib prefix = &quot;c&quot; uri = &quot;http://java.sun.com/jsp/jstl/core&quot; %>
    • <%@ taglib prefix = &quot;fmt&quot; uri = &quot;http://java.sun.com/jsp/jstl/fmt&quot; %>
    • ...
    • Vlastní
      • ElFunctions.java
      • WEB-INF/tld/app.tld
      • Definition:
    • <%@ taglib prefix = &quot;app&quot; uri = &quot;/WEB-INF/tld/app.tld&quot; %>
      • Using:
        • ${ app :isDueDate( record.date )}
    Stripes Používejte Tag Library
  • 30.
    • WEB-INF/template/value/PoznamkaValue.jsp
    • <%@ page language = &quot;java&quot; contentType = &quot;text/html; charset=utf-8&quot; pageEncoding = &quot;utf-8&quot; %>
    • <%@ include file = &quot;/WEB-INF/template/taglibs.jsp&quot; %>
    • <%--
    • Poznamka Value
    • [value]
    • --%>
    • < stripes:layout-definition >
    • < c:if test = &quot; ${ not empty value} &quot; >
    • < span class = &quot;cvalue yellow&quot; title = &quot; ${value} &quot; >< b > A </ b ></ span >
    • </ c:if >
    • </ stripes:layout-definition >
    Stripes Používejte šablony Pojmenování a umístění Popis šablony
  • 31.
    • Používejte tag < stripes:format > pro formátování hodnot
      • Používá definované Formatter třídy
      • WEB-INF/component/dueDate.jsp
      • < stripes:layout-definition >
      • < c:choose >
      • < c:when test = &quot; ${! empty value && visible == true && projectx:isDueDate(value)} &quot; >
      • < span class = &quot;cvalue red&quot; >
      • < stripes:format value = &quot; ${value} &quot; />
      • </ span >
      • </ c:when >
      • < c:otherwise >
      • < stripes:format value = &quot; ${value} &quot; />
      • </ c:otherwise >
      • </ c:choose >
      • </ stripes:layout-definition >
    Stripes Používejte tag <stripes:format>
  • 32.
    • 404.jsp , 500.jsp a 401.jsp
      • < error-page >
      • < error-code > 404 </ error-code >
      • < location > /404.jsp </ location >
      • </ error-page >
      • Implementujte vlastní ExceptionHandlerImpl.java
        • V případě neodchycené výjimky směruje na 500.jsp
    Stripes Implementujte vlastní chybové stránky
  • 33.
    • Nepoužívejte anotaci @Session
    • Vytvo řte jedno místo, které bude vstupem pro získávání všech hodnot uchovávaných v Session
      • Vlastní implementace ActionContext Impl
      • public SessionAttrs getSessionAttrs() {
      • SessionAttrs attrs = (SessionAttrs) getRequest().getSession()
      • .getAttribute( &quot;sessionAttrs&quot; );
      • if (attrs == null ) {
      • //create and set default values
      • attrs = new SessionAttrs();
      • getRequest().getSession().setAttribute( &quot;sessionAttrs&quot; , attrs);
      • }
      • return attrs;
      • }
    Stripes Best practices pro použití HTTPSession
  • 34.
    • Umožněte uživatelům používat Back v prohlížeči
      • Používejte RedirectResolution po odeslání formuláře
    • Využívejte JSON (JavaScript Object Notation)
      • http://www. json . org / json - cz . html
      • Odlehčený formát pro výměnu dat
    Stripes Další principy
  • 35. Otázky a odpovědi
    • Otázky ?
  • 36. Děkuji za vaši pozornost Martin Ptáček [email_address] +420 225 989 981 KOMIX s.r.o. Holubova 1, 150 00 Praha 5 www.komix.cz

×