schoolbord

Status
Niet open voor verdere reacties.
J

JEPEDEWE

Terugkerende gebruiker
Lid geworden
14 jun 2006
Berichten
1.697
Hallo,

Voor de school waar ik werk zou ik graag een website maken waarbij de achtergrond net een schoolbord is en het lettertype net alsof het met (kleur) krijt geschreven werd...
Hebben jullie sites waar ik een en ander kan vinden... (of voorbeeldsites van andere scholen)
Bedankt voor de tips
JP
 
dat is op zich makkelijk dan je denkt, heb je al enigszins ervaring met het maken van een website? als je bijvoorbeeld al weet hoe je een plaatje kunt instellen als achtergrond van een website, kan je op google meer dan genoeg vinden:

http://www.google.nl/search?q=schoo...gc.r_pw.&fp=b92717e6cf62243b&biw=1920&bih=960

http://www.google.nl/search?q=schoo...gc.r_pw.&fp=b92717e6cf62243b&biw=1920&bih=960

daarnaast kan je een lettertype kiezen dat er enigszins handgeschreven uitziet en deze vervolgens wit maken. bijvoorbeeld het lettertype monotype corsiva, stel deze in als standaardfont van de site en voilá.
 
Hoi JEPEDEWE,
Misschien toch iets lastiger dan het lijkt. Het schoolbord zelf zal denkelijk het probleem niet zijn, maar het lettertype zal de problemen opleveren.

Voor een mooi krijt-lettertype zijn er op het web best hele aardige te vinden.
Bijvoorbeeld de "Eraser", hier te downloaden: www.fontspace.com/david-rakowski/eraser.
Die ziet er zo uit, als je 'm wit op een schoolbordkleur zet:

eraser-schoolbordletter.png

MAAR ... om de site dan in dit lettertype te kunnen zien, moet de bezoeker dan op zijn PC of Mac óók die "Eraser" geïnstalleerd hebben staan.
En dat zou puur toeval zijn ... :confused:
Dus in feite zijn die krijt-lettertypes niet te gebruiken:
  • Wel om er zelf een image van te maken (bv. voor de koppen), maar niet als lopende tekst voor de hele site.
  • Nu zijn er wel technieken om "eigen fonts" op een site te gebruiken (die dan automatisch gedownload worden naar de bezoeker), maar dat is nogal een gedoe (verschilllende soorten nodig voor Internet Explorer en de rest), en het is de vraag of een gevonden krijtlettertype zich daarvoor leent. Er spelen ook nog copyright-zaken mee (want font-designers en -verspreiders willen vaak niet voor niets werken, en verbieden dan gebruik op internet: waarmee iedereen opeens gratis de vruchten zou kunnen plukken van hun noeste arbeid).
  • Er zijn ook technieken om teksten automatisch om te zetten in images met een eigen lettertype (sIFR en dergelijke), maar die zijn ook niet erg geschikt om er een hele site-tekst mee te bedienen. Dit wordt eveneens vooral voor koppen gebruikt.
Blijft over: een gewoon gangbaar lettertype gebruiken, en dat met css en een transparant image "verkrijten" tot een imitatie-schoolbordletter:

imitatie-schoolbordletter-screenshot.png

Maar ook dat is vooral geschikt voor grote teksten als koppen, en heeft ook nadelen.
M'n conclusie: krijtletters zouden erg leuk zijn, maar dat is in de praktijk lastig te realiseren. Waarschijnlijk kan je het beste een krijt-lettertype downloaden en er zelf images voor de koppen van maken. - En de rest met gewone letters doen.

Met vriendelijke groet,
CSShunter
_________
PS:
De "Monotype Corsiva" behoort volgens het overzicht op www.ampsoft.net/webdesign-l/WindowsMacFonts.html niet tot de "browser safe fonts", en je kan er denk ik niet van uitgaan dat iedereen die op zijn/haar kast heeft staan.
 
heb inderdaad een leuk schoolbord gevonden dat ik zou willen gebruiken
Ik ben wel geen echte webontwikkelaar en gebruik dreamweaver8 om een en ander te maken...
Nu, in de page properties, stelde ik het jpg bestandje in als "background image"
ik had dus gehoopt dat het schoolbord over de ganse pagina uitgerokken zou worden, maar niks ervan
Hoe ga ik tewerk???
Bedankt
 
... niks ervan.
Klik om te vergroten...
Dat klopt helemaal, want zonder html5 (wat niet alle in omloop zijnde browsers kunnen verteren) wordt een background-img altijd afgebeeld op het formaat van de afbeelding zelf. Daar valt niets aan te doen.

De remedie is: in een tekenprogramma de afbeelding groter maken, precies de ware grootte die op het scherm moet komen staan.
  • Je zou met bv. IrfanView de afbeelding als totaal kunnen vergroten, maar dat levert waarschijnlijk een aanzienlijke achteruitgang in kwaliteit op (bij vergroten moeten er extra pixels bij komen, en daar wordt een soort gemiddelde van de al bestaande pixels voor genomen).
  • Beter is, om in een tekenprogramma het canvas op het juiste formaat te brengen, dan de 4 hoeken naar hun nieuwe plaats te brengen, en de rest opvullen met kopieer- en plakwerk. Dan blijft de kwaliteit behouden.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
Nu zijn er wel technieken om "eigen fonts" op een site te gebruiken (die dan automatisch gedownload worden naar de bezoeker), maar dat is nogal een gedoe (verschilllende soorten nodig voor Internet Explorer en de rest), en het is de vraag of een gevonden krijtlettertype zich daarvoor leent. Er spelen ook nog copyright-zaken mee (want font-designers en -verspreiders willen vaak niet voor niets werken, en verbieden dan gebruik op internet: waarmee iedereen opeens gratis de vruchten zou kunnen plukken van hun noeste arbeid).
Klik om te vergroten...
Om een font zelf geschikt te maken kan inderdaad gedoe zijn maar van, bijvoorbeeld, fontsquirrel kun je kant en klare pakketten downloaden. Ze hebben van dit krijtfont ook een pakket, hierrr. Normaal staan er alleen fonts op die vrijelijk verspreid mogen worden maar in dit geval schijnt de maker niet meer te achterhalen te zijn en is er überhaupt geen licentie.
 
Laatst bewerkt:
Ha, dat is goed nieuws! :)
Ik was er nog niet achter dat er van de Eraser een compleet @font-face pakket bestaat.
  • Anders zou je met "WEFT" in de weer moeten om zelf een EOT-versie te maken (dat is het "gedoe" van reactie nr. #3; zie ook het [oude, 2006] artikel: font-embedding.htm)
Dus maar eens gauw een testpagina gemaakt:
Hij doet 't in IE (6 en 7 getest), Firefox, Chrome, Opera en Safari! :d *)

Met vriendelijke groet,
CSShunter
__________
*) In IE7 is er even een flits te zien van de Arial (de fallback-letter), voordat de Eraser op het bord staat. Komt waarschijnlijk omdat het renderen van het EOT-bestand wat tijd vergt, en intussen alvast de fallback-letter wordt getoond.
Merkwaardig: IE6 komt meteen over de brug (is waarschijnlijk minder zwaar). Ook de andere browsers doen dat.
 
Alweer sluit ik me aan. :D

(conclusie) Dan is het waarschijnlijk wel zo handig om alleen zelf de Eraser te installeren en er screenshots van te schieten of die in een tekenprogramma te gebruiken voor het maken van images van de koppen.

Dat scheelt enormelijk in de downloadsnelheid van de pagina: met de embedded Eraser is in totaal bijna 600kB aan font-files nodig.
En je zou toch heel veel koppen moeten hebben om er images van te maken die meer dan 600kB zijn!;)
 
Een andere mogelijkheid om bijzondere lettertypes te embedden is via Google Web Fonts. Daarbij kun je gebruik maken van de ruim 200 lettertypes die in de Google bibliotheek zitten. Het is gemakkelijk toe te passen en werkt in de meeste browsers.

Misschien is Google Web Fonts niet zo bekend als sIFR en Cufon, maar het is zeker de moeite waard om eens te proberen: Google Web Fonts

Een handleiding is te vinden op: Website lettertypes
 
fritzi zei:
Een andere mogelijkheid om bijzondere lettertypes te embedden is via Google Web Fonts. Daarbij kun je gebruik maken van de ruim 200 lettertypes die in de Google bibliotheek zitten. Het is gemakkelijk toe te passen en werkt in de meeste browsers.
Klik om te vergroten...
Dat gebruikt dezelfde techniek (@font-face) als squirrelfont.
 
Daar doen we dan een testje mee. :)
En de opmerkingen zijn:
  • Werkt in IE6, IE7, IE8, IE9, Firefox, Chrome, Opera en Safari.
  • Volgens Netrenderer heeft IE9 minder tussenruimte tussen de woorden dan IE7 en IE8 (letters zijn wel identiek).
  • Firefox (FF3.5) heeft een smallere/schralere letter dan de andere browsers.
  • Opera (Op11.5) geeft een hinderlijke flits waarin de default-letter wordt getoond: verspringt pas wat later naar het GoogleWebFont. Soms hebben andere browsers er ook last van (drukte op GoogleFonts?).
  • Safari is breder uitgemeten dan alle andere. Het verschil met FF is maar liefst 16%!
  • Alle browsers hebben wel exact dezelfde letterhoogte.
De oogst:

googleWebFonts.png

M'n conclusie: het houdt niet over! :confused:
De browserverschillen zijn aanzienlijk, en de downloadtijd of het renderen van het afwijkende lettertype kan roet in het eten gooien. Dit gebeurt ook bij elke nieuwe pagina op dezelfde site: de letters worden niet in de cache gestopt. - En: klein blijft nog steeds prettig onleesbaar.
Daarmee blijf ik er toch bij: wat images voor de koppen *), en voor de rest normaal doen. ;)

Met vriendelijke groet,
CSShunter
___________
*) Of eventueel een GoogleWebFont-subset voor de gebruikte letters in de koppen, zie eerder genoemde handleiding: dat scheelt laadtijd.
 
Laatst bewerkt:
erg jammer dat die kwaliteit zo achteruit gaat per browser :/ ... Ik hoop dat er toch een oplossing kan worden gevonden voor dit probleem.. en zoals al gezegt is; Misschien is het makkelijker om img te maken..

Als de site niet word aangepast.. zou ik zeggen; Maak gewoon 1 grote afbeelding.. en zet die vast..dan heb je en je krijt lettertype.. en een leuke website.

In ieder geval is ook niet iedereen dol op zo'n lettertype.. veel mensen willen gewoon een standaard lettertype.. vooral ouders van leerlingen zijn niet gek op rare lettertypes.
Als er vragen zijn over het programmeren van de website.. kan je die altijd via een PM je vraag sturen.
 
Mugaru zei:
Als de site niet word aangepast.. zou ik zeggen; Maak gewoon 1 grote afbeelding.. en zet die vast..dan heb je en je krijt lettertype.. en een leuke website.
Klik om te vergroten...
Slecht idee.
- Blinden en slechtzienden zullen je site niet meer kunnen gebruiken.
- Google zal je site niet meer vinden.
- Mensen die een hekel hebben aan dat soort lettertypes en liever hun eigen gebruiken kunnen dat niet meer doen.
- Je site kan zich niet goed meer aanpassen an verschillende beeldschermformaten.
etc.
 
etc.
Klik om te vergroten...
Ja: even dat stomme tikfoutje verbeteren gaat niet 1-2-3; links moeten er allemaal ingehangen worden als apart gepositioneerde elementen; even snel tekst wijzigen en/of link bij zetten en/of menu aanpassen: dat is er allemaal niet bij als je een 100% image pagina hebt.
etc.!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan