APP DESIGN

Nog wat mogelijkheden

a. Iframe

Om een externe webpagina te openen in je eigen pagina of in je app gebruik je de html tag <iframe>

De html code voor bovenstaande is als volgt:

<iframe width = "100%" height = "200" src = "http://www.werensite.nl"></iframe>

Veel meer over iframes vind je hier.

Let op!

Onderstaande toepassingen voegen heel veel code aan je document. Daarom verdient het aanbeveling de toepassingen eerst uit te proberen op een leeg document en, als je het toepast in je app, deze eerst op te slaan onder een andere naam (bijvoorbeeld indexb.html zodat je altijd weer terug kunt naar het begin.

Er is een duidelijk verschil tussen zelf de code toevoegen of kant en klare code toevoegen. In het laatste geval zet je je app open voor eventuele reclameboodschappen van de oorspronkelijke maker.

Bedenk! Een gratis lunch bestaat niet.

b. de tijd

Het is altijd leuk om de tijd op je app te zetten. Daarvoor zijn heel veel mogelijkheden te vinden, zowel in de vorm van scripts alsmede kant en klare oplossingen. Een paar voorbeelden:

1. script (zet dit tussen de head-tags)

<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>

vervang de body tag door onderstaande tag

<body onload="startTime()">

Zet onderstaande in de html:

<div id="txt"></div>

je kunt deze div nog opmaken met css

voorbeeld staat op pagina 1

2. Kant en klaar

Bijvoorbeeld via deze website

Onderstaande code levert een zwarte digitale klok:

<iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:120px;

height:40px;"src="http://www.clocklink.com/html5embed.php?

clock=004&timezone=Netherlands_Amsterdam&color=black

&size=120&Title=&Message=&Target=&From=2017,1,1,0,0,0&

Color=black"></iframe>

c. Sliders

Een fotopresentatie toevoegen aan je app, doe je met behulp van een slider. Op internet wemelt het van de mobiele sliders.

 

Voorbeeld van onderstaande slider

1. Koppel de javascript bestanden:

Onderstaande code plak je tussen de <head> tags

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

<script src="responsiveslides.js"></script>

Let op!! De twee javascript bestanden moeten in het hoofddirectory van je app staan. Je vindt ze hier: (rechtermuisknop: opslaan als:)

responsiveslides.min.js

responsiveslides.js

2. zet de html tussen de body's

<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>


3. Voeg de CSS toe als apart bestand

slider.css

4. Koppel de slideshow met behulp van onderstaand script

ook dit kan tussen de <head> tags

<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>

5. Instellingen die je kunt aanpassen

In het javascript bestand zitten een aantal instellingen die je kunt aanpassen:

// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically, true or false
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": false, // Boolean: Show pager, true or false
"nav": false, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels

 

d. Navigatie

Een handige toevoeging aan je app is de mogelijkheid om te navigeren.

Ook hier weer een voorbeeld:

1. Koppel de javascript bestanden:

Onderstaande code plak je weer tussen de <head> tags

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

2. voeg de html en het script toe:

<div id="map_canvas"></div>
<h2>Plan uw reis</h2>
<form id="routeform">
City or zipcode:
<input type="text" name="routefrom" id="routefrom"/>
<input type="submit" value="calculate"/>
</form>
<div id="directions"></div>
<script>

$(document).ready(function()
{
initialize();

$('#routeform').submit(function(e)
{
calcRoute();
return false;
});

});

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var home = new google.maps.LatLng(52.655478, 5.064251);

function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();

var myOptions =
{
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: home
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));

var myLatLng = new google.maps.LatLng(52.655478, 5.064251);
var beachMarker = new google.maps.Marker
({
position: myLatLng,
map: map
});
}

function calcRoute()
{
var start = document.getElementById("routefrom").value;

var request =
{
origin:start,
destination:home,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}</script>

3. Voeg nog wat CSS toe:

#map_canvas {
height: 500px;
width: 60%;
margin-top: 2%;
margin-right: auto;
margin-left: auto;
}
#directions {
width:600px;
}

e. Het weer

Het voorbeeld staat hier.

1. HTML

<div id="weather"></div>

2. CSS

het css-bestand staat hier

3. Javascript

het javascript-bestand staat hier

de externe koppeling is deze:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>

Ook hier een kant en klare variant

http://www.accuweather.com/

of

http://yowindow.com/

f. Widgets

Widgets zijn kleine webtoepassingen die zijn geschreven in talen als DHTML en JavaScript en die kunnen worden ingevoegd en uitgevoerd in een webpagina. Webwidgets bieden onder andere een mogelijkheid om het gebruik van een desktop-applicatie na te bootsen op een webpagina.

Veel kant en klare widgets (dingetjes) zijn op deze websites te vinden:

http://www.wolframalpha.com/

of

http://100widgets.com

 

En weer een voorbeeld

Opdracht:

Voeg een aantal van bovenstaande toepassingen toe aan je app.

 

 

 

 

 

 

 

 

 

©jw webdesign