Archive for the 'webdev' Category

Page 2 of 3

‘Moroccan Blue’ Leads Top Fashion Colors (RGB)

Published on July 29, 2005 in color and webdev. 1 Comment

Moroccan Blue topped the list of colors at New York Fashion Week’s Fall 2005 collections, according to Pantone, Inc., the global authority on color and provider of professional color standards for the design industries.
Each season, Pantone surveys designers showing at New York Fashion Week and collects feedback on prominent collection colors, color inspiration, color philosophy and each designer’s signature shades. This information is used to create the PANTONE Fashion Color Report.
The top 10 most directional women’s ready-to-wear colors for Fall 2005 (along with printing values) are
(converted by me to RGB):

Color Name Pantone RGB
Moroccan Blue PANTONE 19-4241 #004D7A
Glazed Ginger PANTONE 18-1154 #BA5D00
American Beauty PANTONE 19-1759 #BF0000
Ruby Wine PANTONE 19-1629 #730028
Atmosphere PANTONE 16-1406 #B2A68F
Burnt Olive PANTONE 18-0521 #466900
Gloxinia PANTONE 19-3022 #5600A6
Rattan PANTONE 14-1031 #DACE3D
Moss PANTONE 16-0532 #9DA600
Burnt Orange PANTONE 16-1448 #ED7700

from creativepro.com

Technorati: – – –

Online software development: the WikiRAD

Published on July 15, 2005 in internet and webdev. 6 Comments


I love the idea of social software. Specifically, while it has been several years since I first encountered the wiki concept (Ward Cunningham’s c2.com), and I have been a Wikipedia contributor for a while, it is only since I checked out the emerging wiki hosting sites (see Google and social software: wikis) that I realize that wikis are becoming mainstream. Sites like Wikispaces, JotSpot and PbWiki are providing anyone with the tools to safely and effortlessly develop a body of knowledge.

On a seemingly unrelated point, I am currently developing some stuff in PHP (codeword ‘photcasting‘ but more on that later) and I realise my development environment is so amateuristic: I use a text-editor with FTP support (the last couple of years it has always been Editplus), and everytime I save some code, I overwrite the older version on the ‘live’ server. I also develop on different PCs in a typical week (easily 3) and so I don’t have 1 development PC with PHP running where I could stage everything before I deploy it to my ‘production’ site. With a bad broadband connection, when a ’save’ operation goes wrong, you end up with a ‘crucialstuff.php’ script file that is empty (0 bytes) and brings your whole site down. Unfortunately, I know this from (repeated) experience.

Earlier today, I was thinking about these 2 issues one right after the other and bam: they collided. I have a new development paradigm: the WikiRAD.

‘WikiRAD’ development

WRITE CODE

  • you write your code with your browser in a Wiki-style editor, with syntax colouring added (haven’t seen that in a Wiki editor yet). The code resides on a WikiRAD server (with RAID5 disks, daily backups, …). You need no other software on your PC to be able to develop software.
  • the Wiki system takes care of version management and comparing of sources (Wikis already do this). Check in, check out, rollback, branching, merging, several developers on 1 codebase, … all possible!
  • you can search your whole codebase for certain keywords, jump to class definitions – just like normal IDE
  • when you look at your code, the names of classes, templates, libaries, .. become clickable, just like in a … wiki!
  • there are tools to make writing code easier (class wizard, sample code, forum for questions)
  • there’s a Google-like crawler that indexes code so it becomes available for other developers – this is real “open source”!

COMPILE AND RUN

  • the WikiRAD server lets you develop in a ’stage’ mode (separate from your real system) and lets you deploy it to ‘production’ once you’re sure. The production server can be your own server, with deployment via FTP or SSH.
  • for the most popular languages, you also have a lint system that can detect obvious errors in your code before compiling.
  • if the language you write in requires compiling (like C++, C#, VB.NET, …) the server takes care of that – probably faster than on your own Pentium III.
  • you no longer need to set up a ’similar’ server to test your software, it will run on the same kind of system, behind the same combination of routers and firewalls, with the same libraries installed.
  • you can add breakpoints, see the console output, view values of variables, …

So take Sourceforge, drop in a Wiki system for writing the code, a system for online debugging and profiling and tada: life has just become so much easier for a programmer.

All remarks are welcome!

Technorati: – – –

Using movies on a web page

Published on June 9, 2005 in media and webdev. 4 Comments


So you recorded those first steps of your youngest, your first public milonga performance, uncle Tom falling backwards into that cake, or auntie Janet dressed like a man. Now you want to show into to the world. You save the movie into a .WMV (Windows Media – Video), .RM (Real Media), .MOV (Quicktime), .MPG or .MP4 (MPEG-2 or MPEG-4) , .SWF (Shockwave/Flash) or .AVI (Microsoft Video for Windows) file, sprinkled some Sorenson or DivX magic on it (if you’re not familiar with these terms, don’t worry. It’s another topic alltogether), upload it to your web server, and then what? What is the best way to present it to your visitors?

ANCHOR tag – a plain link

Works: everywhere
Description: Provide just a link to the movie file, and count on the user’s browser to figure out which application it should give the URL to. WMV files will generally open in Windows Media Player, MOV files in Quicktime, but there is no way to be sure what AVI and MPG files will open in. This depends on the client’s configuration. An additional disadvantage is that a lot of browsers will first download the whole file and only then play it, so you lose the quasi-immediate start of a streaming experience.

EMBED tag

Works: everywhere
Description: even if it is not part of the HTML specification, it should work everywhere. It can be as minimal as <embed src="http://www.example.com/movie.avi">, but also allows the specifying of size, mime-type and player controls. It does not allow you to specify what program (and what version) should be used to play it. It’s again the user’s (browser) configuration that decides.

OBJECT tag

Works: everywhere
Description: this is the official way to do it (according to the HTML specs). You create an <OBJECT> ... </OBJECT> pair with a bunch of PARAM in between. Here is the way to do it with Windows Media Player, RealPlayer, QuickTime and Shockwave/Flash. A very common practice is to combine the EMBED with OBJECT, like in the example below.

IMG with dynsrc

Works: only in Internet Explorer (Windows)
Description: very easy to use, but poorly supported. Allows for combining the classic SRC with the DYNSRC property, so that even if the browser does not show the movie, it can still show an image.

MEDIAPLAYER page

Works: everywhere (if it’s done right)
Description: if you’re a bit handy, you can create a wrapper page for your streaming media. I use my Cinema Tool to show movies. I just input the URL, the format and the size, and the rest is automatic. On podcasts like Traxsource, I use a special audio-only player page (not yet generally available) that shows the playlist (a web page) within the media player (SMIL for Real & QuickTime/ASX for WMV).

IFRAME with MEDIAPLAYER

Works: everywhere (but watch out for Javascript scripts like Adsense/counter pages – they can give errors in frames)
Description: If you don’t want to send your visitors to a new or a popup page, consider inserting a IFRAME into your page. You can then even trigger new movies by just adding a link with the right TARGET. Remark: if you add a link like described in the ANCHOR example above, even with the right TARGET specified, the file will probably open outside of the browser, and not in the IFRAME where you want it. Webmastering shouldn’t be THAT easy!

Also see: fluffbucket.com – Comparison of media players

Technorati: – –

Tricks to fight right-click image copying

Published on February 26, 2005 in internet and webdev. 3 Comments


An image like the one on the right (using the standard <img> tag) can easily be copied by any visitor: right-click the image and select “Save Picture As” or “Copy Image”. In cases where the author wants to protect his images from copying, there are a couple of ways to make the copying harder. Not make it impossible, just less trivial.
The fact that you can get the image by checking the HTML (”View Source”) is something that is difficult to avoid, and in any case, the vistor could always take a screen shot and trim the result to have only the image. So I’ll just focus on disabling the “Save/Copy Image” functionality.

Remark: there are ways to make all Right-Click functionality inaccessible. I think this is a bad practice (for the reasons, check jeffdav), so I will not cover these methods.

Trick #1: Table Background

You use the image as the table background: <TABLE STYLE="background-image: url(...)">. If you do just that, the “Save Picture As” option goes away, but a new “Save Background” is created. So you cover up the image by placing a transparent gif before it, in the <TD> cell.

The end effect is that is looks like you can copy or save the picture, but you will be saving the GIF file.

Remark: you have to explicitly specify the dimensions of the table, it will not autoscale to the size of the image.


Trick #2: Div Background

You can do basically the same thing with a <div>: you use the picture as the background image, and you put another <DIV> above it with the transparent GIF.

You would again need to specify the exact dimensions of the whole thing, but wait, there’s another trick: put the image in an <IMG> tag inside the second DIV and give it a visibility: hidden. This way it takes up the size of the picture without actually showing up, or appearing right-clickable.


Trick #3: Flash image

The third is a no-brainer: using a Flash object. Almost 100% of browsers have Flash built-in, so compatibility problems are limited. For the exact OBJECT and EMBED, check the HTML source of this text or the Macromedia site.
Here also, you need to give the right dimensions to the Flash object, otherwise it will take a default (square) size.

Remark: using the menu="false" option ensures that the only options showing up on a right-click are: “Settings…” (disabled) and “About Macromedia Flash Player …”.


Conclusion
It is possible to use some simple tricks to make right-click copy or save functionality impossible. I wouldn’t go as far as to call this ‘copyright protection’, but it helps. At least no one can claim they just copied it because they thought it would be OK.
I used the last option (Flash) on my Tango Steps site, to protect the images I use from my teachers, Marisa and Oliver.

Technorati: –

Padding the margin: CSS Cheatsheet

Published on February 5, 2005 in webdev. 0 Comments


This CSS cheat sheet is gonna save me a couple of Google searches next time I start fiddling around with my layout:

margin:
Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution. Multiple values start from the top and go clockwise.
H1 {margin: 2em;}
P {0% 5% 0% 5%;}
(from Brett Merkey’s CSS Cheatsheet)

Caffeine and error messages

Published on January 26, 2005 in tool and webdev. 0 Comments


made with Atom Smasher’s Error Message Generator

Programming is the process of converting caffeine into error messages.
(via Joel on Software)

Playing MP3 with an embedded Flash player

Published on January 22, 2005 in webdev. 19 Comments Tags: , , , .

(There is an updated post at Click to hear the MP3 playlist (Apr 2006))

When you want to have an embedded player in a web page, there are several options: working with an embedded RealPlayer or WindowsMedia player – which do not all work on a Mac/Linux platform or with Firefox. Another option is using a Flash player. Flash/ShockWave is supported on all platforms and in all browsers. I went on a search for free embedded Flash players:

SoundBlox
License: This is an Apache-style open source project by Laszlo Systems, based on the Laszlo open-source RAD framework. It is free for non-commercial use.
Method: you reference a Javascript file in your HTML headers, and then call a Javascript function with the URL of the playlist. (This is a problem for some sites. Blogger e.g. does not allow <script> tags in its posts, only in the template.)
Format: it uses a proprietary XML format. <geek>Files in XSPF format can be converted to the SoundBlox format through XSLT</geek>
MusicPlayer
License: This is an open-source (SourceForge) project by Fabricio Zuardi. It is free for non-commercial use.
Method: you reference a Flash file and give it the URL of the playlist. The Flash file is embedded with the usual <object> and <embed> tags.
Format: it uses the standard XSPF (XML Sound Playlist Format). Webjay can convert any HTML file/feed to XSPF!
Check my Webjay wizard to generate the right HTML code for your page!
Halfbaked
License: not explicitly stated. I presume it’s free to use.
Method: you reference a Flash file and give it the URL of the MP3 file. The Flash file is embedded with the usual <object> and <embed> tags.
Format: No playlist here, just one MP3 file.
GurusNetwork
License: not explicitly stated. I presume it’s free to use.
Method: you reference a Flash file, which contains the playlist of the MP3 files to play. You can’t specify a self-made playlist
Format: No idea.
Sonify
License: not explicitly stated. I presume it’s free to use.
Method: you reference a Flash file, which contains the playlist of the MP3 files to play. You can’t specify a self-made playlist
Format: No idea.
RadioBlogClub
License: free to use.
Method: you host the player with all graphics and a config.xml file, that points to a playlist.
Format: A PHP script creates an XML playlist for all MP3 present in a local(!) folder.

For more information on playlist formats (XSPF, SMIL, ASX, …), check out Lucas Gonze’s excellent survey.

There are also some commercial options: hooverwebdesign.com ($50), wimpyplayer.com ($25), soundnails.com ($15)

Podcasting trick #5: play-it-now buttons

Published on January 14, 2005 in music and webdev. 0 Comments

Traxsource podcast
While working with Jurriaan on a podcast for BeyondJazz.net (with their excellent sample spotters show), I finished a small project I had been working on a couple of months ago: a web-based streaming media player for MP3/RAM/WMA files. I actually stopped it when I saw the excellent work Lucas Gonze had done with Webjay. Didn’t feel like re-inventing the hot water.
But now I have added a visual part: I wanted to have a one-click “play this in my media player and show me the playlist at the same time”. So I worked further on the formats that support playing audio while showing a web page at the same time: SMIL (works with RealPlayer and QuickTime) and ASX (Windows Media Player). Since the BeyondJazz blog is not yet public, I also used this system on the Traxsource Cyberjamz Radio Show (another one of my music podcast experiments, together with Traxsource/Brian Tappert).

The idea is the following: instead of having the title of the post as a link to the MP3 (in some cases, when you click it, your browser starts downloading all those megabytes before the audio starts playing), I now have 3 icons: one for playing it in RealPlayer, one for Windows Media Player and one for direct downloading. To do this, I actually just edited the Blogger template as follows:
<h3 class="post-title"><$BlogItemTitle$>
<BlogItemUrl>
<a href="http://www.smoothouse.org/projects/media/player.asp? type=smil&url=<$BlogItemUrl$>&page=<$BlogItemPermalinkUrl$>"
title="Click to open in your RealAudio player">
<img border=0 width="20" height="20" alt="Click to open in your RealAudio player" src="http://www.smoothouse.org/projects/podcast/icon_ram.gif">
</a>
<a href="http://www.smoothouse.org/projects/media/player.asp? type=asx&url=<$BlogItemUrl$>&page=<$BlogItemPermalinkUrl$>"
title="Click to open in your Windows Media player">
<img border=0 width="20" height="20" alt="Click to open in your Windows Media player" src="http://www.smoothouse.org/projects/podcast/icon_wma.gif">
</a>
<a href="<$BlogItemUrl$>"
title="Right-click to download">
<img border=0 width="20" height="20" alt="Right-click to download" src="http://www.smoothouse.org/projects/podcast/icon_download.gif">
</a>
</BlogItemUrl>
</h3>
(if you’re familiar with HTML and/or Blogger templates, try this at home. If you’re not, wear protection.)

I still have to work out some quirks with the Real/SMIL format (on some machines the HTML page does not show), but apart from that, it works like a charm: you click the icon, your player opens, the music starts playing and you see the associated post page in your player.

Remark: this trick does not affect the core podcast as such: the MP3 files, the RSS feed, … stay the same. It’s just a user interface enhancement for the associated blog, with a detailed description for Blogger users. The principle as such will work on any Movable Type, WordPress, or other Pivot.

PS: So what are podcasting tricks #1 to #4?
Well, with all this mumbo jumbo I’ve already posted on podcasting, I couldn’t start counting at #1, now could I? Let me improvize:
#1: easy podcasting with Blogger and Smartcast
#2: podcasting with Webjay
#3: ID3 tags for podcasting
#4: Podcast icons – the definitive collection (also a Pixagogo album)
____
Update Jan 19: the Beyondjazz Podcast is now publicly available.