Blog Image

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

Article versus Section

HTML & CSS Posted on 16 jun, 2016 15:10:37

Een groot deel van de vragen die opduiken op forums, StackOverflow
,Twitter , e.d., in verband met HTML5, gaan over het gebruik van “<article>”
of “<section>

Heel vaak is het antwoord “geen van beiden, gebruik <div>“.

Deze twee HTML5 tags, article
of section,
zijn niet zo gemakkelijk
om te gebruiken omdat ze ons dwingen om
na te denken over wat we aan het schrijven zijn en de manier waarop we onze
inhoudgaan presenteren.

We moet nadenken op een manier die we nog niet eerder hadden
bij het opmaken van een HTML-pagina. En terwijl dit een goede zaak, het vereist
wel inspanning.

<div>

Als je gewoon een deel van je site wil stijlen, zonder dat
de ingesloten elementen een structurele link met elkaar hebben, gebruik dan <div> .

<section>

Een sectie is een
generiek deel van een document of toepassing.

Een deel, in deze context, is een thematische groepering van
inhoud, meestal met een titel.

Laten we als voorbeeld een krant nemen.

Een krant is opgedeeld in verschillende secties: een sectie
binnenland, een sectie buitenland, een sport-sectie, cultuur pagina’s ,…. .

Elk van deze secties staan op zichzelf en bestaan uit een
aantal artikels.

<article>

Een article is specifiek deel van een sectie in die zin dat
het een een op zichzelf staand (self-contained) deel van een document, pagina, applicatie of website is.

Dus met behulp van de bovenstaande kranten analogie zal de sport-sectie,
enkel artikels bevatten die over sport gaan maar die volledig op zichzelf staan
(self-contained).

Nesting

Om alles nog wat ingewikkelder te maken mag je “<article>” en “<section>” zoveel nesten als je wil. Voor HTML5 is het
allemaal om het even

Voorbeeld:

<section>

<h1>Sport</h1>

<article>

<h1>Voetbal</h1>

<section>

<h3>Antwerp</h3>

</section>

<section>

<h3>Anderlecht</h3>

</section>

</article>

</section>

Conclusie

“<article>” of
“<section>” dwingen ons om na
te denken over de onderlinge samenhang van de verschillende onderdelen van onze
web-paginas.

Indien er geen hiërarchisch verband is tussen de
verschillende onderdelen kan je werken met enkel secties, met enkel
artikels ofwel gebruik je gewoonweg <div>.



Druk nooit zomaar op akkoord

User eXperience (UX) Posted on 13 jun, 2016 19:05:08

Zaterdag 11 juni 2016 stond het artikel in bijlage in “de tijd”.

Een Noors onderzoeksteam heeft de algemene voorwaarden van enkele populaire apps on der de loep genomen en kwam tot onthutsende conclusies.

Hieronder enkele stukken uit het artikel dat het geheel passend samenvatten.

“De onderzoekers gaven de apps en score van 1 tot 10. Het resultaat oogt triest. 5 van de” 8 apps halen niet eens de helft en zelfs de beste van de klas (LinkedIn) haalt niet eens 7/10.”

“Alhoewel de bedrijven uit de digitale economie miljoenen investeren in eenvoudige interfaces, lappen ze de regels van gebruiksvriendelijkheid aan hun laars als het over de algemene voorwaarden gaat.”

“De onderzochte apps behouden zich het recht voor om uw data voor eeuwig bij te houden”

“Mochten dergelijke voorwaarden van toepassing zijn op telefonie- of televisieabonnementen, dan zouden klanten op internet fora en in de lezersrubriek van de kranten moord en brand schreeuwen. Maar als het om Twitter of Tinder gaat,stelt niemand zich vragen.”



Microsoft betaalt meer dan 23 miljard euro voor LinkedIn

Algemeen Posted on 13 jun, 2016 18:39:58

Zojuist gelezen op “De Redactie”

Microsoft heeft aangekondigd dat het de sociaalnetwerksite LinkedIn overneemt voor 23,2 miljard euro. De website heeft wereldwijd meer dan 400 miljoen gebruikers en wordt omschreven als de netwerksite voor professionals.

Het Amerikaanse technologiebedrijf Microsoft heeft een akkoord bereikt over de overname van de sociaalnetwerksite LinkedIn afgerond. Microsoft betaalt 23,2 miljard euro voor de overname van LinkedIn en daarmee is het meteen ook de grootste overname ooit voor van het concern.

LinkedIn heeft op dit ogenblik 433 miljoen geregistreerde gebruikers, waarvan er meer dan 100 miljoen de site maandelijks bezoeken. Het bedrijf werd in 2003 opgericht als een professioneel sociaal netwerk dat onder meer werkzoekenden en bedrijven met elkaar in contact brengt. In 2011 ging LinkedIn naar de beurs.

Toezichthouders moeten nog groen licht geven



Kwaliteit op het internet

User eXperience (UX) Posted on 07 jun, 2016 18:25:54

De kwaliteit van websites, of meer bepaald het gebrek aan kwaliteit, zorgt de laatste tijd voor heel wat frustraties bij mij thuis.
Verschillende websites die we de laatste tijd raadpleegden, leverden niet de gewenste User eXperience (UX).

We werden geconfronteerd met
– Foutieve contactinformatie
– Verbroken links
– Geen duidelijke “call to action”
– out-datet teksten
– enz. …

Vele sites zien er goed uit, goede lay-out, leuke kleuren combinaties, gepaste grafische informatie en nog van dat leuks. Allemaal items waar we veel informatie over vinden en waar we de nodige aandacht aan besteden.

Maar eens de oppervlakkigheid voorbij, blijken veel van deze web-sites echter niet te doen waar ze voor gemaakt zijn: “communiceren met de surfer/klant”.

Het lijkt wel of voor vele web-projecten het geld op was na de design en de inhoud dan maar snel bijeen geraapt is. Voor kwaliteitscontrole waren er al helemaal geen middelen meer beschikbaar.

Laten we er geen doekjes om winden: een website met slechte en/of foutieve inhoud is waardeloos.

Het is aan ons, web-ontwikkelaars en web-designers, om onze opdrachtgevers aan te sporen om de nodige aandacht en resources te besteden aan de inhoud van hun sites en
de nodige fondsen te voorzien om de inhoud up-to date te houden.

Hoe goed we ons best ook doen om een correcte web-site te bouwen, we worden afgerekend op het geheel, de soms abominabele inhoud inbegrepen.

Niet getalmd, maak er NU werk van.



Waar is PHP 6 gebleven ?

PHP Posted on 05 jun, 2016 18:23:49

Waarom noemt de nieuwe PHP versie “PHP 7.0” , terwijl de laatste versie PHP 5.6 was. Waar is PHP 6 gebleven?
Alhoewel “PHP 6” ooit bestaan heeft werd deze nooit gelanceerd.
De voornaamste bedoeling van PHP 6 was om volledige Unicode support aan te bieden, ook op vlak van de taal zelf. Omdat dit niet mogelijk bleek, werd PHP 6 begraven
De andere features die PHP 6 had moeten hebben werden in PHP 5.3 opgenomen.

Op naar PHP 7



Frameworks of eigen JavaScript code ?

JavaScript Posted on 03 jun, 2016 15:48:20

Is het gebruik van jQuery of Angulair JS een goede zaak ?
Niet altijd. Frameworks hebben een grote overhead aan code en vertragen het inladen van je web-pagina.
Meestal is het veel beter om zelf kleine stukjes JavaScript code te schrijven. dit resulteert in snellere up-load en beter verwerking dmv efficiënter JavaScript code.

Voorbeelden

POP-UP scherm

function popUp(info)

{

window.open(‘../scripts/E_popUp.php?i=’+info,’_blank’,’toolbar=no, scrollbars=yes, resizable=yes, top=300, left=600, width=300, height=300′);

}

AJAX call

function loadXMLDoc()

{

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“info”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”ajax_1.txt”,true);

xmlhttp.send();

}



AJAX eenvoudiger kan het niet

JavaScript Posted on 03 jun, 2016 14:52:11

AJAX –> Asynchroon JavaScript And XML

AJAX was voor mij altijd een wat troebele techniek, nuttig, maar ingewikkeld. Vele boeken over dit onderwerp maakten het mysterie groter zonder de essentie te verklaren.

Hier ga ik proberen om een eenvoudige uitleg te geven over het gebruik van AJAX voor Web-applicaties.

Doel: ververs/verander een deel van je pagina zonder dat je de hele pagina moet inladen.

code

function AJAXFunctie()

{

xmlhttp=new XMLHttpRequest();

setTimeout(function() {xhttp.abort() },40000);

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“naam”).value=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”gemeenteNaam.php?p=”+postcode,true);

xmlhttp.send();

}

HOE WERKT HET


xmlhttp=new XMLHttpRequest();

• Het
XMLHttpRequest object
wordt gebruikt om data uit te wisselen “achter de schermen”

• Dit
maakt het mogelijk om slechts een deel van een pagina aan te passen i.p.v. de
hele pagina terug in te laden

à
xmlhttp.open(“Method”, “URL”,Async);

• Method

– GET

– POST

• URL

– Locatie
op de server

• Async

– True à
Asynchroon

– False
à
synchroon

_ xmlhttp.send(string);

• Verstuurt
het request naar de server

• String
à enkel bij method
“POST”

xmlhttp.open(“GET“,”gemeenteNaam.php?
p=12&a=13”,true);

xmlhttp.send();

xmlhttp.open(“POST“,”gemeenteNaam.php”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/ x-www-form-urlencoded”);

xmlhttp.send(“p=12&a=13”);

à
document.getElementById(“info”).innerHTML=xmlhttp.responseText

responseText

– “response
data” als een string

responseXML

– “response
data” als een XML geformateerde data

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4
&& xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=

xmlhttp.responseText;

}

}

à
onreadystatechange

• We
willen een actie uitvoeren op basis van het antwoord van de server

• Het
onreadystatechange event is triggered elke keer de readyState veranderd

• Het
readyState property geeft de status van thet XMLHttpRequest.

readyState

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response
is ready

status

200:
“OK”

404: Page not
found



Emmet

Brackets Posted on 03 jun, 2016 13:56:19

De Brackets “EMMET” extensie.

Deze extensie maakt het mogelijk om zowel voor HTML (.html) als voor CSS (.css) documenten, “emmet” key-combinaties te gebruiken.
Met deze key-combinaties kunnen repetitieve taken veel efficiënter aangepakt worden.

meer informatie over “emmet” vindt je op http://emmet.io



Brackets

Brackets Posted on 03 jun, 2016 13:48:53

Vanaf dit schooljaar (2015 – 2016) gebruiken we in de opleidingen WEB-ontwikkeling en WEB-Design met het gebruik van de editor “Brackets” (http://brackets.io).
Nu, op het einde van het schooljaar en na veel feedback van cursisten en collega”’s kunnen we enkele besluiten trekken.

“Brackets” is niet de beste editor beschikbaar op dit moment. Soms wordt hij geplaagd door blokkeringen of andere storende pannes, op kleinere schermen is de lay-out niet altijd wat het zijn moet enz, … .

Maar “Brackets” ….
a) is de beste beschikbare allrounder.
b) heeft een vlakke leer-curve.
c) wordt permanent aangepast en verbeterd
d) is modulair aanpasbaar
e) is geschikt voor bijna alle populaire programmeur en mark-up talen.
f) ondersteund verschillende frameworks (Angulair-JS, jQuery, Lavarel, …)
g) wordt ondersteunde door externe apps (Trello, GIT, Dash, …)
h) is open-source

z) is GRATIS

Conclusie: “Brackets” is een levend project dat steeds beter/vollediger wordt en eender goede keuze voor programmeurs, ontwikkelaars, designers, … zowel beginners als gevorderden en professionelen



“Het SQL Leerboek”

Boeken & Cursussen Posted on 20 mei, 2016 17:16:40

ISBN 9789039526552

SQL is nog altijd de belangrijkste taal voor de databasewereld.
Alle bekende databaseservers, zoals MySQL, Microsoft SQL Server, IBM’s DB2 en Oracle, werken met SQL.
Dit boek, dat al meer dan 25 jaar succesvol is, maakt de lezer door middel van honderden voorbeelden stap voor stap vertrouwd met alle aspecten van SQL. Het houdt rekening met de verschillende SQL-dialecten.

Over de inhoud

Aan bod komen het opzetten en raadplegen van tabellen, muteren van gegevens, aanmaken van indexen, optimaliseren van instructies, opzetten van en werken met views, beveiligen van gegevens en applicatieontwikkeling.

Zevende druk

De zevende druk is geheel herzien en geactualiseerd. Er zijn vier nieuwe hoofdstukken toegevoegd over:

– het opslaan, zoeken en bewerken van XML-documenten
– het zoeken in tekst
– het werken met recursieve SQL-instructies
– het definiëren van zogenaamde sequences om unieke nummers te genereren


Extra materiaal

Op de website vind je veel extra materiaal en instructie. Naast een installatiegids, alle codes uit het boek en de antwoorden op de opgaven is aanvullend materiaal beschikbaar over:

– syntaxis van SQL
– scalaire functies
– objectrelationele concepten in SQL
– introductie tot de verzamelingenleer en de logica
– relationele algebra en calculus


Doelgroepen

– studenten web-ontwikkeling en informatica voor het vak databases
– professionals in IT

Over de auteur

Rick F. van der Lans is dé deskundige op het gebied van SQL in de wereld.
Hij is werkzaam als onafhankelijk adviseur, docent en auteur, gespecialiseerd in SQL, databasetechnologie, data warehousing en applicatie-integratie.
Hij is vele jaren lid geweest van de Nederlandse commissie die verantwoordelijk was voor de ISO SQL-standaard.
Hij is auteur van diverse boeken, waarvan enkele in verscheidene talen worden uitgegeven. .



« VorigeVolgende »