VIZID blogt

Het VIZID team gebruikt de blog als voornaamste communicatiemiddel voor nieuws over VIZID en de hostingsector, het delen van tips en hints, en de bespreking van ontwikkelingen van onze service.

Posted on 8 augustus 2011 by Jan

Upgrade RAM-geheugen

De voorbije nacht hebben we de servers van VIZID een upgrade gegeven waardoor er nu dubbel zoveel RAM ter beschikking is voor de gebruikers. Door extra RAM toe te voegen blijven we de performance van onze webhosting centraal zetten: een groter aantal bezoekers kunnen nu meer handelingen uitvoeren zonder dat de snelheid er onder gaat lijden.

Bestaande klanten die door deze upgrade mogelijke problemen ondervinden (zoals compatibiliteitsproblemen) kunnen ons contacteren zodat we samen naar een oplossing kunnen zoeken.

Posted in VIZID diensten | Tagged , , , | Leave a comment

Posted on 16 april 2011 by Christoph

De structuur van een HTML pagina

In dit blogbericht worden de noodzakelijke elementen van een HTML pagina kort besproken. In verdere blogposts gaan we dieper in op elk element.

De structuur (voorbeeld)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>De structuur van een html pagina</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”Korte beschrijving van de structuur van een html pagina” />
<meta name=”keywords” content=”html, structuur” />
<link rel=”stylesheet” type=”text/css” href=”stijl.css” />
</head>
<body>
Hier komt de inhoud
</body>
</html>

Toelichting

Elke html pagina heeft een bepaalde structuur die de webdesigner in acht moet nemen.

1) Om te beginnen start men met het definiëren van het Doctype

Een doctype wordt geplaatst voor de <html> tag en bepaalt hoe de browser het document zal interpreteren. Het doctype verwijst naar een bestand met DTD-extensie, dit is een definiëring van het document type. In dit document werd geopteerd voor XHTML 1.0 Strict.

2) Na het doctype begint de html structuur, doordat de <html> tag geopend wordt. Elke tag (niet enkel de html tag, ook alle andere tags) die men opent dient ook gesloten te worden door een ‘slash’ (= /) te plaatsen (na het < teken). Alles wat zich tussen <html> en </html> bevindt zal de structuur en layout van de website bepalen. Naast het belang van het correct openen en sluiten van de tags is er ook een bepaalde volgorde van de tags die men dient te respecteren.

3) Binnen de html tags start men eerst met de <head></head> tags.
3.1) In deze sectie kan men de titel van de pagina bepalen die in de hoofding van de browser komt (de titel bevindt zich tussen de <title></title> tags).

3.2) Vervolgens kan men met een aantal metatags specifieke metadata doorgeven.
Metatags hebben als doel om (verborgen) informatie toe te voegen over de content van een website. Zo kan men onder andere een aantal sleutelwoorden (binnen de tag <meta name=”keywords” content=”" /> )  toevoegen of kan men een korte beschrijving koppelen aan de website (binnen de tag <meta name=”description” content=”" /> ). Deze informatie bepaalt hoe zoekmachines uw website zullen weergeven. Daarnaast kan men ook noodzakelijke informatie meegeven betreffende de charset, met andere woorden: welk type karakters dient de browser te consulteren? Dit is van groot belang wanneer de website in verschillende talen wordt gepubliceerd, dan dient men de charset van de respectievelijke taal toe te voegen. In dit geval hanteerden we utf-8. Dit is de compacte versie voor weergave van westerse talen. Zie <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />.

3.3) Ten slotte kan men ook nog links leggen naar specifieke bestanden, zoals css. Css kan binnen dezelfde pagina worden geplaatst tussen <style></style> tags of men kan linken naar een apart css bestand. Het nut van een apart css bestand is de eenvoud om op een efficiënte en snelle wijze de layout aan te passen, zeker als het gaat om een omvangrijke website. Dit doet men adhv volgende code:
<link rel=”stylesheet” type=”text/css” href=”stijl.css” />

Men kan uiteraard ook linken naar andere bestanden zoals script bestanden.
Dit doet men door middel van de script tag: <script type=”text/javascript” src=”script.js”></script>.

4) Na de head sectie komt de <body> sectie. Hier wordt de effectieve inhoud van de webpagina geplaatst.Uiteraard mag men niet vergeten om de body tag te sluiten (zie </body> )  en nadien ook de html tag (zie </html> ).

Posted in Webdesign | Leave a comment

Posted on 19 maart 2011 by Jan

Onbeperkt aantal domeinnamen

1 van de grote voordelen van VIZID is dat elk pakket compleet is, met alle opties. De enige (logische) beperking is dus de schijfruimte en daaraan gelinkt het dataverkeer.

Je kan maw gemakkelijk & onbeperkt domeinnamen toevoegen aan je VIZID-webhostingpakket, en dit in enkele eenvoudige stappen:

  • log in op cPanel
  • klik door naar Addon-domeinen
  • voeg het domein toe, waarbij je aangeeft naar welke map je de domeinnaam wil verwijzen
    • de hoofdmap (public_html/): hiermee ga je de domein als “mirror” instellen van je hoofddomeinnaam zodat je die site kan bezoeken via beide domeinnamen
    • in een submap (public_html/submap/): op deze manier voeg je de domeinnaam toe als nieuwe site. In de submap plaats je dan de bestanden voor die nieuwe site die onafhankelijk kan staan van de hoofddomeinnaam en hoofdsite van je webhostingpakket

Extra domeinnamen kan je zowel van buitenuit naar de VIZID-server richten via nameservers (ns1.vizid.eu en ns2.vizid.eu), of je kan ook via VIZID domeinnamen registreren of transferen waarbij je slechts €10 per jaar betaalt (incl. btw).

Onbeperkt aantal domeinnamen? Ja, maar vergeet niet dat deze domeinnamen gelinkt moeten zijn aan 1 organisatie of 1 particulier. In het voorbeeld van een webdesigner is het dus niet toegelaten meerdere klanten op je eigen pakket te hosten. Elke klant moet dan effectief een eigen webhostingpakket hebben. Weliswaar kan er in bepaalde situaties worden afgeweken: iemand die voor 2 vzw’s vrijwillig de websites maakt en onderhoudt mag deze wel bundelen op 1 pakket (zolang de vzw’s gezamelijk niet meer dan de totale hostingkost betalen). Aarzel je onder welke voorwaarden jouw situatie valt? Stuur ons een mail en we bekijken samen de ideale setup.

Zo, we hopen dat deze blogpost je extra inspiratie kan geven om je nieuwe project(en) een eigen domeinnaam te schenken, zonder direct €24 extra hostingkosten te moeten betalen. Elke dag worden er 600+ .be-domeinnamen geregistreerd (?), dus wees er vroeg genoeg bij en registreer je ideale domeinnaam.

Posted in Domeinnamen, VIZID diensten | Tagged , , , , , , , , | Leave a comment

Posted on 13 maart 2011 by Jeremy

8 nuttige jQuery plugins

Ontdek met ons de eerst selectie van onze favoriete plugins en tools. We beginnen met jQuery omdat we hopen dat jullie even tevreden als ons zullen zijn om op eenvoudige manier jullie site dat professioneel tintje te kunnen geven. Al het lastige programmeer- en detailwerk verdwijnt dankzij deze elegante oplossing. Lees meer over jQuery op de officiële site.

Form: jQuery Validation

Deze plugin is de meest gebruikte “form validator” verkrijgbaar. De basisfuncties zijn zeer gemakkelijk in gebruik, maar je kan ook eindeloos uitbreiden door zelf je foutmeldingen in te stellen, de locatie van de meldingen aan te passen, enz. Implementatie is zo eenvoudig als aangeven dat een bepaald input-veld “required email” is (deze 2 woorden plaats je dan in de class).
Het is tot slot ook 1 van de weinige plugins die worden gehost op een CDN (content delivery network), namelijk dat van Microsoft, hoewel het gebruik hiervan geen essentie is (slechts 14kb).

Form: Ajax Suggest

Deze Japanse plugin is zeer eenvoudig in gebruik: met slechts een paar regeltjes code kan je suggesties geven zoals Google Search aangeven uit welke MySQL tables termen kunnen worden opgehaald, om vervolgens bij het typen een continue link te hebben binnen deze tables.
Geschikt gebruik: een zoekfunctie voor producten.

Afbeeldingen: Fancybox

Deze jquery plugin is een tool om beelden, multimedia of html inhoud op een ‘Apple’ wijze weer te geven in een “lightbox” bovenop u webpagina.

Afbeeldingen: jQuery Orbit Image Slider

Deze image slider is waarschijnlijk een van de meest elegante manieren om uw website in enkele beelden te illustreren.

Layout: Contactable

Contactable is weer een van die elegante jquery plugins dat die professionele afwerking geeft aan u site. Deze plugin laat u toe om een uitklapbare contactform in te werken voor u gebruikers. Hoewel de code voor het verzenden van de e-mail niet is opgenomen in deze plugin blijft hij een must have.

Layout: Fancy Sliding Form

Fancy Sliding Form geeft net als Contactable de soort layout die je op élke site wil tegenkomen. Het is 100% intuïtief, biedt vele mogelijkheden (het hoeft geen form te zijn), en zal je bezoekers sowieso een extra motivatie geven om alles te bekijken / het formulier in te vullen. De code is iets omslachtiger, maar je krijgt er dan ook veel voor in de plaats.

Algemeen: TipTip jQuery tooltips

Heb je al ooit gezocht om op een eenvoudige manier tooltips weer te geven op je website? Tiptip is het antwoord. Met zijn 3,5kb en zijn elegante doch eenvoudige integratie is Tiptip het toonvoorbeeld van de betere plugin. Efficient, duidelijk, eenvoudig en een lichtgewicht.

Algemeen: jQuery Table Sorter

Misschien wel de meest eenvoudige plugin van onze selectie, maar wel een essentie als je veel en uitgebreid met tables wil werken. Deze plugin sorteert je tabellen zodat je bv een overzicht van je recente posts op rating en op postdatum kan sorteren.

Posted in jQuery | Tagged , , , , , , , , , , , , , | Leave a comment

Posted on 7 maart 2011 by Jan

IE6 Countdown

Onze VIZID-site heeft lange tijd geen ondersteuning geboden voor Internet Explorer 6. De browser was al aan zijn 9e verjaardag toen we ons huidig design maakten (in 2008) en toen reeds zagen we weinig nood om speciaal alle kinken uit de kabel te proberen krijgen voor de enkele IE6-gebruikers die onze site bezochten. Recent hebben we echter onze broncode eens opgefrist en zien we dat de site nu toch terug voor IE6-gebruikers bruikbaar zou moeten zijn..

Maar blijkbaar heeft nu ook Microsoft zelf het licht gezien. Ze lanceerden namelijk deze zeer propere en (hopelijk toch) IE6-compatibele site: http://ie6countdown.com/

Hier zie je duidelijk in welke landen er nog veel gebruik wordt gemaakt van Internet Explorer 6, en waarom je moet overschakelen op een nieuwere browser. België scoort met 3.1% iets boven het gemiddelde van soortgelijke landen, maar het kan zeker niet op tegen het fenomenaal hoge cijfer in China: 34.5%! (cijfers februari 2011)

Voor alle webdesigners en -ontwikkelaars is deze site duidelijk goed nieuws. Ook Microsoft heeft het gesnopen, en we zijn eindelijk vrij om zonder zorgen te focussen op het creëren voor mooie functionele websites, zonder continu naar die compatibiliteit te moeten kijken.

Nu is het uitkijken naar een vlotte introductie van HTML5 om ook die stap richting een eenvoudiger en beter internet te zien op gang komen.

Lees meer over de geschiedenis van Internet Explorer en HTML5:

Plaats de banner op je site: (enkel zichtbaar voor IE6-gebruikers)
Tip: je kan ook linken naar een andere site dan die van Internet Explorer als je bv. meer fan bent van Firefox, Chrome, Safari of Opera.

<!–[if lt IE 7]> <div style=’ clear: both; height: 59px; padding:0 0 0 15px; position: relative;’><a href=”http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode”><img src=”http://www.theie6countdown.com/images/upgrade.jpg” border=”0″ height=”42″ width=”820″ alt=”" /></a></div> <![endif]–>
Posted in Browsers | Tagged , , , , , , , , , | Leave a comment

Posted on 18 juli 2009 by Jan

HTML Entities: codeer je tekst voor een perfecte weergave

In het Nederlands en tal van andere talen zijn er verschillende tekens die in de browser vaak slecht weergegeven worden. Daarom kan je beste je tekst coderen dmv HTML entiteiten.

Algemeen: hoofdletters en kleine letters

Heel vaak is het mogelijk de (eerste) letter gewoon te veranderen om ofwel een hoofdletter ofwel een kleine letter te verkrijgen:

  • È ⇔ &Egrave;

  • è ⇔ &egrave;

  • Α ⇔ &Alpha;

  • α ⇔ &alpha;

Algemeen: links & rechts, omhoog & naar beneden, kleiner & groter dan

Links wordt steeds aangeduid door de letter l, rechts door de letter r, voorbeeld:

  • ← ⇔ &larr;

  • → ⇔ &rarr;

Dit kan ook gebruikt worden voor omhoog (u – up) en naar beneden (d – down):

  • ↑ ⇔ &uarr;

  • ↓ ⇔ &darr;

Net hetzelfde geldt bij kleiner dan (l-lower) en groter dan (g-greater):

  • < ⇔ &lt;

  • > ⇔ &gt;

Veelgebruikt

  • De      spatie:   ⇔ &nbsp;

  • Ampersand: & ⇔ &amp;

  • Aanhalingsteken (boven): ” ⇔ &quot;

  • Aanhalingsteken (onder): „ ⇔ &bdquo;

  • Nummering: # ⇔ &#35;

  • Apostroof: ‘ ⇔ &#39;

  • Schuine streep: / ⇔ &#47;

  • Backslash: \ ⇔ &#92;

Accent aigu ( ´ , streepje naar boven, kuut)

Combinatie: & + letter + acute;

  • á ⇔ &aacute;

  • é ⇔ &eacute;

  • í ⇔ &iacute;

  • ó ⇔ &oacute;

  • ú ⇔ &uacute;

  • ý ⇔ &yacute;

Accent grave (streepje naar beneden, Backtick, graaf)

Combinatie: & + letter + grave;

  • à ⇔ &agrave;

  • è ⇔ &egrave;

  • ì ⇔ &igrave;

  • ò ⇔ &ograve;

  • ù ⇔ &ugrave;

Accent circonflexe ( ˆ , circumflex, dakje)

In het Nederlands enkel mogelijk op de e.
Combinatie: & + letter + circ;

  • â ⇔ &acirc;

  • ê ⇔ &ecirc;

  • î ⇔ &icirc;

  • ô ⇔ &ocirc;

  • û ⇔ &ucirc;

Umlaut / Trema ( ¨ , deelteken, twee stipjes)

Umlaut is in schrijftaal 2 streepjes. In druk wordt dit echter 2 stipjes, net als het trema.
Combinatie: & + letter + uml;

  • ä ⇔ &auml;

  • ë ⇔ &euml;

  • ï ⇔ &iuml;

  • ö ⇔ &ouml;

  • ü ⇔ &uuml;

  • ÿ ⇔ &yuml;

Cedille ( ¸ )

Enkel mogelijk voor c cedille ( ç )
Combinatie: & + c + cedil;

Grieks alfabet

Combinatie: & + Engelse naam + ;

  • α ⇔ &alpha; (Α ⇔ &Alpha;)

  • β ⇔ &beta;

  • γ ⇔ &gamma;

  • δ ⇔ &delta;

  • ε ⇔ &epsilon;

  • ζ ⇔ &zeta;

  • η ⇔ &eta;

  • θ ⇔ &theta;

  • ι ⇔ &iota;

  • κ ⇔ &kappa;

  • λ ⇔ &lambda;

  • μ ⇔ &mu;

  • ν ⇔ &nu;

  • ξ ⇔ &xi;

  • ο ⇔ &omicron;

  • π ⇔ &pi;

  • ρ ⇔ &rho;

  • σ ⇔ &sigma;

  • τ ⇔ &tau;

  • υ ⇔ &upsilon;

  • φ ⇔ &phi;

  • χ ⇔ &chi;

  • ψ ⇔ &psi;

  • ω ⇔ &omega;

Wiskundige tekens

  • ∠ ⇔ &ang;

  • ≈ ⇔ &asymp;

  • ∩ ⇔ &cap;

  • ≅ ⇔ &cong;

  • ∪ ⇔ &cup;

  • ½ ⇔ &frac12;

  • ∅ ⇔ &empty;

  • ∀ ⇔ &forall;

  • ¹ ⇔ &sup1;

  • ² ⇔ &sup2;

  • ³ ⇔ &sup3;

  • ÷ ⇔ &divide;

  • ∑ ⇔ &sum;

  • ≠ ⇔ &ne;

  • ± ⇔ &plusmn;

  • √ ⇔ &radic;

  • ° ⇔ &deg;

  • ∈ ⇔ &isin;

  • ∉ ⇔ &notin;

Grafische elementen

  • ♣ ⇔ &clubs;

  • ♥ ⇔ &hearts;

  • ♦ ⇔ &diams;

  • ♠ ⇔ &spades;

  • • ⇔ &bull;

  • © ⇔ &copy;

  • ® ⇔ &reg;

  • † ⇔ &dagger;

  • ∞ ⇔ &infin;

Munteenheden

  • Euro: € ⇔ &euro;

  • Pound: £ ⇔ &pound;

  • Dollar: $ ⇔ &#36;

  • Yen (yuan): ¥ ⇔ ¥

  • Cent (dollar): ¢ ⇔ &cent;

Belangrijkste elementen vermeld? ✔

(“Check”: ✔ ⇔ &#10004;)

Meer info?

Posted in Uncategorized | Leave a comment