Just I listen rumours about a version of Apple Safari browser in Windows, yeah in Windows!!!, after iTunes, Quicktime and iPod support for non MacOSX, it's the time for Apple Safari, the main web browser of MacOSX. So, I googled a bit, and bingo!.
Download Apple Safari Public Beta for Windows
The Apple info about Safari for Windows promises so much, faster than all the others Windows browsers (the same promises the rest browsers respect the competence). And we go to test. The installation package weights 7,97MB so the download is fast...
Safari loads fast, this is true, but by now, I have shown a few render bugs testing my designs, by example, <strong> tags or font-weight: bold style is not rendered (but if I copy all the test and paste I can see the lost bold text), this is the most important bug that I have shown. After, I can recognize some minimal bugs in the renderer, with CSS box design, by example the footer of the template for this blog, only shows 2 links columns in Safari for Windows, and shows 3 correct columns in the others browsers.
UPDATE: Safari 3.0.2 version repairs the problem of bold typography. 
Finally, I can speak also about good things of this version of Safari. Really Safari render fast, load fast, and works fast with JavaScript (but sadly, crash in some pieces of code). I think that is too soon for make assessment about this software because the beta state, we have wait some release candidate or final version for we can test the real power of this browser.
Note for developers: This safari version has a spider button before the url field for to send feedbacks about the problems with this beta version. Safari is the most used browser in MacOSX, so it is important if we have a Safari version working in Windows for testing our designs. Help you to apple to improve this software
I have used the occasion for to improve my template, for minimize the render problems with Safari and other with the footer. Because my experience, browsers have difficulties with float layers in many designs yet, althought you respect the standars.
Labels: design
Since the latest design (chinesse template) was broken because the images that I uploaded in ImageShare was removed I want to change the design of this blog. I had a default template of blogger for the transition but finally I have got a completally redesigned blog.
This is the steps that I have done:
1. Vectorize my face
Yes, vector art is funny, tedious but funny. Four hours later I have my face vectorized, I follow a simple and good tutorial, Vector Art with Photoshop. And this is the result:
2. Make the design
This step is the most creative step of the process. I choose Xara Xtreme as the perfect program for web design, it is a vector program like Corel Draw, but very very more simple and fast to use. Six hours later....
3. Make the HTML template
Bored, and difficult step. When you have the image of the new template, the next step is take the Dreamweaver, and div's, id's, classes later and after laught one hundred times "Fucked fucked Internet Explorer", I have the HTML template.
At the first time, I design for Firefox, after, I check my CSS+HTML code in Internet Explorer, some conditional comments here and there... and finally I have my template in real HTML (all CSS, no tables).
4. JavaScripting my template
I have made some tabs panels, for links, profile, archives, previous posts, because I would like a clean center block, without any column, so I can use all the screen width for the test (I would like to write code and I need all the width). So I have the info block in the header and the footer. I based my script in jQuery library.
/*** HEADER (TOP TAB PANELS) ****/
/*** CLEAN CONTENT ****/
/*** FOOTER (BOTTOM TAB PANELS) ****/
Also, thinking in writing code samples I need some for beautifully the code, and I remembered the code viewer sample of Mochikit, that it use Code Syntax Highlighter script and that I like it.
$(document).ready(function(){
$("#tab-archives").click(function(){
$("#profile").fadeOut().hide();
$("#archives").show().fadeIn();
});
$("#tab-profile").click(function(){
$("#archives").fadeOut().hide();;
$("#profile").fadeIn().show();;
});
$("#tab-links").click(function(){
$("#articles").fadeOut().hide();
$("#links").show().fadeIn();
});
$("#tab-articles").click(function(){
$("#links").fadeOut().hide();;
$("#articles").fadeIn().show();;
});
$("#title").click(function(){
document.location.href="http://letmehaveblog.blogspot.com/";
});
$("pre.javascript, pre.html, pre.php, pre.xml").each(function(){
inner_code = $(this).html();
inner_code = inner_code.replace(/
/gi,"\n");
textarea_ins = $("").attr({
"name": "code",
"class": this.className
}).val(inner_code);
$(this).after(textarea_ins);
$(this).remove();
});
dp.SyntaxHighlighter.HighlightAll('code');
});And finally, optimizing the code, for this I have used Dojo ShrinkSafe, compress all Syntax Highlighter related files in one reduced file stripping the lines and without comments.
5. Upload the external files in a web storage server
Blogger service has not external storage features, so I can insert inline the CSS code and all the JavaScript code, but the images is not possible, yes I can upload to flickr but... I have a web storage server in USA with 1TB of capacity so I have uploaded to a folder in my main domain www.sevir.org . And I can use relative url's in the CSS without problems.
6. Convert the HTML template in a Blogger template
I have take the default template that I have used and this good help, Publishing a Blog with Blogger. Then I have need a list of categories (labels in blogger syntax), but I read that there are two differents methods for templates, the old (pseudo tags), and the new (XML expanded namespaces), I have not any sample of the new template syntax and I have not time to read and learn the new template syntax.
The decision is clear, I have used the old method, and I have made the category list manually. Remember update the list regularly...
7. Final retouchs
Finally, I open Windows Live Writer, Tools > Accounts > Editing > Update Style, for download the new style in Windows Live Writer preview mode. Now I can say that I finish. A weekend later
The result, you can see it.
Labels: design