1 WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN B2 WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen We...
Afronding vak JQuery, mail(formulieren) en social media Testen
Website-design
5-1-2015
2
AFRONDING VAK
Opleveren site 1) Controleer of je site in dit overzicht staat!: portfolio.io.utwente.nl/webdesign/ 2) Deadline opleveren site: maandag 2-2-2015 9:00u
Terugkoppelings sessies Data: 17, 18 en 19 februari
Website-design
5-1-2015
3
CSS: MOVING TEXT
Voorbeeld bevat ook 2e voorbeeld met '3d flip card'
HTML
Beschrijving - deze beschrijving is niet helemaal zichtbaar. Beweeg je met je muis over de box, dan kan je de hele tekst lezen.
JQUERY GEBRUIKEN “op mijn website staan een aantal kleine afbeeldingen… op het moment dat je boven zo'n afbeelding hovert wordt de afbeelding vergroot weergegeven (preview) aan de rechterkant, op het moment dat er op een kleine afbeelding geklikt wordt opent zich een fotoviewer waar zich de afbeelding in zal tonen (lightbox)” afbeelding wordt hier vergroot weergegeven (preview)
JQUERY GEBRUIKEN css selector: selecteer alles van de class “lightbox” mouseenter-functie: doe iets als de muis het element binnenkomt Html code tussen enkele quotes (blauw)
<script> $('.lightbox').mouseenter(function() { $('#preview').hide(); $('#img_show').html('') $('#preview').fadeIn(1000); }); We gebruiken het attribuut ‘href’ van het huidge element mbv ‘this’ html-functie: verander de html (inhoud) van het element css selector: selecteer element met id “preview”
http://api.jquery.com/html/ Website-design
5-1-2015
6
JQUERY ANIMATIES
Veranderen van vorm, positie, stijl 3 lagen: achtergrond, reset-laag, 4 blokken:
Blokken gecentreerd, positie wordt dynamisch bepaald Klik-in blok: schuiven stylesheet { … }, in blauw
// verplaats blok met id b1 naar hoek: $("#b1").animate({left: 0, top: 0},"slow"); // open (vergroot) huidige (geklikte) blok: $(this).animate({left: 0,top: 0, width: w-bs-bm, height: h-bs-bm},"slow");
JQUERY ANIMATIES: ACCORDION luister naar click-events op kolommen die niet de class 'current‘ hebben $('body').on('click', '#accordion li:not(".current")', function() { $(this).animate({width: "60%"}, function() { $(this).addClass("current"); animeer geklikte item naar 60% breedte en laat inhoud zien $(this).children().fadeIn(); }); $( "#accordion li" ).each(function( i ) { $(this).children().hide(); if ($(this).attr("id")!=clicked) $(this).animate({width: "10%"}); }); });
each: herhaal voor elk list-element in de accordion verberg inhoud
als dit niet het geklikte item is, animeer dan naar 10% breedte
Let op: formulier werkt alleen samen met PHP-script send.php. Download de zip-file email_form.zip!
w3schools: formulieren, AJAX
Voorbeeld: 9 Website-designemail_form 5-1-2015
ZOEKEN OP JE SITE Blz 115
Zoekformulier opmaken
Voorbeeld: Google-zoek formulier rechtsboven Zoeken binnen een pagina: jQuery plugin QuickSearch
Voorbeeld: zoek Zoek voorbeeld, zoekt met Google in utwente.nl/io:
SOCIAL MEDIA
VOORBEELD: FACEBOOK
Like button instellen Login, ga naar ontwikkelaarspagina
jQuery Plugin: Socialcount
http://developers.facebook.com/ Website-design
5-1-2015
11
SOCIAL MEDIA: TWITTER RECENTE TWEETS VAN @FJODORVS
1 Log-in op twitter.com, ga naar Settings > Widgets > Create new 2 Stel opties in, Create Widget 3 Kopieer en plak HTML code in je pagina, Save changes
2
3 Website-design
1/5/2015
12
SOCIAL MEDIA: TWITTER
RECENTE TWEETS OVER #WEBDESIGN
Website-design
1/5/2015
13
TESTEN validator.w3.org Test met meerdere browsers en laat site testen Advies: test op verschillende computers met minimaal Internet Explorer, Firefox en Chrome W3 validator Fouten over ALT-tags van plaatjes zijn minder belangrijk Meeste waarschuwingen kan je negeren Ook stylesheet testen
TESTEN: BROWSER TOOLS Rechter muisknop > Inspect Bekijken en bewerken HTML en CSS
Resultaat en herkomst stijl (Javascript) console Metrics Testen mobiel scherm Laadtijd html en onderdelen
Console: meldingen en fouten scripts
Website-design
5-1-2015
15
TESTEN: BROWSER TOOLS
@media queries laten zien Scherminstellingen
Testen mobiel scherm
Website-design
5-1-2015
16
VOLGENDE WEEK
Meer informatie over afronding van het vak
Wat willen we volgende week van je zien? Een eerste versie van je portfolio website Problemen met FTP-verbinding (uploaden)? Doorloop procedure FAQ. Werkt niet? Mail Fjodor.
Als je (tijdelijk) geen verbinding hebt, kan je wel testen!: Open html bestand op je computer.
