Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Best practices revisited

BasHamar
18 antwoorden
  • Aangezien het oude "best practices" topic ondertussen alweer zooo 2002 is, wordt het hoog tijd voor een nieuwe.

    Plaats hieronder dus de handige tips, de handige links en de nuttige wenken.

    Uw mede forummers / designers / developers zullen u dankbaar zijn :)


    Even wat "ground rules":
    [list:0ee84b32a0]
    [*:0ee84b32a0] Beetje niveau graag
    [*:0ee84b32a0] Vertel wat en waarom
    [*:0ee84b32a0] probeer discussies te vermijden
    [*:0ee84b32a0] hou het topic schoon
    [/list:u:0ee84b32a0]

    Er is ook een topic voor de "aspirant webdesigner"…


    gr

    t.
  • Hee dat is leuk. :D

    Hier wat hebbedingetjes om te designen:

    http://typetester.maratz.com/

    http://www.easyrgb.com/harmonies.php

    http://wellstyled.com/tools/colorscheme2/index-en.html

    8)
  • [b:d93c4b22a2]Veelvoorkomende fouten[/b:d93c4b22a2]
    [list:d93c4b22a2]
    [*:d93c4b22a2]'[i:d93c4b22a2]Gebruik geen tabellen, gebruik divs[/i:d93c4b22a2]'
    Tabellen zijn niet bedoeld om de layout te regelen, maar divs zijn niet bedoeld ter vervanging van tabelcellen. Gebruik dus niet overal een div voor (en spans ook niet).
    [*:d93c4b22a2]'[i:d93c4b22a2]Help, IE geeft mijn site goed weer, maar Firefox niet![/i:d93c4b22a2]'
    Nee, Firefox/Opera/Safari geeft het weer zoals jouw code aangeeft. Je hebt helaas IE ten onrechte als ijkpunt genomen, waardoor jouw code is gebaseerd op de foute weergave in IE. Gebruik dus een ander ijkpunt, bouw je site die er goed uitziet in een andere browser dan IE en los daarna de fouten in IE op. Dit heeft overigens niks te maken met persoonlijke voorkeur, onder webdevelopers staat IE alom bekend als brakke browser.
    [*:d93c4b22a2]'[i:d93c4b22a2]Zonder doctype ziet mijn site er beter uit dan met doctype[/i:d93c4b22a2]'
    Dan doe je iets verkeerd, want dat doctype hoort er gewoon in. De verschillen tussen browsers worden [i:d93c4b22a2]feitelijk[/i:d93c4b22a2] zelfs kleiner mét doctype.
    [*:d93c4b22a2]'[i:d93c4b22a2]Kan iemand mij helpen met mijn frames?[/i:d93c4b22a2]'
    Veel mensen op dit forum hebben kennis van frames, maar zijn er na verloop van tijd achter gekomen dat het eigenlijk een slecht idee is geweest om er ooit aan te beginnen. Zoekmachines indexeren je site slecht, bezoekers uit zoekmachines missen navigatie. En je maakt je site nodeloos ingewikkeld, bijvoorbeeld wanneer je bovenstaande zaken alsnog wilt aanpakken. Er zijn tegenwoordig veel betere manieren om je site te bouwen. Dus, ja we [i:d93c4b22a2]kunnen[/i:d93c4b22a2] je wel helpen, maar of dat nou het beste voor jouw site is…
    [*:d93c4b22a2]'[i:d93c4b22a2]Maar mijn boek/handleiding/tutorial/docent/etc. zegt dat frames en tabellen handig zijn[/i:d93c4b22a2]'
    Dat was in de vorige eeuw inderdaad het geval, maar ja, het is nu niet meer de vorige eeuw; kennis veroudert snel tegenwoordig. Ook het gebruik van bijv. <center> en <font> is achterhaald. Tegenwoordig wordt het complete uiterlijk van je site geregeld m.b.v. CSS. Helaas worden verouderde tutorials niet offline gehaald en is het voor beginners dus moeilijk om het kaf van het koren te scheiden. Wanneer zaken als frames en <font> en <b> worden behandeld, dan weet je dat het een verouderde handleiding is.
    [*:d93c4b22a2]'[i:d93c4b22a2]Ik zoek webhosting die gratis is, en ook goed, en veel mogelijkheden biedt, en geen reclame heeft, en dit en dat…[/i:d93c4b22a2]'
    Tenzij je vrienden/familie/werkgever weet te strikken, zul je voor betaalde webhosting moeten gaan. Dat hoeft maar 2 euro per maand te kosten. Zoek bijv. op Webhosters.nl of Internetten.nl.
    [*:d93c4b22a2]'[i:d93c4b22a2]Ik zoek software om goedkoop, snel, makkelijk en goed een site te bouwen[/i:d93c4b22a2]'
    Ook hier geldt: voor nix gaat de zon op. Er is gratis software, maar dan moet je vaak kennis hebben van webdevelopment. Er is software waarmee je met wat muisklikken een site bouwt, maar dan moet je kunnen leven met de beperkingen. Een goeie site vergt kennis en tijd; het komt niet vanzelf.
    [*:d93c4b22a2]'[i:d93c4b22a2]Ik wil een gratis domeinnaam[/i:d93c4b22a2]'
    Domeinnamen zijn soms voor 8 euro per jaar al te regelen, of zelfs gratis bij je hostingpakket. En zonder hostingpakket zijn ze ook gratis te regelen (.tk bijvoorbeeld), maar dan heb je dus met diverse nadelen te maken die jouw site er niet beter op maken; zonder gratis domeinnaam ben je meestal beter af.
    [/list:u:d93c4b22a2]
    [size=9:d93c4b22a2](deze post blijf ik bijwerken met nieuwe tips en links)[/size:d93c4b22a2]
    Even lay outen? t.[/color:d93c4b22a2]
  • [size=20:7b2c8ba3ca][b:7b2c8ba3ca]JavaScript & JavaScript Libraries[/b:7b2c8ba3ca][/size:7b2c8ba3ca]

    [b:7b2c8ba3ca][size=16:7b2c8ba3ca]Mootools[/size:7b2c8ba3ca] - The Compact JavaScript Framework[/b:7b2c8ba3ca]
    [size=9:7b2c8ba3ca]WWW | Docs | Demo's[/size:7b2c8ba3ca]
    [i:7b2c8ba3ca]MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.[/i:7b2c8ba3ca]

    [b:7b2c8ba3ca][size=16:7b2c8ba3ca]jQuery[/size:7b2c8ba3ca] - The Write Less, Do More, JavaScript Library[/b:7b2c8ba3ca]
    [size=9:7b2c8ba3ca]WWW | Docs | Demo's[/size:7b2c8ba3ca]
    [i:7b2c8ba3ca]jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.[/i:7b2c8ba3ca]

    [b:7b2c8ba3ca][size=16:7b2c8ba3ca]EditArea[/size:7b2c8ba3ca] - The Code Editor in a Textarea[/b:7b2c8ba3ca]
    [size=9:7b2c8ba3ca]WWW | Docs | Demo's[/size:7b2c8ba3ca]
    [i:7b2c8ba3ca]Here is EditArea, a free javascript editor for source code. (That is no way a WYSIWYG editor). This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for small text).[/i:7b2c8ba3ca]

    [b:7b2c8ba3ca][size=16:7b2c8ba3ca]Datejs[/size:7b2c8ba3ca] - A JavaScript Date Library[/b:7b2c8ba3ca]
    [size=9:7b2c8ba3ca]WWW | Docs[/size:7b2c8ba3ca]
    [i:7b2c8ba3ca]Datejs is an open-source JavaScript Date Library. Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.[/i:7b2c8ba3ca]

    [b:7b2c8ba3ca][size=16:7b2c8ba3ca]Design[/size:7b2c8ba3ca] - Web UI Design JavaScript Bookmarklet[/b:7b2c8ba3ca]
    [size=9:7b2c8ba3ca]WWW[/size:7b2c8ba3ca]
    [i:7b2c8ba3ca]Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.[/i:7b2c8ba3ca]



    - Bas


    [size=9:7b2c8ba3ca][b:7b2c8ba3ca]Updates:[/b:7b2c8ba3ca][list:7b2c8ba3ca][*:7b2c8ba3ca]24/02/2008: JavaScript-sectie toegevoegd[/list:u:7b2c8ba3ca][/size:7b2c8ba3ca]
  • Ik heb ook wel iets dat misschien onder tips/tricks zou vallen.

    Soms zie je bij hover effecten met achtergrond plaatjes, bij voorbeeld knoppen in een menu, dat het hover plaatje de eerste keer met een soort vertraging wordt weergegeven. Dat komt omdat alleen het eerste plaatje wordt gedownload als de pagina laad. Pas als je met je muis over het menu item, oid, gaat wordt het tweede plaatje opgehaald. Je kan dit wat onelegant oplossen door de plaatjes met js te 'pre-loaden' of ze als <img> in een verborgen div te zetten. Maar een mooiere oplossing is het combineren van beiden plaatjes tot 1 plaatje, door ze bv. onder elkaar in 1 plaatje te zetten en dan via de CSS eigenschap [i:a13a216538]background-position[/i:a13a216538] het plaatje 'verschuiven' zodat of het hover of het niet-hover deel van het plaatje te zichtbaar is.
    Voordeel is dat het hover plaatje meteen is geladen als de page is geladen zodat je geen vertraging effect krijgt, en ook geen kreupele HTML of js hoeft te gebruiken.


    [i:a13a216538]Aanvulling[/i:a13a216538]

    Zeg je hebt een menu item dat 100 bij 30 pixels is, je gecombineerde achtergrond plaatje is dan 100 bij 60 pixels (tenzij je ook nog een “mouse down” en/of “visited” actie wilt). Je CSS ziet er dan ongeveer zo uit:
    [code:1:a13a216538]#nav a {
    height: 30px;
    width: 100px;
    background: url(locatie/plaatje.jpg) 0 0 no-repeat;
    }

    #nav a:hover {
    background-position: 0 -30px;
    }
    [/code:1:a13a216538]Het mooie is dat ook al heb je voor ieder menu item een andere achtergrond, je hoeft maar 2 regels css te gebruiken om het hover effect voor al die verschillende menu items tot stand te brengen (zolang ze niet van afmeting verschillen).


    Bookmarks doorgenomen:[list:a13a216538][*:a13a216538]456bereastreet
    [*:a13a216538]gigadesign
    [*:a13a216538]annevankesteren
    [*:a13a216538]Code sucks; layouts, Voor de luie mensen onder ons.. ;)
    [*:a13a216538]Lorem Ipsum, Kennen mensen waarschijnlijk wel, maar moest het ff posten.
    [*:a13a216538]Ritch fonts in je website
    [*:a13a216538]quirksmode
    [*:a13a216538]menu voorbeelden[/list:u:a13a216538]
  • Website design:
    http://www.smashingmagazine.com/

    Deze site is mijn eerste keus wanneer ik op zoek ben naar ideeën bij het bouwen van websites. Over werkelijk alles op het gebied van ontwerp hebben ze wel een artikel met een onvoorstelbare hoeveelheid voorbeelden. Zoals allerlei css-technieken, kleurgebruik, lettertypes, web 2.0. Ook hebben ze allerlei tools voor het genereren van grafische elementen.
  • Mijn tip:

    http://annevankesteren.nl/

    Een uitstekend weblog over standaarden, code en nieuwe ontwikkelingen in web land van een oude rot die hier veel te weinig komt ;)
  • Het is alweer enige tijd geleden dat ik mijn post heb aangepast, maar in de tussentijd wil ik jullie de volgende links zeker niet onthouden:

    [list:feceb0ab99][*:feceb0ab99]Yahoo!'s Latest Performance Breakthroughs
    [i:feceb0ab99]Stoyan Stefanov made an appearance last week at the PHP Quebec Conference in Montreal. His session debuts Yahoo!’s latest research results and performance breakthroughs. He covers the existing 14 rules, plus 20 new rules for faster web pages.[/i:feceb0ab99]
    [*:feceb0ab99]Google Doctype
    [i:feceb0ab99]So now we know what Mark Pilgrim’s been doing at Google… heading up a project to create an encyclopaedia of web development.[/i:feceb0ab99]
    (via Simon Willison)[/list:u:feceb0ab99]

    - Bas
  • Uit de archieven van Drewster:

    [list:ecaf6255c8][*:ecaf6255c8]Code Sucks: CSS Layouts
    [*:ecaf6255c8]IronMyers: CSS Layouts[/list:u:ecaf6255c8]

    - Bas
  • Met de komst van Firefox 3 is de ondersteuning van standaarden in de browser weer iets beter geworden. Ook twee punten waar Firefox achterliep op de concurrentie zijn nu gemaakt:

    Two Hidden Features New in Firefox 3

    Persoonlijk vond ik het tweede deel bijzonder interessant, ik wacht al tijden op een dergelijke fix!

    [b:c5f68f950f]Edit[/b:c5f68f950f]: Een ander artikel op Sitepoint, pagina 4, onderaan, meer info voor webdevvers:

    Firefox 3: What's New, What's Hot, and What's Not

    - Bas
  • Had ik eerder al een link geplaatst naar Datejs, pas nu zie ik dat er ook vertaalde versies zijn! Natuurlijk ook een Nederlandse versie, waardoor je termen kan gebruiken als "vandaag" en "volgende week". [i:99565da5df]Sweet![/i:99565da5df]

    Maar dat is niet wat ik nu wilde plaatsen, interessanter nog is de nieuwe Dateslider (demo), gemaakt met een mix van Prototype, Scriptaculous and Datejs.

    Overigens is de site Ajaxorized ook een interessante site om eens door te spitten.

    - Bas
  • Via Tweakers: [b:eb8d4fcdb4]IETester[/b:eb8d4fcdb4]

    [i:eb8d4fcdb4]"IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process. "[/i:eb8d4fcdb4]

    Ik heb het zelf nog niet getest, maar zodra ik weer aan een website ga beginnen zal ik dit zeker doen.

    - Bas
  • Hier enkele simpele doch handige tools:

    Tiled Backgrounds Designer
    [i:680bf9434b]"Just small useful tool to create patterns."[/i:680bf9434b]

    AJAX Loading GIF Animator
    [i:680bf9434b]"Create easily your own ajax loader icon."[/i:680bf9434b]

    Secure Password Generator
    [i:680bf9434b]"The PC Tools Password Generator allows you to create random passwords that are highly secure and extremely difficult to crack or guess due to an optional combination of lower and upper case letters, numbers and punctuation symbols."[/i:680bf9434b]

    Iemand anders nog dergelijke handige tools?

    - Bas
  • Op een of andere manier ziet ik mijn favoriete debug en analyze tool niet hierzo:

    FireBug

    https://addons.mozilla.org/en-US/firefox/addon/1843/

    Erg makkelijk om elementen te inspecteren etc.
    (ook voor scripting ideaal)
  • Eigenlijk heb je aan google.nl genoeg maarja dan blijft 't hier zo leeg.
    Deze heeft een mooie manier om formulieren te stylen.
  • In wat extra vrije tijd ben ik weer een beetje begonnen met (de technische kant van) webdesign en inmiddels heb ik weer enige nuttige bronnen gevonden.

    [b:e19835771a]Layout[/b:e19835771a]
    [list:e19835771a]
    [*:e19835771a][b:e19835771a]Fluid Grids[/b:e19835771a]
    Over layouts die schalen naar de tekstgrootte.
    [*:e19835771a][b:e19835771a]Fluid Images[/b:e19835771a]
    Hetzelfde principe toegepast op afbeeldingen.
    [/list:u:e19835771a]
    [b:e19835771a]Mobiele sites[/b:e19835771a]
    [list:e19835771a]
    [*:e19835771a][b:e19835771a]An introduction to meta viewport and @viewport[/b:e19835771a]
    Hoe geef je aan mobiele apparaten door welk zoomlevel ze moeten gebruiken?
    [*:e19835771a][b:e19835771a]Mobile-friendly: The mobile web optimization guide[/b:e19835771a]
    Verschillende aanpakken voor mobiele browsers.
    [*:e19835771a][b:e19835771a]WURFL, the Wireless Universal Resource FiLe[/b:e19835771a]
    Hulp bij het bepalen wat de mogelijkheden van een mobiele browser zijn.[/list:u:e19835771a]
    [b:e19835771a]Fonts[/b:e19835771a]
    [list:e19835771a]
    [*:e19835771a][b:e19835771a]Font Squirrel[/b:e19835771a]
    Kent iedereen denk ik al, maar toch, goede tools voor aparte fonts op websites.
    [*:e19835771a][b:e19835771a]Bulletproof @font-face syntax[/b:e19835771a]
    De op dit moment beste manier om aparte fonts op te nemen in je CSS.
    [*:e19835771a][b:e19835771a]Font Matrix[/b:e19835771a]
    [i:e19835771a]Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite[/i:e19835771a]
    [*:e19835771a][b:e19835771a]Roundup: CSS Font Stacks[/b:e19835771a]
    Hoe bepaal je alternatieve fonts indien de gebruiker je voorkeurslettertype niet heeft?
    [*:e19835771a][b:e19835771a]Build better CSS font stacks [/b:e19835771a]
    Enkele standaard fontstacks voor gebruik op je site.
    [/list:u:e19835771a]
    Uiteraard staan genoemde artikelen vol met verwijzingen met nog meer interessant leesmateriaal, maar dit moet je een aardig startpunt geven!

    - Bas
  • Nog een bron die ik jullie niet wil onthouden:

    [b:ccdd1a08ae]Improving web performance with Apache and htaccess[/b:ccdd1a08ae]
    [i:ccdd1a08ae]The good news is that some of the most important speed optimizations can be easily done with simple .htaccess rules. These rules can make any website faster by compressing content and enabling browser cache.[/i:ccdd1a08ae]

    [b:ccdd1a08ae]Edit:[/b:ccdd1a08ae] Vooruit, nog een link met wat [i:ccdd1a08ae]best practices[/i:ccdd1a08ae] met betrekking tot PHP. Niets revolutionairs, maar zeker goed om weer eens te lezen.

    [b:ccdd1a08ae]10 Performance Tips to Speed Up PHP[/b:ccdd1a08ae]
    [i:ccdd1a08ae]Even the most experienced programmer can be lazy. […] And since most good programming habits require no additional work on the part of the programmer, there’s a real business case to be made against lazy programming. It’s time to break out of those lazy habits and start coding with performance in mind.[/i:ccdd1a08ae]

    - Bas
  • Deze wilde ik jullie toch ook niet onthouden:

    [b:cd087809bc]Tom's Hardware: Web Browser Grand Prix VI[/b:cd087809bc]
    [i:cd087809bc]Today, we test the latest browsers on both major platforms. How do the Mac-based browsers stack up against their Windows 7 counterparts?[/i:cd087809bc] (Conclusie)

    - Bas

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.