Mukautuvat web-sivut Joni Korpi 01/20. Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20.

Slides:



Advertisements
Samankaltaiset esitykset
esitämme SLIDEPLAYER.FI
Advertisements

MATHM Hypermediajärjestelmät EPiServer.NET-asiakasprojekteissa TTY Timo Lehtonen Jarno Peltoniemi
Tutustu tablettiin (taulutietokone)
Näkövammaiset ja verkkosivustot Virpi Jylhä
Kotisivukoulutus Kirjastotalo Metso Osa 2 Kuvan lisäys ja muokkaaminen.
ENTERPRISE SEARCH Toteutustekniikka Mikko Uusitalo Tampereen ammattikorkeakoulu.
Image Gallery JavaScriptin avulla Juha Konttinen 1.
Avaa selaimeen sivu osoitteesta: Web-sivua varten simpukka-kuvasta tarvitaan neljä erilaista.
Internetin palvelut Matti Meikäläinen. Internet-sivut (WWW) •Internetin suosituin palvelu •Sivujen selailuun tarvitaan WWW-selain –Mozilla Firefox –Internet.
Www-sivuston ja verkkopalvelun rakentaminen Miten tehdä yritykselle www-sivut?
OULU ADVANCED RESEARCH ON SOFTWARE AND INFORMATION SYSTEMS Teppo Räisänen | Oulun yliopisto Facebook API Teppo Räisänen Tietojenkäsittelytieteiden.
1 Heli Lepomäki Yritysten ja muiden organisaatioiden käyttöön sähköinen työpöytä on jo leviämässä, koska niiden toiminta ja asiakaspalvelu.
1 Java-kieleen pohjautuvien ohjelmien käyttökohteita Ohjelmat Appletit JavaBeans JavaScript Java Server Pages (JSP) Java Servletit J2ME, mobiililaitteet.
Kotisivukoulutus Kirjastotalo Metso Osa 1 Tekstin kirjoittaminen ja muokkaaminen, linkitys.
Web-Käyttöliittymä, käytettävyys Asiakas on kuningas, hiiri aseena Jos asiakas ei löydä tuotetta, hän ei osta sitä.
Ohjelmistokehittäminen. Luku 1 – Mitä on ohjelmistokehittäminen?
W w w. h a m k. f i Wiki koulutus Leenakaija Lehto
Älypuhelimet Jaska, Juuso ja Roope. 3. Älypuhelimien määritelmä Älypuhelimien määritelmä Älypuhelimien määritelmä 4. Samsung Galaxy Xcover S5690 Samsung.
14 websuunnitteluvinkkiä!
Visual Studio 2008 ja sovellusten elinkaaren hallinta Matti Antila Jukka Wallasvaara Iikka Paavolainen Microsoft Oy.
Ellit - keskustelut “news-groups” räätälöityjä palveluja
Verkkotaitokoulutus Aloitus. Koulutuksen sisältö Verkonkäytön perustaitoja (3.11.) Tiedonhaku verkossa (10.11.) Työnhaku verkossa (17.11.) Asiointi ja.
HAKUKONEOPTIMOINTI Jaakko Rautiainen. Aihealue Hakukoneiden toiminta Web-sivun optimointi.
Saavutettavuus & Esteettömyys Käytettävyyttä Kaikille
CSS ja sen sovellukset Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia.
 Käytä Internet Explorer-selainta. Valitse selaimeksi Internet Explorer.
Annala Luonnonmukaisen viljelyn keidas Helsingissä
Internet-projekti - MUM2TM Heikki Hietala Jukka Mutikainen TIKO – Malmi
Jouni Mäkeläinen, Twinkle Oy Esteettömyyden huomioiminen palvelujen toteutuksessa.
Älypuhelimet Saarinen, Pehkonen ja Ylikorkala Kesto n. 10min.
Web 2.0 tiivistetysti 1. Ohjelmistoalusta on Web. Webtop korvaa Desktopin. Keskeistä yhteisöllisyys ja ”Software as a Service”. 2. Kollektiivisen älyn.
CSS3 Teppo Räisänen
* Miksi ja kenelle www-sivut halutaan tehdä? * Mitkä ovat tavoitteet? * Kohderyhmän käyttäjien määritely ! SUUNNITTELUN PERUSTEITA.
Koulun sähköpostin uudelleenohjaaminen Andreev Alexandeer.
Toistorakenne Toistorakennetta käytetään ohjelmissa sellaisissa tilanteissa, joissa jotain tiettyä ohjelmassa tapahtuvaa toimenpidekokonaisuutta halutaan.
XHTML ja linkit Inline-elementti Linkki tehdään a-elementillä ja linkin kohde ilmoitetaan href- attribuutilla Absoluuttinen linkki Helian pääsivulle: Siirry.
Tietokannat –kurssi SQL peruskyselyt
WWW-sivuston tekeminen: n SUUUNNITTELE aina ensin:
402T20E Digitaalisen sovellustuotannon työvälineet, 3 op Flash MX –perusteet Ari Vainionpää.
Mi Menetelmä tosiaikaiseen sivustomuokkaukseen Sulake Dynamoid | Strictly confidential – legally protected and privileged information Ilari Tuominen Software.
@ Leena Lahtinen Toistorakenne Ohjelmassa toistetaan tiettyjä toimenpiteitä monta kertaa peräkkäin Toisto noudattaa sille kuuluvia tarkkoja standardoituja.
Teemu Sillantaus KOULUN SÄHKÖPOSTIN UUDELLEEN OHJAUS.
Metatieto ja HTML-dokumentit Markus Virkkala Esa Kaihlanen TJTD63 - Semanttinen Web - 4/2002.
CSS – osa 1 Teppo Räisänen
Toistorakenne Toistorakennetta käytetään ohjelmissa sellaisissa tilanteissa, joissa jotain tiettyä ohjelmassa tapahtuvaa toimenpidekokonaisuutta halutaan.
Viitearkkitehtuurin luonne, käyttötarpeet ja käyttäjät Pekka Linna, CSC.
CSS - aloitus ICT01D – syksy 2005 Mirja Jaakkola, Helia.
Monimedian työkurssi www-teknologioiden rajoitteet Ilmari Laakkonen Huone 6535, päivystys pe 16-17
Monimedian työkurssi www-teknologioiden rajoitteet Ilmari Laakkonen.
MapInfon tiedostot TAB – Tiedosto, jonka avulla tietokanta avataan MapInfossa. Tiedostossa tietoja kentistä ja koordinaattijärjestelmästä. DAT, XLS. TXT.
SharePoint2010 ATK-seminaari Totti Nykvist.
Toistorakenne Toistorakennetta käytetään ohjelmissa sellaisissa tilanteissa, joissa jotain tiettyä ohjelmassa tapahtuvaa toimenpidekokonaisuutta halutaan.
TE3 MEDIA –TERVEYDEN TUKI JA UHKA Hurtig
PK-yrittäjän verkkosivujen laadinnan aakkoset PALVE PALVE – Juha Konttinen.
Sosiaalinen media työelämän viestintäkanavana
Hyvän mielen pelit ry Innovatiivista kuntoutusta mielenterveyskuntoutujille IT- ja media-alan parissa Tommi Gustafsson, hallituksen puheenjohtaja
Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Kiinteälevyinen, ASCII-pohjainen Vain tekstisivuja, 100% leveys Muutamia.
Tyylitiedosto html-koodin apuna
WWW-sivuston ja verkkopalveluiden rakentaminen
YhdistysviestinNÄN MUUTTUVAT KEINOT
Petteri Lillberg TI15SPeli
E-aineistojen saavutettavuus Mitä sisällöntuottajien pitäisi tietää?
www-sivuston ja verkkopalveluiden rakentaminen
Service-etäyhteys ja tukipalvelu
JavaScript – DOM JavaScript objektit
PowerPoint-vinkkejä Jouni Huotari 11/16/2018 Jouni Huotari.
Kuvagalleria Adobe Bridget -ohjelmalla
Mot Mobile Online.
CLT132 Tehtävät (viikko 4).
Google Docs Teppo Räisänen,
Esityksen transkriptio:

Mukautuvat web-sivut Joni Korpi 01/20

Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20

Esitelmän sisältö 1. Vanha kehitystapa 2. Uusi kehitystapa 3. Yhteenveto & parhaat käyttökohteet 4. Resursseja kiinnostuneille 03/20

Vanha tapa Monta erillistä sivustoa 04/20

Zeit Online 05/20

Facebook 06/20

Erilliset sivustot Usein täysin erillinen: HTML, CSS & Javascript Templaattikoodi Paljon työtä Lähinnä raskaille sivuille 07/20

Ongelmia Käyttäjien ohjaus Selainnuuhkiminen Vaatii jatkuvaa ylläpitoa Virhealtista Epäyhtenäisyys 08/20

Uusi tapa Yksi mukautuva sivusto 09/20

Eroja vanhaan Yksi yhtenäinen sivusto Mukautuu selaimen kokoon Ei selainnuuhkimista Ei käyttäjien ohjailua 10/20

CSS3 media queryt Osa CSS3-standardia Ottaa käyttöön tietyn palasen CSS:ää, kun määrätyt ehdot toteutuvat Periaatteessa IF-lauseke Käytetään CSS-tyylien yliajamiseen 11/20

“Jos selaimen leveys on tämä, tee näin.” #sivu {font-size: 16px; color: (min-width: 1280px) { #sivu {font-size: 18px;} } 12/20

“Tämä on mukautuva sivu. Käytä näytön oikeaa leveyttä.” 13/20

Selaintuki Standardi Kaikki paitsi: Internet Explorer 6–8 Vanha Nokia Webkit & Opera Respond.js lisää tuen 14/20

Kaksi tyyppiä Staattinen (static/adaptive) Esim. Information ArchitectsInformation Architects Perinteisempi Venyvä (responsive) Esim. Ethan MarcotteEthan Marcotte Esim. SparkboxSparkbox 15/20

Ongelmia “Kokoteeskentely” Esim. Samsung Galaxy Tab Kehittäjä ei voi tälle mitään Laitevalmistajien ongelma Tiedostokoot ehkä raskaita 3G:lle 16/20

Pohdittavaa Sopiiko sama sisältö kaikille laitteille? Haluaako kännykällä selaaja eri asioita, kuin PC:llä selaaja? Kosketusnäytöt vs. hiiri Erilaiset vaatimukset 17/20

Yhteenveto 18/20

Kertausta Uusi tapa normaaleille sivuille Media queryt: standardeja Korjataan tuki Respond.js:llä Staattinen vs. venyvä Pidetään konteksti mielessä Vanha tapa erikoistapauksissa 19/20

Kiinnostuitko? Googlaa “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com ethanmarcotte.com / 20/20