Flux RSS des billets

DotMG's joblog

Work hard at whatever you do! (Ecc. 9. 10a)
La catégorie html a 3 Billets
Publié le 6 Fév 2013, 7:45 am dans cms, html

Today I changed the configuration of this blog to dofollow. For my point of view, the web is a space of sharing and if a visitor adds a valuable comment to something like a blog, the least that the blog owner have to give in return as a gratification is an ounce of Googlejuice.

Nofollow attribute is, in my humble opinion, the worst way to discourage spammers. Except your satisfaction that the spammer didn't get any value in his activity,there is no other advantage. It doesn't discourage spammers and doesn't stop spams in your blog.

So, I am deactivating the nofollow attribute, and will monitor manually the comments. I will be removing comments which don't bring any value, especially those with an hyperlink. I am also planning to make a sort of blogspam.net proxy, to fight spam my way. This proxy will act as an URL blacklist checker, so I will be logging any domain mentioned in a spam comment and reject any further attempt to link to this domain. If the spam passes my check, then this module will forward checking to blogspam.net, before accepting the comment. A final manual review will be performed and possible spams will be deleted again.

Publié le 31 Jan 2013, 10:44 pm dans html

In my last post, I experimented serving a video file using my very own hosting, using HTML5 technology. It was not flawless, so I better note the steps I did, I may need this soon.

The first step was recording the video and copy it to my hard disk. Then, it needed to be re-encoded. But to optimize the resources, I also needed to remove leading and trailing sequences, and crop the video to the rectangle that is of interest. The interesting sequence was starting at second 21 of the original video, and lasted for 23 seconds. -ss 21 -t 23. I also removed 220 pixels from left and right, and 30px/50px from top/bottom. -croptop 30 -cropbottom 50 -cropleft 220 -cropright 220 . The extracted video now have a new aspect ratio. I didn't bother to calculate the absolutely correct value, but -aspect 3:5 gave an acceptable ratio. Then I generated three formats : ogv, webm and mp4. I found the vcodec and acodec parameters to use on Stackoverflow.

ffmpeg -i bootani.MOD -ss 21 -t 23 -b 250k -vcodec libtheora -acodec libvorbis 
  -ab 160000 -g 30 -croptop 30 -cropbottom 50 -cropleft 220 -cropright 220 -aspect 3:5 bootani.ogv

The easiest and coolest part is the use of <video> tag to attach the video.

<video id="video" height="500" width="300" preload="false" autobuffer="true" controls="true">
<source src="/media/bootani.webm" type="video/webm"></source>
<source src="/media/bootani.ogv" type="video/ogg"></source>
<source src="/media/bootani.mp4" type="video/mp4"></source>
</video>
Publié le 25 Sep 2012, 12:14 pm dans html, css
One of the first advices I heard when doing my job as webmaster is to never use tables other than to list tabular data. On this work, I had to present two columns, they should have the same height, their width are fixed. On the left, I should have one column, grey background, 200px width that I call #sidebar, and on the right, another column, white background, 600px width that I call #main_content. These two block should have the same height, equal to the bigger one. With a table, the job would be very easy :
/* CSS: */
#sidebar {
 width: 200px;
 background: #ccc;}
#main_content {
 width: 600px;
 background: #fff;}
<table><tr>
<td id="sidebar"></td>
<td id="main_content"></td>
</tr></table>
With floating divs, this was my first try:
/* CSS: */
#sidebar {
 width: 200px;
 background: #ccc;
 float: left;
 min-height: 800px;}
#main_content {
 width: 600px;
 background: #fff;}
<div id="sidebar"></div>
<div id="main_content"></div>
Unfortunately, CSS3 doesn't have a rule to force the height of one block to be equal to the height of another. And I didn't want to experiment display:table-cell. The solution I found is to let the sidebar have the height it wants, as the min-height was totally useless here, so I removed background and min-height. To make my sidebar have a background color that would fill all the height, I had to put a parent div.
/* CSS */
#parentdiv {
  background: url('grey.png') repeat-y; }
#sidebar {
  width: 200px;
  float: left; }
#main_content {
  width: 600px; }
.closing {
  clear: both; }
<div id="parentdiv">
  <div id="sidebar"></div>
  <div id="main_content"></div>
  <div class="closing"></div>
</div>
The grey background of the sidebar had to be done on the parentdiv, using an image that fills only 200px on the left. But, hey, the height of the parentdiv is not what we think, because some of the child div is floating. Using the <div class="closing"> which is styled clear:both; fixes this. This div has no content, it serves just to fix the height of the parentdiv.