waywayway webdesign Groningen http://www.waywayway.nl/bin Webdesign en -toepassingen. Tue, 06 Dec 2011 11:58:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Tien handige jQuery codefragmenten http://www.waywayway.nl/bin/2011/12/tien-handige-jquery-codefragmenten/ http://www.waywayway.nl/bin/2011/12/tien-handige-jquery-codefragmenten/#comments Tue, 06 Dec 2011 11:48:43 +0000 admin http://www.waywayway.nl/bin/?p=448

jQuery is nog steeds dé JavaScript bibliotheek. Inmiddels heeft het bedrijf zich ook op de groeiende markt voor mobiel internet begven en met succes.

Van jQuery codefragmenten kun je er niet genoeg hebben. Hier zijn er tien, via catswhocode.com. Met name relevant: Preloading images en Smooth scrolling to an anchor zijn wel de mooiste. 

Ander nieuws uit het jQuery-kamp: de eerste officiële en stabiele versie van jQuery Mobile is uit, jQuery Mobile 1.0. Populair voor het maken van mobiele websites omdat het zeer eenvoudig te leren is en op de meeste mobiele telefoons websites correct weergeeft (althans de inhoud van de mobiele website).

]]> http://www.waywayway.nl/bin/2011/12/tien-handige-jquery-codefragmenten/feed/ 0 Sencha Touch http://www.waywayway.nl/bin/2011/09/sencha-touch/ http://www.waywayway.nl/bin/2011/09/sencha-touch/#comments Fri, 02 Sep 2011 14:24:53 +0000 admin http://www.waywayway.nl/bin/?p=432 Sencha Touch is een nieuw Framework voor het maken van mobiele websites, die vervolgens kunnen worden omgezet in native apps met behulp van bijvoorbeeld PhoneGap (zie ook een eerder blogbericht hier onder). Sencha Touch maakt gebruik van de bestaande webtechnieken HTML5, CSS3 en JavaScript. Net als zijn ‘concurrent’ jQuery Mobile, momenteel alleen nog als beta te downloaden. Tutorials en alle JavaScript classes voor het werken met Sencha Touch:

Wat is het verschil tussen Sencha Touch en jQuery Mobile en welke oplossing gebruik je wanneer?

Sencha Touch (ST) heeft zijn eigen open source/gratis programmeeromgeving (SDK). Een ST web app maak je 100% door JavaScript te schrijven. In tegenstelling tot jQuery Mobile heeft Sencha Touch uitgebreide JavaScript classes voor het ophalen en plaatselijk opslaan van gegevens en dingen zoals werken met Google Maps. Van Sencha Touch wordt gezegd dat het een snellere en betere gebruikerservaring biedt dan jQuery Mobile – minder vertragingen in animaties. Je kunt met ST een web app maken met behulp van het ontwerppatroon MVC (zie deze tutorial). Handig als je met meerdere mensen aan een web app werkt.

In tegenstelling tot Sencha Touch is jQuery Mobile zeer eenvoudig te leren. jQuery Mobile is niet meer dan een User Interface: alle knoppen, menu’s etc. voor een web app. Ken je HTML, dan maak je in een paar uurtjes een leuke mobiele website. Je schrijft alleen HTML – dus geen JavasScript of CSS – en jQuery Mobile doet de lay-out. Voor het ophalen en verwerken van gegevens en interactie met de gebruiker moet je dan zelf nog aan de slag voor het werken met data en het programmeren van interactie.

Wil je niet meer dan een  simpele mobiele website, zonder teveel interactie of gegevensuitwisseling met bv Google Maps of Twitter, dan is jQuery Mobile de beste keuze. Ben je meer een ontwikkelaar/programmeur dan webdesigner, wil je meer knoppen, tabbladen, formulieren, interactieve kaarten en andere interacties en ben je bereid om eerst een flinke handleiding te lezen, dan is Sencha Touch de beste keuze.

]]> http://www.waywayway.nl/bin/2011/09/sencha-touch/feed/ 0 Mobiele website Waywayway http://www.waywayway.nl/bin/2011/07/mobiele-website-waywayway/ http://www.waywayway.nl/bin/2011/07/mobiele-website-waywayway/#comments Sun, 31 Jul 2011 20:35:01 +0000 admin http://www.waywayway.nl/bin/?p=418 Er is een mobiele versie van deze website waywayway.nl online. De mobiele site put uit dezelfde inhoud als de gewone desktop website. De lay-out en de interface zijn geoptimaliseerd voor smartphones en andere kleine beeldschermen. Ook werkt de mobiele site handig op touchscreens: grote knoppen, grote hyperlinks. Bekijk de site door naar waywayway.nl te navigeren in de browser van je smartphone. Of bezoek de mobiele site hier op je desktopcomputer, maak dan eventueel je browservenster wat smaller voor het smartphonegevoel…

De site is gemaakt met jQuery Mobile en heeft WordPress als content management systeem. Bij het navigeren naar het webadres detecteert Mobile Smart of de bezoeker een mobiel apparaat heeft of een gewone desktopcomputer. Afhankelijk van het apparaat van de gebruiker wordt de desktopversie of de mobiele versie getoond.

]]> http://www.waywayway.nl/bin/2011/07/mobiele-website-waywayway/feed/ 0 jQuery Mobile http://www.waywayway.nl/bin/2011/06/jquery-mobile/ http://www.waywayway.nl/bin/2011/06/jquery-mobile/#comments Sun, 05 Jun 2011 12:35:44 +0000 admin http://www.waywayway.nl/bin/?p=405 Er is steeds meer vraag naar websites en apps voor mobiele telefoons. Met al die verschillende apparaten en schermformaten is het lastig om een website of app te ontwerpen die goed werkt op elke mobiele telefoon. jQuery Mobile heeft daar een oplossing voor. Zij bieden een tamelijk eenvoudige methode om een website of app te maken die het goed doet op verschillende mobiele telefoons.

Een mobiele website maak je met jQuery Mobile, met behulp van bestaande technieken die voor webontwikkelaars bekend zijn: html5, css3 en JavaScript. Websites die met jQuery Mobile zijn gemaakt, werkt ook prima op een gewone pc of laptop. Zie bijvoorbeeld het documentatiegedeelte van de website van jQuery Mobile, deze pagina is geschikt voor mobiele telefoon maar ook voor de pc of laptop. Wil je vervolgens van een jQuery Mobile website een app maken, dan gebruik je PhoneGap. PhoneGap zet je mobiele website om in een van de vele programmeertalen voor mobiele telefoons, volgens PhoneGap “for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more”.

Dit zijn een aantal goede artikelen over het werken met jQuery Mobile:

 

]]> http://www.waywayway.nl/bin/2011/06/jquery-mobile/feed/ 0 WordPress 3.0 http://www.waywayway.nl/bin/2011/03/wordpress-3-0/ http://www.waywayway.nl/bin/2011/03/wordpress-3-0/#comments Wed, 09 Mar 2011 10:08:21 +0000 admin http://www.waywayway.nl/bin/?p=396 Onlangs kwam WordPress 3.1 – bijnaam “Reinhardt” – uit. Dit populaire Content Management Systeem is op een aantal punten verbeterd en aangevuld. Op onextrapixel.com is een korte maar krachtige handleiding geplaatst voor het bouwen van een website in WordPress 3.1.

 

]]> http://www.waywayway.nl/bin/2011/03/wordpress-3-0/feed/ 0 Typekit http://www.waywayway.nl/bin/2011/01/typekit/ http://www.waywayway.nl/bin/2011/01/typekit/#comments Fri, 21 Jan 2011 14:07:35 +0000 admin http://www.waywayway.nl/bin/?p=385 Een trend voor 2011, gesignaleerd op een aantal toonaangevende websites: alternatieve typografie, oftewel gebruik van andere lettertypen dan standaard. (Was ook begin 2010 al een trend… zo snel gaat het blijkbaar ook weer niet met de webtrends.) Hierbij is het gebruik van Typekit sterk in opkomst. Zie bijvoorbeeld ma.tt.

Wat is Typekit? Een internetdienst waarmee je meer vrijheid hebt om verschillende kwalitatief goede lettertypes op een website te gebruiken en dat legaal. Normaliter kunnen webdesigners nog steeds kiezen uit slechts circa dertien ‘web safe’ lettertypen, omdat uitsluitend deze set van lettertypen in de meeste webbrowsers herkend werden en dus precies zo werden weergegeven als de bedoeling was. Typekit heeft een bibliotheek met vele lettertypen. Daar neem je een abonnement op, dat niets kost danwel een paar tientjes per jaar, afhankelijk van het aantal pageviews en de hoeveelheid lettertypen dat je gebruikt.

Het enige nadeel van Typekit is dat elke keer als iemand je website bekijkt, het lettertype van de site van typekit moet worden downgeload. Typekit verzekert echter dat haar dienst nagenoeg 100% online is.

]]> http://www.waywayway.nl/bin/2011/01/typekit/feed/ 0 Website Thema Project en Advies http://www.waywayway.nl/bin/2010/12/website-thema-project-en-advies/ http://www.waywayway.nl/bin/2010/12/website-thema-project-en-advies/#comments Wed, 15 Dec 2010 11:36:43 +0000 admin http://www.waywayway.nl/bin/?p=377 Thema Project en Advies is een adviesbureau voor energie, organisatie en duurzaamheid. Waywayway ontwikkelde voor TPA Adviseurs een nieuwe website. Eisen aan de website: professionele uitstraling, mogelijkheid tot zelf plaatsen van referentieprojecten en nieuws. Tegelijk met de nieuwe website heeft TPA haar huisstijl laten vernieuwen door Pankra.

Technieken: WordPress als CMS, php

]]> http://www.waywayway.nl/bin/2010/12/website-thema-project-en-advies/feed/ 0 Over succesvolle websites http://www.waywayway.nl/bin/2010/11/over-succesvolle-websites/ http://www.waywayway.nl/bin/2010/11/over-succesvolle-websites/#comments Tue, 23 Nov 2010 14:24:20 +0000 admin http://www.waywayway.nl/bin/?p=360 Niek Vugteveen is een internetmarketeer en webdeveloper uit het Noorden van het Land (Coevorden om precies te zijn). Hij heeft een verzameling aangelegd van goede bureaus, blogs, trendwatchers en trendsetters in een RSS-feed. Wederom: een aanrader! Vooral omdat ik zelf helemaal geen tijd heb om dit soort handige verzamelingen aan te leggen.

]]> http://www.waywayway.nl/bin/2010/11/over-succesvolle-websites/feed/ 0 Xhtml versus html5 http://www.waywayway.nl/bin/2010/11/xhtml-versus-html5/ http://www.waywayway.nl/bin/2010/11/xhtml-versus-html5/#comments Mon, 01 Nov 2010 13:48:31 +0000 admin http://www.waywayway.nl/bin/?p=353 Html5 wordt naar verwachting de nieuwe standaard voor het coderen van het world wide web. Moet iedereen nu als de wiedeweerga overschakelen op html5? Nee. Ian Hickson, die de standaard html5 ontwikkelt: echt operationeel wordt html5 naar verwachting pas in 2022 (dan wordt het een zogenaamde W3C Recommendation aldus WikiPedia). Dat duurt dus nog even.

Tot die tijd is er keuze uit meerdere opties voor het coderen van webpagina’s. De mogelijkheden worden duidelijk gemaakt in stripvorm door smashing magazine (klik op de afbeelding hier onder).

 

Voorbeelden van sites die al in html5 zijn gecodeerd zijn er genoeg. Bijvoorbeeld de hoofdpagina van zoekgigant Google. Yahoo gebruikt nog gewoon html 4.01. Een leuke promotiesite met de nodige demonstraties voor html5 is html5rocks.com.

]]> http://www.waywayway.nl/bin/2010/11/xhtml-versus-html5/feed/ 0 Image sprites http://www.waywayway.nl/bin/2010/10/image-sprites/ http://www.waywayway.nl/bin/2010/10/image-sprites/#comments Fri, 29 Oct 2010 14:54:48 +0000 admin http://www.waywayway.nl/bin/?p=323 Een image sprite of sprite image is het gebruik van een enkele afbeelding die uit meerdere kleinere afbeeldingen bestaat. Zie bijvoorbeeld de plaatjes in dit verticale menu op de website van Google:

Deze iconen zijn geen aparte afbeeldingen, maar gedeelten van deze grotere afbeelding:

 

Met behulp van CSS kun je ervoor zorgen dat op de juiste plaats op de webpagina het juiste gedeelte van een sprite image wordt getoond. Bij het ontwerpen van een webpagina is een sprite image erg handig. Je hebt alle afbeeldingen in één bestand. Ook wordt de laadtijd van de webpagina korter, omdat er slechts één afbeelding geladen wordt in plaats van meerdere. Zie ook dit voorbeeld van gebruik van een sprite image in een menu.

Een goede handleiding voor het gebruiken van image sprites is te vinden bij W3Schools.

]]> http://www.waywayway.nl/bin/2010/10/image-sprites/feed/ 0