Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej              GRAF...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejPLAN PREZENTACJI1....
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejOD CZEGO ZACZĄĆ?Ka...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejOD CZEGO ZACZĄĆ?Po...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTNie...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTDla...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTJak...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej  Katedra Informatyki Stosowanej  KROK 1: KONCEP...
Rys 2. Makieta projektu
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPr...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPr...
Rys 4. Grafika poglądowa, połączenie makiety i istniejącego projektu
Rys 5. Projektowanie, etap 1
Rys 6. Projektowanie, etap 2
Rys 7. Projektowanie, etap 3
Rys 8. Projektowanie, etap 4
Rys 9. Projektowanie, etap 5
Rys 10. Projektowanie, etap 6
Rys 11. Projektowanie, etap 7
Rys 12. Projektowanie, etap 8
Rys 13. Projekt
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPr...
Rys 14. Projekt na którym umieszczono tzw. gridy
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTCi...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + ...
Rys 16. Struktura kodu HTML naszej strony
Rys 17. Tak powinna wyglądać nieostylowana strona w przeglądarce
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + ...
Rys 18. Przykładowy arkusz LESS
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + ...
Rys 19. Przykładowy dokument JS
Rys 20. Funkcjonująca strona internetowa
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + ...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Rys 22. Strona internetowa uruchomiona np. w Google Chrome
Rys 23. Strona internetowa uruchomiona w iOS Simulator (iPad)
Rys 24. Strona internetowa uruchomiona w iOS Simulator (iPhone)
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Rys 24. Struktura kodu HTML naszej strony
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Rys 25. Wykorzystanie Media Query w arkuszu LESS
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
/* Smartphones (portrait and landscape) ----------- */  @media only screen  and (min-device-width : 320px)  and (max-devic...
/* iPads (landscape) ----------- */  @media only screen  and (min-device-width : 768px) and (max-device-width : 1024px)  a...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWO...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKIProj...
Rys 28. Projekt z wygenerowanymi przez GuideGuide grid’ami
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKIPiks...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej                  ...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej                  ...
Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej                  ...
Upcoming SlideShare
Loading in …5
×

Webdesign flow. From project to working website

799 views

Published on

Presentation dedicated for speech at AGH-UST about webdesign flow.

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

No Downloads
Views
Total views
799
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webdesign flow. From project to working website

  1. 1. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej GRAFIKA DLA POTRZEB INTERNETU OD PROJEKTU DO STRONY INTERNETOWEJ Mateusz Ziarko Kraków 2012
  2. 2. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejPLAN PREZENTACJI1. Od czego zacząć?2. Krok I: Koncept3. Krok II: Projekt4. Krok III: HTML5 + CSS3 + jQuery5. Responsywny = Nowoczesny6. Dobre praktyki7. Podsumowanie i pytania Kraków 2012 2
  3. 3. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejOD CZEGO ZACZĄĆ?Każdy, nawet początkujący webdesigner powinien:• umieć obsługiwać jakiś program graficzny, w którym można wygenerować grafikę rastrową• wiedzieć jak wygląda kod HTML i w jaki sposób budowane są strony• mieć chociaż trochę wyczucia estetycznego• posiadać oczy Kraków 2012 3
  4. 4. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejOD CZEGO ZACZĄĆ?Polecane programy graficzne:• Adobe Photoshop• Adobe Fireworks• GIMP, dla masochistów ;)Poza tym, możliwe jest to w:• Adobe Illustrator• COREL DRAW Rys 1. Programy z pakietu Adobe Creative Suite źródło: http://veerle-v2.duoh.com Kraków 2012 4
  5. 5. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTNie ma dobrego i przemyślanego projektu bez:• dokładnego wywiadu i zbadania targetu przygotowywanego projektu• rozpoznania istniejącej konkurencji• przygotowania makiety przedprojektowej• konsultacji z klientem Kraków 2012 5
  6. 6. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTDlaczego warto przygotować koncept?• pozwoli nam to uniknąć zmian układu projektowanej aplikacji w późniejszych fazach• daje wstępny pogląd• umożliwia dopasować layout do możliwości back-endu Kraków 2012 6
  7. 7. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK 1: KONCEPTJak budujemy koncept?• obieramy odpowiedni dla nas układ• postępujemy tak jakbyśmy projektowali produkt końcowy, jednak nie nakładamy żadnych efektów ani obrazków• wypełniamy koncept przykładową treścią Rys 2. Makieta projektu Kraków 2012 7
  8. 8. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej Katedra Informatyki Stosowanej KROK 1: KONCEPT Kraków 2012 8Rys 2. Makieta projektu
  9. 9. Rys 2. Makieta projektu
  10. 10. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPrzed rozpoczęciem projektu• należy przemyśleć jakich bazowych kolorów będziemy chcieli użyć• tworzymy paletę kolorów w naszym programie graficznym, aby były one zawsze Rys 3. Paleta kolorów przeznaczona dla projektu pod ręką Kraków 2012 10
  11. 11. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPrzed rozpoczęciem projektu• decydujemy, jaki kolor będą miały nagłówki, odnośniki i wszystkie kluczowe elementy• zbieramy chociażby poglądowe materiały, którymi będziemy w przyszłości wypełniać stronę tj. teksty, obrazki, itd. Rys 4. Grafika poglądowa, połączenie makiety i istniejącego projektu Kraków 2012 11
  12. 12. Rys 4. Grafika poglądowa, połączenie makiety i istniejącego projektu
  13. 13. Rys 5. Projektowanie, etap 1
  14. 14. Rys 6. Projektowanie, etap 2
  15. 15. Rys 7. Projektowanie, etap 3
  16. 16. Rys 8. Projektowanie, etap 4
  17. 17. Rys 9. Projektowanie, etap 5
  18. 18. Rys 10. Projektowanie, etap 6
  19. 19. Rys 11. Projektowanie, etap 7
  20. 20. Rys 12. Projektowanie, etap 8
  21. 21. Rys 13. Projekt
  22. 22. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTPrzygotowanie projektu do cięcia• tak naprawdę odbywa się ono po części jeszcze na etapie konceptu• służą nam do tego tzw. grid’y Rys 14. Projekt na którym umieszczono tzw. gridy Kraków 2012 22
  23. 23. Rys 14. Projekt na którym umieszczono tzw. gridy
  24. 24. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK II: PROJEKTCięcie• kluczem dobrego pocięcia layoutu jest jak najlepsze jego odwzorowanie za pomocą CSS, bez konieczności przygotowywania obrazków• po przeprowadzeniu analizy, do wycięcia konieczne jest: tło, logo, przyciski switchera, logo w stopce Rys 15. Obrazki, które powinniśmy otrzymać w wyniku cięcia Kraków 2012 24
  25. 25. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + CSS3 + JQUERYStruktura kodu HTML• istotną rzeczą jest zbudowanie odpowiedniej struktury kodu HTML• ma w 100% umożliwiać odwzorowanie projektu• zadajemy sobie pytanie, czy strona ma być responsywna? Rys 16. Struktura kodu HTML naszej strony Kraków 2012 25
  26. 26. Rys 16. Struktura kodu HTML naszej strony
  27. 27. Rys 17. Tak powinna wyglądać nieostylowana strona w przeglądarce
  28. 28. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + CSS3 (LESS) + JQUERYPrzygotowanie arkuszy stylów• większość z nas wie jak wygląda poprawnie sformatowany arkusz CSS• dobrym nawykiem jest grupowanie definicji oraz dzielenie arkuszy na mniejsze części funkcjonalne• my zastosowaliśmy składnię języka LESS Rys 18. Przykładowy arkusz LESS Kraków 2012 28
  29. 29. Rys 18. Przykładowy arkusz LESS
  30. 30. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + CSS3 (LESS) + JQUERYSkrypty JavaScript i jQuery• dla poprawienia User Experience (UX), dopiszemy także kilka prostych skryptów z wykorzystaniem biblioteki jQuery• w celu lepszego odwzorowania projektu, wzbogacimy menu strony o kilka animacji• za pomocą JS możemy także obsłużyć responsywność naszej strony Rys 19. Przykładowy dokument JS Kraków 2012 30
  31. 31. Rys 19. Przykładowy dokument JS
  32. 32. Rys 20. Funkcjonująca strona internetowa
  33. 33. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejKROK III: HTML5 + CSS3 (LESS) + JQUERY http://www.webninja.eu/prototypes/responsive-showcase Kraków 2012 33
  34. 34. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNY• responsywność oszczędza czas poświęcony na projekt i wdrożenie mobilnej wersji strony• nie ma konieczności utrzymywania dwóch instancji tych samych informacji• zyskujemy w oczach potencjalnego klienta tym, że jesteśmy na bieżąco z trendami, a on zyskuje nową ‘zabawkę’ Rys 21. Strona uruchomiona w iOS Simulator (iPhone) Kraków 2012 34
  35. 35. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNY W jaki sposób projektować responsywnie? Kraków 2012 35
  36. 36. Rys 22. Strona internetowa uruchomiona np. w Google Chrome
  37. 37. Rys 23. Strona internetowa uruchomiona w iOS Simulator (iPad)
  38. 38. Rys 24. Strona internetowa uruchomiona w iOS Simulator (iPhone)
  39. 39. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYW jaki sposób przygotowywać responsywny kod HTML? Kraków 2012 39
  40. 40. Rys 24. Struktura kodu HTML naszej strony
  41. 41. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNY W jaki sposób przygotowywać responsywny arkusz CSS (LESS)? Kraków 2012 41
  42. 42. Rys 25. Wykorzystanie Media Query w arkuszu LESS
  43. 43. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYCzym są Media Queries?• służą do wyboru medium (urządzenia) na @media screen którym ma być obsługiwany plik CSS lub and (min-width: 800px) and (min-height: 1024px) { dany fragment kodu w pliku       /* Styles */• dzięki nim można określić np. wymiary } urządzenia czy też gęstość pikseli na ekranie Listing 1. Przykład użycia Media Queries• są istotą responsywności Kraków 2012 43
  44. 44. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYJak stosować Media Queries? <link rel="stylesheet" media="screen and (min-width: 800px) and (min-• można zdefiniować medium bezpośrednio height: 1024px)" href="example.css"> przy linkowaniu arkusza CSS w pliku HTML• albo też wpleść w definicje CSS / LESS @media screen and (min-width: 800px) wewnątrz pliku and (min-height: 1024px) {• zdecydowanie polecam tę drugą opcję       /* Styles*/ } Listing 2. Przykład użycia Media Queries Kraków 2012 44
  45. 45. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYJak zbudować własne Media Query? all /*Wszystkie urządzenia*/ braille /*Dotykowe czytniki brailla*/• po pierwsze określamy medium jakie nas embossed /*Drukarka brailla*/ interesuje handheld /*Urządzenia przenośne*/ print /*Drukarki*/ projection /*Projektory*/ screen /*Urządzenia ekranowe*/ speech /*Czytniki, syntezatory mowy*/ tty /*Dalekopisy, terminale, itp.*/ tv /*Telewizory*/ Listing 3. Dostępne typy mediów źródło: http://www.w3.org/TR/CSS21/media.html Kraków 2012 45
  46. 46. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYJak zbudować własne Media Query? width (min/max) height (min/max)• po pierwsze określamy medium jakie nas device-width (min/max) interesuje device-height (min/max) aspect-ratio (np. 16/9)• po drugie określamy jego parametry device-aspect-ratio (np. 16/9) orientation (portrait/landscape) color color-index (min/max, np. 256) monochrome resolution (np. 300dpi) scan (progressive/interlace) grid Listing 4. Dostępne parametry dla mediów źródło: http://www.w3.org/TR/css3-mediaqueries/ Kraków 2012 46
  47. 47. /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } Kraków 2012 47Listing 5. Przykłady Media Queries dla popularnych urządzeń źródło: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  48. 48. /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } Kraków 2012 48Listing 6. Przykłady Media Queries dla popularnych urządzeń źródło: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  49. 49. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejRESPONSYWNY = NOWOCZESNYW czym testować strony responsywne?• urządzenia docelowe• iOS Simulator• Opera Mobile Emulator• Google Chrome Rys 26. Ikona programu iOS Simulator źródło: http://techblog.willshouse.com/ Kraków 2012 49
  50. 50. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKIProjekt• projektujmy używając matematyki, zachowując odpowiednie proporcje nasz projekt będzie bardziej atrakcyjny• pomocne w tym będzie narzędzie GuideGuide Rys 27. Panel rozszerzenia GuideGuide Kraków 2012 50
  51. 51. Rys 28. Projekt z wygenerowanymi przez GuideGuide grid’ami
  52. 52. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKIPiksele czy EM’y?• EM’y są jednostkami miary wykorzystywanymi w typografii i odnoszą się do bazowego rozmiaru czcionki• warto je stosować ponieważ zawsze zachowamy proporcje czcionek kiedy zmienimy rozmiar czcionki elementu <body> http://pxtoem.com/ Kraków 2012 52
  53. 53. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS• jest to język kompilowany do CSS• wprowadza: • bardziej ‘programistyczną’ składnię • namiastkę dziedziczenia • parametry i funkcje • wiele innych feature’ów http://lesscss.org/ Rys 29. Logo języka LESS źródło: http://blog.bulaj.com Kraków 2012 53
  54. 54. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS• może być kompilowany ‘w locie’, bezpośrednio na stronie internetowej• bądź też za pomocą narzędzi stand-alone, które umożliwiają np. auto-kompilację po zapisie czy minimalizację plików Rys 30. Panel programu LESS.app http://incident57.com/less/ Kraków 2012 54
  55. 55. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki StosowanejDOBRE PRAKTYKILESS• może być kompilowany ‘w locie’, bezpośrednio na stronie internetowej• bądź też za pomocą narzędzi stand-alone, które umożliwiają np. auto-kompilację po zapisie czy minimalizację plików Rys 30. Panel programu LESS.app http://crunchapp.net/ Kraków 2012 55
  56. 56. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej Podsumowanie Kraków 2012 56
  57. 57. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej Pytania? Kraków 2012 57
  58. 58. Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii BiomedycznejKatedra Informatyki Stosowanej Dziękuję za uwagę Kraków 2012 58

×