web development tipsb0

this is obsolete doc -- see http://doc.nethence.com/ instead

HTML & web development tips 



XHTML/CSS valid ! 

Add those links inside your code, 

<a href="http: //validator.w3.org/check?uri=referer">html</a>/<a
 href="http: //jigsaw.w3.org/css-validator/check/referer">css</a>

otherwise validate from the command line, 

tidy -q -i -w 79 -c -asxhtml -utf8
#-language fr

note. you might get tidy & libtidy from EPEL (http://fedoraproject.org/wiki/EPEL) 

note. there's also xmllint, 

#xmllint --format --nowarning
#--encode latin0



Image float 

Make them float ! 

<img style="float:left;" style="padding:0 40px 40px 0;"
 src="image.jpg" alt="image" />
 text<br />
 text<br />
<div style="clear:both;"></div>




You could try to add this style to limit the width for WYSIWYG printing, 

<style type="text/css" media="print, handheld, projection, tty, tv"><!-- 

body { margin:0; padding:5px; width:640px; } 




Transparent PNG even for IE5,6 

Note. fixed since IE7 


Check the size of the image to force the width and height, 

identify image.png


Add this class to your CSS (Firefox), 

div.flower { background:url(image.png) no-repeat; width:100px; height:100px; } 

note. change width and height accordingly 


Also add this condition to the head tag (IE5,6), 

        <!--[if gte IE 5]>
        <style type="text/css">
        div.flower {
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

Note. no need to comment the style tag to be html valid, the condition itself is a comment 


Into the HTML code, replace your img tag with a div element calling the class, 

<div class="flower"></div>




Add this to your HEAD code, 

        <link href="/favicon.ico" type="image/x-icon" rel="icon" />
        <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />


Note. for the following solutions, you'll have to wipe out the cache AND restart your web browsers to validate 

Note. IE6 doesn't want 32x32 winicons, but 16x16 works just fine, even w/o adding the website to bookmarks 


Solution 1 (recommended) 

Save your 16x16 image as png with e.g. Paint.NET. Then convert it to winico, 

rpm -q netpbm netpbm-progs
pngtopnm favicon16.png > favicon16.ppm
pngtopnm -alpha favicon16.png > favicon16.pgm
ppmtowinicon -andpgms -output favicon.ico favicon16.ppm favicon16.pgm
rm -f favicon16.ppm favicon16.pgm


Solution 2 

Save your 16x16 image as PNM or PPM (raw encoding) with Gimp. Then convert it to winico, 

rpm -q netpbm netpbm-progs
ppmtowinicon -output favicon.ico favicon16.pnm
rm -f favicon16.pnm


Solution 3 

Save your 16x16 image as XPM with Gimp. Then convert it to winico, 

xmp2wico ...


Other solutions 

- Iconforge (http://www.cursorarts.com/ca_if.html) 

- FavIcon from Pics (http://www.html-kit.com/favicon/) 

- png2ico (http://www.winterdrache.de/freeware/png2ico/) 

- Icon Packager (http://www.stardock.com/products/iconpackager/) 

Note. ImageMagic's convert -colors 4, 8 or 16 doesn't seem to be enought to make it work 



Dew* installation 

FLV Flash player : http://www.alsacreations.fr/dewtube 

MP3 Flash player : http://www.alsacreations.fr/mp3-dewplayer.html 


Deploy the thing into your website's root folder, 

mkdir -p dew/
cd dew/
wget http://www.alsacreations.fr/dl/dewplayer.zip
wget http://www.alsacreations.fr/dl/dewtube.zip
#wget http: //www.alsacreations.fr/flashswf/dewplayer.zip
#wget http: //www.alsacreations.fr/flashswf/dewtube.zip
mkdir player/
unzip dewplayer.zip -d player/
unzip dewtube.zip
mv dewtube/ tube/
#chown -R webuser:webusers dew*









Encode the video as FLV 

Encode your your video with Riva FLV Encoder (http://www.rivavx.com/index.php?encoder). Riva has shell integration and is able to create the video preview image. Note. avoid Flashconv trial version which ads an horrible advertisment in the flv videos. 


Use Mediainfo (http://mediainfo.sf.net/) to look for those parameters, 

video / width
video / height
video / scan type
video / frame rate
audio / bit rate
audio / sampling rate



Embed an FLV video (Dewtube) 

Embed an FLV video with Dewtube, 

<object type="application/x-shockwave-flash" 




  <param name="movie" value="dewtube/dewtube.swf" /> 

  <param name="flashvars" 

    value="movie=../video.flv&width=512&height=384" /> 


Note. for autostart, add that flashvar, 


Note. for Dewtube, the path is relative to the flash executable 

Note. for Dewtube to enable fullscreen, add, 

<param name="allowFullScreen" value="true" />



Embed an MP3 (Dewplayer) 

Embed an MP3 with Dewtube, 

<object type="application/x-shockwave-flash"
<param name="movie" value="dewplayer/dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3" />
<param name="wmode" value="transparent" />

Note. for autostart, add that flashvar, 


Note. for Dewplayer, the path is relative to the HTML page 

Note. for Dewplayer to show the music track time, 




Page auto reload 

Add this into HEAD, e.g. 5 seconds, 

<meta http-equiv="refresh" content="5" />

and eventually add a immediate reload link, 

<a href="javascript:this.location.reload();">Refresh<a>



Free images & icons 

FAMFAMFAM Icons : http://famfamfam.com/lab/icons/ 

Wikipedia:Icons : http://en.wikipedia.org/wiki/Wikipedia:Icons 

iconlet : http://www.iconlet.com/browse 




Quick view : http://www.sempaionline.com/colors.html 

Purples : http://www.december.com/html/spec/color4.html 




- Mapedit : http://www.boutell.com/mapedit/download.html 

- Clickable Image Map Maker : http://www.linkedresources.com/tools/cimm.shtml 



Rich text editors 

Cross-Browser Rich Text Editor (RTE) : http://www.kevinroth.com/rte/ 

TinyMCE : http://tinymce.moxiecode.com/ 

htmlArea : http://www.htmlarea.com/ 

Xinha : http://xinha.python-hosting.com/ 

FCKeditor : http://www.fckeditor.net/ 



HTML editors 

- Text editors 

- NVU 

- Adobe GoLive (discontinued) 

- Adobe Dreamweaver 

- Aptana_Studio (http://www.aptana.com/) 



References -- XHTML & CSS basics 





(FR) CSS : http://fr.selfhtml.org/css/formats/incorporer.htm 

(FR) Floating images : http://www.pompage.net/pompe/impression/ 

(FR) Media types : http://www.yoyodesign.org/doc/w3c/css2/media.html 



References -- CSS Advanced 

Cascading Style Sheets: http://w3.org/TR/CSS21/ 

No tables for layout : http://xrl.us/kd35 

Vertical align : http://reisio.com/examples/vertcenter/ 

Vertical center : http://zoffix.com/zoffix/css/vertcenter.shtml http://zoffix.com/new/css-vertical-center.html http://reisio.com/examples/vertcenter/