Thursday, September 8. 2011
SOCKS proxy on KDE
Saturday, July 2. 2011
The sad state of our websites.
As you might know, kde's webteam is working on a complete rewrite of KDE.org.
One of main objectives is very serious attention to our applications. We have world-class applications but they have very unfancy webpages. Our objective is to fix it.
So i wanted to look around and see how other web pages are doing. I opened homepages of all free (as in free speech) applications i could. then browsed them one by one and picked the best ones.
Results?
- Free Software's barely have good websites.
- The ones that do, mostly have financial support. (Sunbird, Aptana, Firefox, Songbird).
This slideshow contains screenshots of the best Free Software websites I could find:
So i wanted to see the situation in propertiary world. I looked for mac applications and opened up their web pages.
The following slideshow contains best mac application pages i found:
This is mostly sad. Our applications are not lacking quality wise. Its just that website is considered a 'promo' feature and hackers usually dont have the motivation and/or skills to improve it.
Now, looking at most good looking pages, you can simply find a pattern. Specially on the Propertiary side.
- They honor their icons. In most of them, their icon gets the most attention. As a matter of fact, the icon is the main branding feature. Thanks to Oxygen guru's, we have outstanding icons for our applications. Just take a look at Konqueror's icon. Or Digikams. I can stare at them for 5 minutes.
- They avoid text. Visitors dont read paragraphs. They only read headlines. Thats a fact. Deal with it. Dont fsck the page describing your features.
- They dont teach history. It doesnt matter whats the philosophy of your project. It doesnt matter if its a fork on another project. It doesnt matter if its a KDE project or a Gnome project. It doesnt matter 'who' developed it. At least, none of them are priorities for your front page.
- They barely have news. And, as a matter of fact, news will probably make your website look bad and outdated. Because you cant keep them all updated. Gnome-Do's webpage looks good and it has a news section. Guess what! Last news is for 2009. Is Gnome-Do dead or deprecated? I dunno. Their last news item is 2 years old.
- Screenshot rulez! You will never buy a car without knowing how it looks. Visitors wont install your application if they dont know how it looks.
- Forget about other pages. For casual users, you mostly have a single chance of convincing her to install your app. Thats called front page. If she hits a big geeky wall of text, she wont go any further. She'll close the tab.
- They all have a big Download/Buy button. Of course. But we dont. We cannot have that. Because we dont know user's distribution. Or whats the package name of eg Okular on that specific distro.
(Update: For some unknown reason, slideshows dont show up in KHTML.)
Wednesday, June 22. 2011
Goodies for Join the Game members
There are now some goodies available for Join the Game members.
You can embedd banners like these in your blogs and home pages, and help KDE even more!
Please login to Join The Game's webpage and click on 'Widgets' link on menubar.
Currently we only have the above sizes available. If you want different sizes, tell me.
Non-members: We've also got automatic payments (paypal). You can start your membership in only a few minutes.
KDE e.v will use your help to make sure KDE's infastructure continues to scale. Also, sprints and conferences are possible with your donations.
Thursday, June 16. 2011
Recent developments on kde pages
New KDE-WWW logo.
- New JoinTheGame website launched. Design by Nuno. It looks awesome.
- Konqueror's webpage had an overhaul. It looks much better as well.
- First KDE-WWW sprint held in Essen, Germany. I missed it, but followed it very closely.
- Some rules set for kde subdomains. Hopefully they will prevent outdated and useless subdomains. They make kde look very bad.
- We got a new logo! Designed by Eugene Trounev (it-s)
- Many outdated and useless subdomains were removed.
- New plans in place for kde.org and related websites. More on that will follow soon. VERY exciting.
- KDE Sysadmins provided webstats for many kde webpages. We can now see which pages are in use.
- Userbase received many improvements, specially its translation system. Userbase guys and gals are doing an incredible job over there.
- Userbase also got a new logo, again by Eugene.
- KDE Edu got a new logo and webpage. Its also translated into 4 languages.
- KDE's blogging platform (aka kdevelopers.org) got a facelift. Looks much better now.
As your first contribution you can update Kopete's webpage. Apperantly its getting a lot of hits, but its very very outdated.
Saturday, May 7. 2011
Konqueror's new webpage
One thing I learned after observing planet kde through last 3/4 years is: 'blogging brings enthusiasm'.
Thats why I started blogging about little work I do on kde's webpages and it worked. After my blog post about future of kde's web presence, Martin Nuber (mjn) contacted us on #kde-www channel to see how he could get involved. And now:
Thanks to Martin for working on it.
And, please remember: If you have a minimal html/php knowledge, you can take care of one of many many outdated kde websites.
- Its very easy. Its almost plain html.
- Each website, usually takes a few days to be completely refreshed (Martin spent ~3 days working on it)
I'd say Kopete or KDE Events webpages are both good candidates for having a new look and updated content. What do you think?
Monday, April 4. 2011
Sprint management
Thursday, March 31. 2011
Future of kde's web presence
Saturday, September 25. 2010
SVG manipulation using php and xpath
(This is not a KDE related post)
I've had very little experiences with SVG manipulation on server side. So i thought i'd better share it.
Following is a very little guide about creating a dynamic frame for your pictures. And its just supposed to show how cool stuff could be done using SVG, XPath, PHP and a SVG rendering tool, like rsvg.
You upload your family picture, it places it inside a very cool frame. Thats it.
Good thing about SVG is, you can do some real WYSIWYG. So, open your favourite svg editor, and create a cool frame.
(I suck at artistic stuff, so I borrowed the frame from this page.
Then, You should import an example picture which is supposed to be a placeholder for uploaded family photos.
To add a cool effect, i duplicated the image and stretched it a bit:
Then i added the blur effect to make it look cool and fancy.
SVG features a group feature, by which you can group a few elements togheter. We do it because later, it will allow us to transform the image painlessly.
There are many group's on the document. Later, we have to be able to find the one we want. So we use inkscape's XML editor feature and give our group (<g>) element the 'frame' id.
We should also fit our page to the whole frame. So we use inkscape's feature. Select the whole frame, then use the 'Fit page to selection' button inside the 'Document properties' dialog.
And, last, save your SVG file. Make sure you save it as plain SVG, not an inkscape SVG or any other modified SVG file.
Now save the following into an html file.
and here is show.php file. I explain it step by step.
DOMDocument, is a php class for accessing DOM objects. first, we create a DOMDocument. Then, in the second line, we load our SVG file onto it.
Now, we have to replace the placeholder (in our case, Griffin's family) with the uploaded one.
First, we save the uploaded one as a temporary file:
Remember some html? to embedd an image, we had to do the following:
in SVG, it has to be done this way:
We currently have two placeholder <image>'s there. the main one and the blurred one.
So we have two of the following in our page:
We should find <image> elements. Thats where XPath comes in.
First, we create an XPath object from our DOMDocument.
Then, in the second line, we look for all <image> tags inside the whole document.
XPath object searches through provided DOMDocument and the query results are DOMElement's, which are inside the DOMDocument. So by altering the results of XPath query, we are actually manipulating our $document:
we altered $document which now contains <image> elements whom link to uploaded image, not the placeholder.
Now images are replaced. We also got some Size and Rotate stuff on input. SVG, means Scalable Vector Graphics. We should be able to resize the image as much as we want.
to resize the image, we have to use some SVG features. Remember that we grouped our frame?
A group, in SVG file, is represented by a <g> element. Our <g> has the id='frame' so we could find it easily.
Now, $group, represents our <g> element.
<g> element in svg accepts a very cool attribute named transform. we can use the transform attribute to resize the whole group, or rotate it.
Like this:
This will scale up the group by 2 times and rotate it 30 degrees. (notice that there is no ; between transform functions)
So we should apply user's input to our <g>.
(Notice that scale should be between 0 and 1 where 1 means 100%)
But its not enough. Without doing any change, our document size fits our <g>'s size.
But when we changed our <g>'s size, they dont fit anymore. And we have to fix it.
SVG's root element in
Thats it. now we have to generate a png from our svg file.
I use the rsvg command to generate it.
usage is simple: rsvg input.svg output.png
as you see, it gets an input. so we have to save our manipulated svg file first:
we save our svg file as temp.svg, then run the rsvg command to generate png file and then remove temporary files. at last, we show it.
This was just a demo. A lot more could be done using the techniques mentioned above.
And, this is the live working copy.
I've had very little experiences with SVG manipulation on server side. So i thought i'd better share it.
Following is a very little guide about creating a dynamic frame for your pictures. And its just supposed to show how cool stuff could be done using SVG, XPath, PHP and a SVG rendering tool, like rsvg.
You upload your family picture, it places it inside a very cool frame. Thats it.
Good thing about SVG is, you can do some real WYSIWYG. So, open your favourite svg editor, and create a cool frame.
(I suck at artistic stuff, so I borrowed the frame from this page.
Then, You should import an example picture which is supposed to be a placeholder for uploaded family photos.
To add a cool effect, i duplicated the image and stretched it a bit:
Then i added the blur effect to make it look cool and fancy.
SVG features a group feature, by which you can group a few elements togheter. We do it because later, it will allow us to transform the image painlessly.
There are many group's on the document. Later, we have to be able to find the one we want. So we use inkscape's XML editor feature and give our group (<g>) element the 'frame' id.
We should also fit our page to the whole frame. So we use inkscape's feature. Select the whole frame, then use the 'Fit page to selection' button inside the 'Document properties' dialog.
And, last, save your SVG file. Make sure you save it as plain SVG, not an inkscape SVG or any other modified SVG file.
Now save the following into an html file.
<html> <head> <title>SVG photo-frame</title> </head> <body> <form action="show.php" enctype="multipart/form-data" method="post"> Photo: <br /> <input type="file" name="photo" /> <br /> <br /> Rotate: <br /> <input type="text" name="rotate" value="0" /> <br /> <br /> Size: <br /> <input type="text" name="size" value="100" /> % <br /> <br /> <input type="submit" value="Daa it Co0l!"/> </form> </body> </html>
and here is show.php file. I explain it step by step.
<?php$document=new DomDocument;$document->loadXML(file_get_contents('/path/to/your/svg/frame'));
DOMDocument, is a php class for accessing DOM objects. first, we create a DOMDocument. Then, in the second line, we load our SVG file onto it.
Now, we have to replace the placeholder (in our case, Griffin's family) with the uploaded one.
First, we save the uploaded one as a temporary file:
copy($_FILES['photo']['tmp_name'],'temp.png');
Remember some html? to embedd an image, we had to do the following:
<img src="/path/to/image.png"...
in SVG, it has to be done this way:
<image xlink:href="/path/to/image.png"...
We currently have two placeholder <image>'s there. the main one and the blurred one.
So we have two of the following in our page:
<image xlink:href="/path/to/image/we/imported/in/our/svg/editor.jpg">
We should find <image> elements. Thats where XPath comes in.
$xpath=new DOMXpath($document);$images=$xpath->query('//image');
First, we create an XPath object from our DOMDocument.
Then, in the second line, we look for all <image> tags inside the whole document.
XPath object searches through provided DOMDocument and the query results are DOMElement's, which are inside the DOMDocument. So by altering the results of XPath query, we are actually manipulating our $document:
foreach($imagesas$image){// Each $image is represents one <image> element.$image->setAttribute('xlink:href','temp.png');}
we altered $document which now contains <image> elements whom link to uploaded image, not the placeholder.
Now images are replaced. We also got some Size and Rotate stuff on input. SVG, means Scalable Vector Graphics. We should be able to resize the image as much as we want.
to resize the image, we have to use some SVG features. Remember that we grouped our frame?
A group, in SVG file, is represented by a <g> element. Our <g> has the id='frame' so we could find it easily.
$group=$xpath->query("//group[@id='frame']/0")->item(0);
Now, $group, represents our <g> element.
<g> element in svg accepts a very cool attribute named transform. we can use the transform attribute to resize the whole group, or rotate it.
Like this:
<g id="foo" transform="scale(2) rotate(30)">
This will scale up the group by 2 times and rotate it 30 degrees. (notice that there is no ; between transform functions)
So we should apply user's input to our <g>.
$group->setAttribute('transform',"scale(".$_POST['size']/100.") rotate(".$_POST['rotate'].")");
(Notice that scale should be between 0 and 1 where 1 means 100%)
But its not enough. Without doing any change, our document size fits our <g>'s size.
But when we changed our <g>'s size, they dont fit anymore. And we have to fix it.
$svg=$xpath->query('/svg')->item(0);$width=($_POST['size']/100)*$svg->getAttribute('width');$height=($_POST['size']/100)*$svg->getAttribute('height'); $svg->setAttribute('width',$width);$svg->setAttribute('height',$height);
SVG's root element in
Thats it. now we have to generate a png from our svg file.
I use the rsvg command to generate it.
usage is simple: rsvg input.svg output.png
as you see, it gets an input. so we have to save our manipulated svg file first:
$temp=fopen('temp.svg','w+');fwrite($temp,$document->saveXML());fclose($temp); exec('rsvg temp.svg out.png');unlink('temp.png');unlink('temp.svg');?><img src="out.png"/>
we save our svg file as temp.svg, then run the rsvg command to generate png file and then remove temporary files. at last, we show it.
This was just a demo. A lot more could be done using the techniques mentioned above.
And, this is the live working copy.
Monday, March 8. 2010
Tehran's 4.4 release party
On Feburary 18th, Tehran Linux Users Group gathered in Cafe Prague (a nice cafe in Tehran) to celebrate KDE SC 4.4's release.
We had so little time to arrange everything and there were shortcomings, but it wasnt bad after all.
We gave a piece of [KDE] cake to everyone present at cafe, with a paper describing what FOSS is. Too bad we hadnt time to burn live discs so they can really try it immediately.
Also, at the end, we created a very little KDE domino. Not that we are good at it or something, it was just fun. It was our first time and it didnt collapse as beautiful as what we saw on TV. Maybe a bigger and better one next time
I would thank Behnam, for helping me out with all stuff and Abbas, who was my partner on domino project
We had so little time to arrange everything and there were shortcomings, but it wasnt bad after all.
We gave a piece of [KDE] cake to everyone present at cafe, with a paper describing what FOSS is. Too bad we hadnt time to burn live discs so they can really try it immediately.
Also, at the end, we created a very little KDE domino. Not that we are good at it or something, it was just fun. It was our first time and it didnt collapse as beautiful as what we saw on TV. Maybe a bigger and better one next time
I would thank Behnam, for helping me out with all stuff and Abbas, who was my partner on domino project
 |
 |
 |
 |
 |
 |
 |
