Download as KEY, PPTX
![Úvod do vývoje pro platformu iOS [ZČU 24.4.2014]](https://cdn.slidesharecdn.com/ss_thumbnails/zcu-prednaska-140424064921-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Smalltalk prakticky [CZ]](https://cdn.slidesharecdn.com/ss_thumbnails/smalltalkprakticky-130316153557-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Prototypování webových aplikací
- 1.
- 2.
- 3.
- 4.
- 5. Co dělám? • Povídámsi s lidma.
- 6. Co dělám? • Povídámsi s lidma. • Čtu, píšu, klikám,
- 7. Co dělám? • Povídámsi s lidma. • Čtu, píšu, klikám, • maluju a kreslím
- 8. Co dělám? • Povídám si s lidma. • Čtu, píšu, klikám, • maluju a kreslím • a vymejšlím hejblátka.
- 9. Co dělám? • Povídám si s lidma. • Čtu, píšu, klikám, • maluju a kreslím • a vymejšlím hejblátka. Říkejme tomu
- 10.
- 11. Co nás čeká •Pojmy
- 12. Co nás čeká •Pojmy • Nástroje
- 13. Co nás čeká •Pojmy • Nástroje • Axure
- 14.
- 15. Prototyp Prototyp je ranýpříklad, nebo model vyrobený kvůli otestování konceptu, procesů, nebo fungování věcí. volně převzato z wikipedie
- 16. Specifikace Detailní a úplnýpopis požadavků a funkcí systému (webu, aplikace, ...), který má být vyvinut. volně převzato z wikipedie
- 17. Flows • Rozhodovací procesy •Logika aplikace
- 18. Skicy • Žádná omezení •Jen to důležité • Hrubá představa • Rychlost
- 19. Wireframy • Digitální forma •Víc detailů, víc obsahu • Názvosloví, texty • Rozložení obsahu • Vizuální priority
- 20. Prototypy • Náhled vprohlížeči • Ukázky interakcí • Dynamika
- 21. Prototypy • Náhled vprohlížeči • Ukázky interakcí • Dynamika • Náhled pro klienta • Možnost testování • Supluje specifikaci
- 23. GUI Blooper GUI: grafickéuživatelské rozhraní. BLOOPER: Pitomost, kiks. volně přeloženo
- 33. Více o blooperech •gui-bloopers.com • bit.ly/guibloop Prototypování mimojiné slouží k předcházení chybám v GUI.
- 34.
- 35. Tužka a papír Podceňovaný,nejrychlejší nástroj, který se vrací do módy po znechucení nepraktickými digi-nástroji. • bit.ly/sketchingUX
- 36. Interactive Sketching Notation JakubLinowski, Wireframes magazine • PDF ke stažení linowski.ca/sketching
- 37. Předtištěné šablony Webové gridy,mobilní zařízení, ... • Například bit.ly/sketchTpl
- 38. Předtištěné šablony Webové gridy,mobilní zařízení, ... • Například bit.ly/sketchTpl
- 39. Tabule, stěna, ... Kdyžse chcete hýbat • Například ideapaint.com
- 40. Knihy o skečování Webovégridy, mobilní zařízení, ...
- 41. Grafické nástroje, diagramy, prezentace,... Když je vaším jediným nástrojem kladivo, všechno pak vypadá jako hřebík.
- 43. Visio + stencils Svéhočasu jediný nástroj, nutné použít stencily • Wireframe shapes bit.ly/visiowf
- 44. Omnigraffle Jen Mac, $200,nutné stencily, iPad verze ($50) • Šablony graffletopia.com
- 45. Flash Catalyst PSD >Flash, součást balíku CS5 • On-line demo bit.ly/catalydeo
- 46. Keynote Mac kancelářský balík,vestavěné iOS efekty • Šablony za peníze keynotopia.com
- 47. On-line kreslítka Módní vlnacloudu a on-line aplikací. Horší použitelnost, omezené funkce, ale snadné sdílení. Většinou v Air.
- 48. Balsamiq mockups $79, wikisyntax, živá komunita, ... • On-line demo bit.ly/balsademo
- 49. iPlotz $15 měsíčně, složitější,task management, ... • On-line demo iplotz.com/app
- 50. HotGloo $14 měsíčně, vestavěnýchat • On-line demo www.hotgloo.com/tour
- 51. HTML prototypy Myslíte, žemáte koule jako 37signals jo? Vývoj funguje jen v kombinaci se skicami.
- 52. 37signals, Getting Real(no spec) Pro interní vývoj, nebo pokud jste rychlí kodéři • Více 37signals.com/svn
- 53. 37signals, Getting Real(no spec) Pro interní vývoj, nebo pokud jste rychlí kodéři • Více 37signals.com/svn
- 54. Draft $10, pro iPad,spolupracuje s Campfire, ... • Více na 37signals.com/draft
- 55. CSS frameworky Efektivita ažs praxí, začátky jsou krušné... • Příklad 960.gs, blueprintcss.org
- 56. Placehold.it Externí zdroj obrázků(on-line) • Příklad placehold.it/600x200
- 57. jQuery Mobile Vydána verze1.0 (odladěná). • Demo bit.ly/dzejkvery
- 58. Sencha Touch Tvůrci Ext.jsa dalších. Vazba na PhoneGap. • Demo bit.ly/snchatch
- 59. Specializované nástroje Programy speciálněpro návrh uživatelských rozhraní, interakcí, atd...
- 60. Axure RP $589, interakce,podmínky, formuláře, SVN, ... • Více na axure.com
- 61. Antetype $289, beta previewz iOS, skinovatelné, vektory, ... • Více na antetype.com
- 62. Pencil Zdarma, plugin doFirefoxu • Více na pencil.evolus.vn
- 63. Microsoft SketchFlow Součást Expressionbalíku • Více na bit.ly/msflow
- 64. Justinmind Prototyper $465, HTMLexport, interakce, načítání dat, ... • Více na justinmind.com
- 65. iOS prototypování Prototypování viOS zařízení.
- 66. imockups $49, pro iPad,... • Více na endloop.ca/imockups
- 67. SketchyPad $5, pro iPad,spolupracuje s Balsamiqem, ... • Více na sketchyapp.com
- 68. Blueprint $20, pro iPad,spolupracuje s Balsamiqem, ... • Více na sketchyapp.com
- 69. Blueprint $20, pro iPad,spolupracuje s Balsamiqem, ... • Více na sketchyapp.com
- 70. App Cooker $20 (zatím),pro iPad, full “managing iOS project” • Více na appcooker.com
- 71. Interface $10, hotové UI,verze pro iPad, Xcode export ... • Více na lesscode.co.nz/interface (video)
- 72.
- 73. Nástroje • Tužka apapír (a další non-digital nástroje)
- 74. Nástroje • Tužka apapír (a další non-digital nástroje) • Grafické a prezentační nástroje atp.
- 75. Nástroje • Tužka apapír (a další non-digital nástroje) • Grafické a prezentační nástroje atp. • On-line kreslítka
- 76. Nástroje • Tužka a papír (a další non-digital nástroje) • Grafické a prezentační nástroje atp. • On-line kreslítka • HTML prototypy
- 77. Nástroje • Tužka a papír (a další non-digital nástroje) • Grafické a prezentační nástroje atp. • On-line kreslítka • HTML prototypy • Specializované nástroje
- 78. Nástroje • Tužka a papír (a další non-digital nástroje) • Grafické a prezentační nástroje atp. • On-line kreslítka • HTML prototypy • Specializované nástroje • iOS apps
- 79.
- 80. Výhody (pro mě) •Rychlé na naučení • Náhled v prohlížeči • Formuláře • Podmínky a validace • Interakce a efekty • Rychlá podpora • Aktivní komunita
- 81. Nepoužívejte Axure! • ...kdyžjste v týmu dva a sedíte u sebe • ...když tvoříte super-hyper-mega-cool-flash-3D web • ...když navrhujete mobilní web nebo aplikaci (???)
- 82. Ke stažení Download trialverze: bit.ly/axurebeta Ukázka funkcí: bit.ly/axdemos Zdroják (*.RP): bit.ly/axdemos2
- 83. Mapa stránek Poznámky Interakce Vlastnosti Widgety Masters Dynamické panely Vlastnosti stránky
- 84. *.rp *.rplib Výstupy
- 85. *.rp *.rplib Výstupy • Prototyp • Widgety • HTML export • Masters, Styly, • PNG export • ... • Specifikace
- 86.
- 87. *.rp • Sitemap +stránky • Masters (header, footer, ...) • Styly • Vazby na *rplib • Struktura poznámek • Nastavení exportu • Výchozí soubor pro práci • Připravené komponenty
- 88. *.rplib • Vlastní widgety •Spousta jich je on-line • Automatické načítání • axure.com/communityLibraries.aspx • totalwireframe.com (za peníze) • volně na webu
- 89. Výstupy • HTML, PNG,*.doc • One-click export • Nastavení generátorů • MS Word šablony • FTP upload HTML :( • http://share.axure.com/
- 90.
Editor's Notes
- #2 \n
- #3 \n
- #4 SYMBIO dělá weby. Microsity, bežné firemní weby, e-shopy, korporátní klienty, backendové systémy pro klienty. \nVšem výstupům předchází prototyp.\n\n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 Stačí tužka a papír. Nepodceňovat! \nNepoužívat u klienta, který na to není zvyklý. Naopak skvělé na brainstorming.\nČasto nepochopitelné bez doprovodného komentáře.\n\n
- #18 Dávejte si do WF reálné texty.\n
- #19 Prohlížeč = kontext.\nInterakce = reálná simulace (ne jen “představte si že...”)\nTestujete už tím, že si proklikáváte prototyp.\n
- #20 \n
- #21 Pokud se při prototypování zaměříme čistě na GUI.\n
- #22 Textové bloopery\n
- #23 \n
- #24 \n
- #25 Interakční bloopery\n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 Jeff Johnson, GUI bloopers, 2007\n
- #32 Gordon Freeman má nejraději páčidlo. \nAle stejně jako páčidlo se hodí jenom na headcraby, na jiné problémy se hodí jiné nástroje.\nKaždý má svoje oblíbené a nedá na ně dopustit.\n
- #33 Vhodné pokud začínáte a nechcete investovat,\nnebo potřebujete výstupy opravdu rychle.\n
- #34 \n
- #35 \n
- #36 \n
- #37 Napkin - vyšlo i v češtině jako “Nápady na ubrousku”\n
- #38 \n
- #39 Grafické nástroje z Adobe rodiny, Diagramové tooly, Prezentace...\nFW umí exportovat klikací HTML\n
- #40 V nové verzi vestavěné WF shapes.\n
- #41 \n
- #42 \n
- #43 Powerpoint pro Mac\n
- #44 Horší použitelnost. Než tužka.\n
- #45 Velmi živá komunita, nehodí se pro rozsáhlejší projekty\n
- #46 \n
- #47 Mají i Solo a Free plan na vyzkoušení.\n
- #48 \n
- #49 http://37signals.com/svn/archives/001050.php\n\n
- #50 Velká míra abstrakce\n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 Rychlé na naučení, HTML export, drag & drop, komunita, support, ...\nMůj oblíbený tool - moje páčidlo.\n\nA tím nástroje končí. Dotazy?\n
- #57 \n
- #58 \n
- #59 Vizualizované vazby mezi stránkami\n
- #60 \n
- #61 \n
- #62 Navrhování iOS aplikací (bez custom designu).\n
- #63 Navrhování iOS aplikací (bez custom designu).\n
- #64 Navrhování iOS aplikací (bez custom designu).\n
- #65 \n
- #66 Navrhování iOS aplikací (bez custom designu). Video představení: http://www.youtube.com/watch?v=SAebrhW3SHg\n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n