Spritecow CSS sprite generator

En we zijn weer een fantastische stukje web-app tegengekomen. Spritecow is een online app waarmee je sprites kunt genereren vanuit een afbeelding. Vorige week getest met een project en het werkt verbazingwekkend prettig eigenlijk. In het verleden hadden we wel eens gespeeld met een plugin voor Photoshop die automatisch sprites en CSS maakte maar dit werkte, in mijn visie in iedere geval, niet echt lekker.

Hoe werkt spritecow?

Eigenlijk supereenvoudig. Je upload je sprite-afbeelding, klikt op een icoontje of wat dan ook welke je als sprite wilt gebruiken en automatisch zoekt hij de randen van je afbeelding op en krijg je onderin de benodigde CSS te zien. Indien nodig kun je ook gewoon met de hand een “regio” selecteren in de afbeelding.

Er staat ook een redelijk helder voorbeeldbestand met begeleidende teksten.

Link naar de site: www.spritecow.com

Browser ondersteuning css3 & html4

Als webdeveloper ben je constant bezig met de vraag “zou het werken in IE7 of niet” als het gaat om de leuke nieuwe technieken die CSS3 en HTML5 ons bieden/gaan bieden. Er zijn superveel sites die hierover stukjes informatie bevatten. Kwam pas echter op http://caniuse.com en moet zeggen dat ik hem wel prettig genoeg vindt qua gebruik om hem te delen.

O ja, wel een “let op, lelijke site alert!” maar functioneel zit het aardig in elkaar. Hieronder een screenshot hoe bijv. het zoeken naar border-radius eruit ziet:

DD_roundies ronden hoeken in alle browsers

Nu CSS3 steeds meer als mogelijkheid wordt gezien en de opties voor ronde hoeken door de verschillende browsers ondersteund worden gaat dit interessant worden. Echter niet alle browsers ondersteunen ronde hoeken en de tags om ze toe te passen wijken nog af omdat ze voorafgegaan worden door “browser unieke” tags zoals -moz en -webkit.

Op zich is hier nog omheen te komen maar IE6, IE7 en IE8 doen helemaal nog niet mee. Nu zijn er flinke hoeveelheden oplossingen met o.a. Jquery (altijd een goed verkoopargument) om de ronde hoeken overal werkend te krijgen. Echter heb ik een enorm enthousiast gevoel bij de oplossing van Drew Diller.

Wij waren al bekend met zijn werk rondom één van de leukere PNG fixes voor Internet Explorer, DD belated PNG.

Nu heeft Drew Diller ook een prachtige fix gemaakt voor ronde hoeken welke je, in het kort, op twee manieren kunt toepassen;

Als aanvulling op je CSS3 code voor ronde hoeken in IE



Als enige bron van ronde hoeken in je code

Met de 3e parameter op true geef je opdracht om alle browsers van ronde hoeken te voorzien. DD roundies kijkt zelf welke syntax er nodig is voor je browser.



Download hier DD roundies en lees ook de volledige documentatie over de mogelijkheden (het is namelijk ook mogelijk met DD roundies ook gelijk DD belated te initiëren).

Webydo van PSD naar HTML

Het klinkt erg aantrekkelijk als je het zo hoort. Webydo helpt je om eenvoudig een website te maken door een PSD bestand te importeren. Hierna kun je met een soort “sleep en plaats” systeem de inhoud op zijn plek zetten en koppelen aan elkaar en klaar. Er is een werkende website ontstaan.

Er is een demo video beschikbaar waarop te zien is hoe het zou moeten werken. Allereerst probeer ik me gelijk een beeld te vormen van de beoogde doelgroep. Klanten van webdevelopment bureaus zullen hier niet terecht komen maar hobbyisten beschikken volgens mij niet altijd over PSD bestanden van het gewenste ontwerp. Het zou dus ergens op een gat ertussen terecht moeten komen. Mensen met voldoende kennis om zelf PSD bestanden te verkrijgen / maken maar met een budget wat niet toereikend is om een webdeveloper erbij te halen. Hoe dan ook is het concept wel erg grappig.

Daarnaast vraag ik me gelijk af;

  • Hoe solide is de code (volgens de vertellingen valid HTML/CSS)
  • Hoe goed kan het omgaan met rommelige PSD bestanden
  • Hoe onderhoudt je de site na de 1e keer in elkaar zetten*
  • Wat gaat het kosten (een deel van de pagina’s is nog leeg)

* Detail hierbij is dat er in de navigatie al ruime is voor de producten Design Management Systeeem (DMS) en Content Management Systeem (CMS) dus wie weet wat er nog komt.

Voor nu wel een leuke om te volgen denk ik. Kijken hoe het eindresultaat wordt en natuurlijk wat het gaat kosten.