Sunday, July 26, 2009

Ich bin sehr verärgert.

Miért van ez a személy a másolást nekem? Man nepatīk tas. Les exemples incluent la copie de celui du blog, les mises en page, les comptes. Vaikka se on aivan selvää, että hän kopioida minua, hän väittää toisin. Ele está tirando sarro de mim mesmo agora.

Is it me or does Blogger not load things properly? I can't save the sidebar widgets the regular way.

Wednesday, July 1, 2009

New layout (1 July 2009)



I've changed the blog layout of the technology blog to the above. It's actually based on the earlier layout for my main blog in Japanese. This was achieved by removing the colour and background image of the main frame and applying it to the posts and sidebar background. The rounded corners are actually done with CSS instead of images. The disadvantage about the latter is that it has a fixed width of the entire area it is on without looking out of place, also it has the difficult to modify later on. Like the previous version here, the top navigation menu has been moved to the top.

The header and the sidebar navigation menu background image is actually the same as the background. With the CSS code "background-attachment:fixed;" added on top of that, it looks as though that there is a hole there. However, IE6 users might see the following instead:

Layout (CSS2) are not loaded correctly, video in first post (HTML5) does not load, PNG images with an alpha layer (transparency) is not rendered correctly, text is rendered horribly (WinME and earlier, WinXP without ClearType enabled), among other problems. Makes the blog look horrible when compared to the top image. Only reason why I am mention this despite being old is that many people are still using it. IE8 still incorrectly renders the top navigation menu and does not feature the rounded corners.

It's ironic that this updates blog does not have any layout changes for quite a long time. To tell you the truth, this blog itself is the oldest blog I have here. The blog ID has only 8 digits while the newest has 19 digits!

Speaking of new, Firefox 3.5 makes a lot of pages look outdated.

Thursday, June 18, 2009

New layout (18 June 2009)



I have replaced the Japanese version of my main blog with this new layout. Readers who had been to my layout-testing blog recently (before it got marked as a spam blog) or had been to my main blog (in English) around Mid-2008 or earlier with "Hatena :: Diary" at the top left. (Hatena is where the layout came from and had to modify to be usable as Blogger Classic code.) This was because the old one started to looked awful and it's kind of ironic that both the English and Japanese started off with the same layout theme at the time I first implemented it (forgot when that was though) and that the former blog started to drift apart. The same layout code was also gradually applied to all my other blogs, but with modifications to make them look different.

With this change, I have also changed the side navigation menu to the new style since the old one didn't really match well and can't even see the first post without scrolling down a bit. It's been cleaned up with fewer images and having one of the sidebars removed. The space freed up really helped me a lot on making the blog look better.

I looked back at it earlier this week and decide to use it, but I want it to work with Blogger XML instead of the Classic one to modify it easily. I don't need to get a whole new code: I just need to modify the existing one. If you ask me to do the same thing just a year ago, I probably would not know how to do it. Editing the size and additional words to the date involves further digging into the code accessible with the "Expand Widgets Templates" option checked. What annoyed me is that using Blogger's "Font and Color" settings seemed to only work for the colours and not the typeface of the text despite the code being there and had to modify the code manually.

Speaking of codes, I obtained the colour codes via Inkscape (the program I used to do my vectors) by pressing the button to take a screenshot (in Linux, a prompt soon follows asking where to save the screenshot you just did) and pasting it into the the program. This can get tricky: the bottom part (percentage varies) may become corrupted and appears to be random. Do note that the screenshot might be saved as "pastedpic_***.png" at the folder of where you last saved a file with this program (If unsure, check the properties.). To overcome this, paste the image in Paint first and save it as a PNG (or BMP) file and import it. Since the area of the colour you want to choose, especially text, you might want to use the browser's zoom feature to the area in question before taking the screenshot.

The search box at the bottom right is rather unique too. Since it was copied over from the old code, which itself was from Hatena, I don't really know how it appears to be transparent, is fixed on top, and does not move while scrolling the page. I only know how to change the content or position it.


This comparison image was from last year, describing how different the layout of my latest post (back then) was rendered in various browsers with visible differences. Safari is the one that follows the web standards the most, and Internet Explorer (version 6 and earlier especially) the least.

I didn't make a screenshot before to the current layout, but I did manage to find one of the same layout from quite some time ago:

(It doesn't really differ much, doesn't it?)

And here's the one from before I used that layout:

(Looks nice, but the header image is too large. Despite the large screenshot, the first post can't be seen here. That thing between the header and the ad is an early version of the current side navigation menu. Can't believe how large the text was.)

Will I apply the new layout to the English version too? Well, I haven't decided on that yet, but I did apply the same, consistent, layout for the Anime (Japanese & English) and drawings blogs that previously had bizarre layouts and inconsistency that, looking back, is horrible.

Sunday, June 14, 2009

Re-writing code of anime watch list

Although the newer version might appear identical to the previous version, the code used has been changed. The old code contain stuff like "tr" or "wbr" that I don't really understand. Also, the old table code might appear inwards on Gecko-based browsers (eg. Firefox), but appear normal on other browsers. There also was this mysterious gap between two images.

With code learn from the current versions of my story and the navigation menus, I decided to apply it here too. Using the trial-and-error method at the testing blog (to try something new and in the case something goes wrong), I managed to put this up.

Under the hood changes include:

  • Changing font colour codes: "white" and "black" became "#fff" and "#000" respectively.
  • Using CSS codes instead of HTML to create the border and background colour. (This seems to fix the problem)
  • Used stylesheet for the thumbnails as a background instead of as an image source.
  • The first column below the header of each set of tables are now merged and the text aligned to the right.
  • Table-within-a-table was used to create listing itself.
  • Since the image URLs are move to somewhere else, the codes are easier to work on.

Noticeable changes include:
  • Removal of "Current (...)" and "Upcomming (...)" and kept the words in prephansis.
  • Header text is now aligned to the left.
  • "Segoe UI" and "Myriad Pro" fonts are used for the English version, while "Meiryo" (メイリオ) and "VL PGothic" (VL Pゴシック) will be used for the Japanese versions. (Note: Segoe UI and Meiryo is included in Windows Vista or newer and recent versions of Microsoft Office/Live, Myriad Pro is included with Mac OS X and in a hidden folder of Adobe Reader. VL PGothic comes with OpenOffice.org, and is most likely to be included with recent versions of various Linux distributions if Japanese was installed as one of the display languages.)
  • Images for Umineko, Yoku, and Kobato are added.
  • "Ep" is replaced by "Currently at episode" and "Date" is replaced by "Commencing on"
Although not related, but happened shortly before the change, I had updated the dates of the anime and rearrange them by date. Haruhi and Hayate had swapped places as the former airs earlier.

Wednesday, June 3, 2009

Changes in the navigation menu

Well, my navigation menu you see on the top of the right widget bar is starting to get messier and uglier that I have decided to do a brand new one from scratch. Actually, it got ugly and bulkier from the last update. Not only in appearance, but also the code involved. They are originally supposed to all look the same, with only the title and type of blog changed.


(extracted from an earlier post)
The navigation menu featured here is what it looked like when I first made it. Clean and simple. That empty space there was intentional, but I added random quotes or "Haruka Takahashi's Network". For ones that had the former, it was latter replaced with my latest post from Twitter. Also, hovering over a link there would have a background, but as I found out later on, this also affected other links on the blog. That problem wasn't really fixed until just last month.


(From Updates and Anime blog (English version) blogs.)
Shortly after doing v0030a, I replaced the image and have it aligned to the left. I have also made the links larger and if you hover the row where a particular link is, an image would appear. These are 60*60 images that are (at that time) also used for displaying my drawings on my non-main blogs, which itself, has now changed to 80*80 versions. In the case of the links to the Main and Technology blogs, new ones were used. If the blog does not already have a search box, I would add it as part of the menu.


(Japanese & English versions of my main blogs. Search box is not part of the navigation menu.)
The pink/red colours were originally part of an experiment to try different colours of the navigation menu, but didn't really work out well, especially with the strong red for the title. Since both blogs uses mostly pink/red and matches more than the blue version, I have left it untouched.

Also, I found the images to be quite small and decided to have it occupy the entire row. At first, it was to have the image to gradually fade from transparent to opaque from left to right and have it aligned on the far right, but it looked horrible and editing the images to get it was too troublesome. So I gave up and have it to occupy it completely. Since the blog layout that has this menu the widest is the drawings blog (back then) at 280px, I used that as reference for the maximum width.


(Technology, Drawings, and Anime (Japanese) blogs)
Not too long ago, Yukari changed her navigation menu and me changing my Twitter page (on the same day as I found images of both the avatar and background). Though simple, it actually looked nice. So in order to improve mine, I have to dump all the image codes except the avatar. The avatar is the exact same image used at Twitter, so the area for my avatar has been reduced from 80*80 to 72*72. Originally, they are supposed to have just a white background, but I use the same background as the blog background or any other image that are already used on the blog. This not only makes it looks nicer, but also save bandwidth from loading the images. Since having an image to appear when hovering over a link is removed, even more bandwidth is saved. That black semi-transparent background is actually recycled from the old drawings blog and helps reading against the textured image easier.

Except for the Anime blog in English, I'm not sure if I want to apply the new version to blogs that are still using the older version for legacy reasons or would actually match the blog layout the most. Currently, the diagonal length of the menu on the Japanese main blog is 5 inches, but the drawings blog is 3 inches. That is quite a lot. I might also replace the avatar of the new navigation menu with an identical-looking v0080 when I'm done with it.

Saturday, May 30, 2009

Twitter page

As an anniversary of reaching 666 posts (not really, but was coincidental), I have changed my Twitter profile page.

Before (via Google cache as at 26 May):


After:


What was not shown is that the avatar was also changed at the same time that looked something like .

Quite a dramatic change, eh?

Thursday, May 28, 2009

Drawings widget removed

Since it's redundant to the drawings blog and takes up too much memory and physical space,I have removed the drawings widget on the Main Blog in English, For now however, similar widgets (though might be of different design) on other blogs are left untouched.

With the empty space left behind, I have moved the box with links to the stories I had written there to that space and made some modifications to have it in the horizontal format instead of the previous vertical positioning format. Notice that the table itself was redesigned recently from a basic plain table. The table may look different due to formatting used for this blog, but codes are not modified from the original.


Vertical format:

ストーリ






もう一つの世界
第1話
トキヒ
第1話第2話第3話第4話
偶然な願い
最初話第2話第3話




ノート (英語)














2008年08月11日
making a novel
2008年10月18日
walking home at night; About the "Alternate Dimention" story
2008年12月11日
similarities I noticed
2008年12月12日
rejected version of "Alternate Dimension (Part 15)"
2008年12月15日
progress of v0046 and about "Alternate Dimension (Part 15)"
2009年02月08日
333rd post: Timeline and Character info
2009年04月16日
Rejected Version of "Tokihi (Part 10)"




Horizontal:

Stories & Reviews






An Original Story By Me
Main:01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, Final
Spin-offs:01
Alternate Dimension
Main:01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26
Specials:
Valentine's Day
Tokihi
Main:01, 02, 03, 04, 05, 06, 07, 08, 09
Specials:
Narration Overview, Train Incident
An Unexpected WishPlanned regular releases while away for a long time. Might release other posts during that time.
K-On!01, 02, 03, 04, 05, 06, 07, 08
The Story of a North High Student01



Notes







11 August 2008making a novel
18 October 2008walking home at night; About the "Alternate Dimention" story
11 December 2008similarities I noticed
12 December 2008rejected version of "Alternate Dimension (Part 15)"
15 December 2008progress of v0046 and about "Alternate Dimension (Part 15)"
8 February 2009333rd post: Timeline and Character info
16 April 2009Rejected Version of "Tokihi (Part 10)"




Edit: I don't know what caused that large empty space.

Wednesday, May 13, 2009

thinking of a new layout



This is one of the default layouts at Wordpress. I tried to apply my stuff there, but I find the interface confusing over that of blogger. Also, HTML coding I applied there seems to be stripped down to just the text with colours and links.

Friday, May 8, 2009

navigation menu icons changed (again)

On some of my blogs, I have changed the images with this new style. I wanted to do this earlier, but didn't know how. Turns out that I could use an image-editing software that has been installed on the computer, but rarely used, to do this (GIMP). All the time, I was trying to see if the program I had always been using (Inkscape) has this feature. I still need the latter program for sizing and cropping to the exact dimensions though.

For example, if you were to hover over "Anime", the new version should display as the background. For the older version, it would be or, if I didn't modify as a result of the recent resizing of square thumbnails, . Notice the gradual transparency. As there are some problems with the colour scheme with these new images, I might need to do some adjusting or even replace with new ones. Problem is that, except for ones based on my vectors, finding the original source image again is hard as they are scattered all over. I might also have to remove the borders and that background colour when hovering over text links anywhere on that page.

If you didn't know, that image is from the infamous "WASUREMONO" scene:

Tuesday, May 5, 2009

Anime watch list changes (5 May 2009)

Nothing major this time. As I have updated the upcoming anime list, it would be appropriate for me to update the list too. That list contains only the anime I would like to watch, not everything. Except ones that do not have an official website, hovering over the text for a while would have the alternate language name to appear.

Anyways, here are the changes:

  • Removed "Saki" entry
  • Changed icon image for "Eden of the East"
  • Added image for "Winter Sonata"
  • Moved "Taishō Yakyū Musume." from "Autumn/Unknown" to "Summer"
  • "Yoku Wakaru Gendai Mahō" has been confirmed to first air on 11 July
  • Added "Sora no Manimani", "Tokyo Magnitude 8.0", "Umineko no Naku Koro ni", "Zan Sayonara Zetsubō Sensei", "Kobato.", and "To Aru Kagaku no Railgun"
  • Except for "Umineko no Naku Koro ni" and "Kobato.", all names mentioned in the previous point has images added.


I'm planning to redesign the way my vectors are displayed for my main blogs (v3). The earlier version (v2) is only suitable to be displayed at the sidebar, which, the main blogs lacks in the horizontal section. Right now, it's using an even earlier version (v1).

Why would I want to change?
  • ugly overall layout design
  • inconsistency with other non-main blogs (even the drawings blog uses v2)
  • fails in space optimization
  • inconsistent size of thumbnails, despite all having a common height. V2 has fixed this problem by cropping certain areas with the thumbnail being at common dimensions. Thumbnails used in v3 may be larger than that used in v2.
In order to optimize load times, I have reduced the number of posts per page. I would remove the Tokyo bid for the 2016 summer Olympics countdown when it's over. I should also do something about the banner image as it was never cropped (only hidden from view), so when loading the page, the whole image loads, resulting in longer load times when viewing it for the first time or did not have an earlier cache of it. I'm also aware that internet providers for readers in places like the US have bandwidth caps and charge more if exceed it. (40GB cap plus US$1 for each additional GB exceeding the cap for Time Warner Cable, according to Leo Laporte of twit.tv)

To make things clear on how much bandwith might be saved between v1 and v2, I have found out that uses many times less memory than , but since resizing codes were used, the latter thumbnail is actually . Also, I have earlier reduced the maximum of the smallest length from 1800px to 1280px, and now to 1024px. If I didn't change, v0058 would be just above 1MB, the limit for most image hosting sites. For simplicity's sake, I might also reduce the size from 1024px to 1000px in the future. That small difference might reduce bandwidth and memory space too.