Skip navigation.

The Corner of My Soul

Chào mừng các bạn đến WallPearl's Blog. Hiện WPB có một số link download đã hết bandwidth. Xin hãy để lại e-mail nếu bạn không thể download e-books tại đây.

Posts tagged with "Cool"

Nhận Diện Ngôn Ngữ Bằng CSS

, , , ...

Một số website đa quốc gia như Google hay Yahoo có sẵn một cơ chế rất hay là nhận diện IP của người truy cập để hiển thị các trang có ngôn ngữ và giao diện phù hợp. Điều này có lẽ không mới mẻ hay đặc biệt gì. Tuy nhiên nó tạo cho người dùng cảm giác thân thiện và dễ sử dụng hơn. Là một kinh nghiệm tốt mà các website lớn nên học tập. Nói tới đây thì ý Pearl là WPB cũng là blog bự nên Pearl cần học tập Google 1 chút. Vậy phải làm sao đây?

Trong HTML có một thuộc tính gọi là lang. Thuộc tính này đóng vai trò chú thích về ngôn ngữ của một trang hay một phần trang web. Nó không ảnh hưởng đến nội dung trang web mà chỉ đóng vai trò hỗ trợ cho các search engine và trình duyệt trong việc phân loại ngôn ngữ tìm kiếm và hiển thị trang web chính xác hơn. Mặc dù không ảnh hưởng đến nội dung trang web. Tuy nhiên người viết CSS lại nảy sinh một nhu cầu là tạo style riêng cho những (phần) trang web được đánh dấu là viết ở một ngôn ngữ nào đó. Đó là lý do mà CSS có thêm 1 pseudo-class gọi là :lang. (Nói nhiêu đó đủ hiểu rồi ha. Lâu rồi Pearl không viết tuts nên thấy không hấp dẫn lắm mặc dù trong đầu ý kiến tràn trề).

Cho một ví dụ chơi nhá. Giả sử bạn có 2 paragraph như thế này

<p lang="vn">WallPearl rất rất là đẹp dzai</p> (ví dụ thôi nhá)

<p lang="en">WallPearl 's very handsome</p> (example only)


Bạn muốn câu tiếng Việt nó đỏ, câu tiếng Anh nó xanh + thêm cái khung cũng màu chữ thì bạn sẽ viết CSS như vầy.

p:lang(vn){color:red;border:1px solid red} 

p:lang(en){color:blue;border:1px solid blue}


Ây có vẻ đơn giản và nói nhỏ nhiều bạn sẽ khoái xài id hơn vì nó ít hơn 2 ký tự ấy nhỉ. Nhưng bù lại lang có giá trị ghi chú ngôn ngữ hơn.

Ở trên là ví dụ đại trà. Bi h Pearl quay lại vụ cái blog. Lâu rồi không làm skin mới (dù vẫn còn rất ham hố nhưng hơi lười + bận). Từ khi MYO đưa ra mấy cái giao diện ngôn ngữ thì bạn đã tính chuyện quậy rồi nhưng mãi bi h mới làm. Cái ý tưởng là bạn sẽ cho thay background blog và 1 số thành phần + thêm câu chào tương ứng với từng giao diện ngôn ngữ. Khi người Nhật ghé sẽ thấy cái background có phong cách Nhật + câu chào bằng tiếng Nhật thì chắc sẽ có cảm tình hơn với chủ nhà mặc dù chủ nhà mù Nihongo. Ấy ý tưởng là thế, bắt tay cái nào. Trước tiên ta sẽ xem cái code language của MYO. MYO có tổng cộng 18 cái giao diện ngôn ngữ với các ký hiệu tương ứng là bg cho BúnGàRi, cs cho Séc, da cho Đan Mạch, en cho cái mà ai cũng biết, es cho Tây Bán Nhà, fi cho Phần Lan, fy cho Hà Lan, hu cho Hungari, it cho Ý, ja cho Nhật, no cho Na Uy, pl cho Ba Lan, ru cho Nga, tr cho Thổ, uk cho Ukraina, vn cho Việt Nam, xx-lol cho con mèo, zh-cn cho Trung Quốc.

Bi h bạn muốn đổi cái background thành hình núi Phú Sĩ khi người dùng bật qua giao diện tiếng Nhật nhá

body:lang(ja){background:url(Fuji.jpg) no-repeat}


Bạn cũng muốn viết cái câu chào bằng tiếng Nhật nữa. Viết ở đâu bi h bạn viết đại ở dưới avatar luôn còn ai thích viết đâu tùy.

#myphoto:lang(ja):after{content:"ブログ WallPearl にようこそ!"} 

(câu CSS này có nghĩa là đăt câu ... phía sau thành phần myphoto khi ngôn ngữ trang web là tiếng Nhật đó)

Tương tự, rãnh quá bạn viết nốt lời cảm ơn người ta comment luôn

#newcomment h3:lang(ja):after{content:"ありがとうございました!"}


Đó chỉ có nhiêu đó thôi là cái blog sẽ có phong cách tắc kè hoa liền. Vì bi h đang là mùa thu nên bạn làm luôn style mùa thu cho tất cả. Vì lý do kỹ thuật nên bạn vẫn chưa tìm được hết các hình ảnh đặc trưng cho mỗi ngôn ngữ nên tạm thời làm đại làm lẹ để đem khoe thôi. Trong đó có sử dụng hình ảnh của skin Y!360, Hi!Baidu, Deviantart và search từ Google quên rồi. Nhân đây xin cảm ơn mấy chỗ đó luôn. Có gì mai mốt Pearl mượn tiếp.

Bây giờ, mọi người thử vào blog Pearl rồi chọn giao diện ngôn ngữ khác và quan sát background, cái phần dưới photo trên sitebar với chỗ comment xem có gì khác hông nhá. À quên cái anh IE vẫn chưa được bác Steve Ballmer cho học xóa mù nên nó hem hiểu mô tê gì vụ này hết nên ai xài IE để vi vu blog Pearl thì sẽ được thấy cái màu xanh u như kỉ.


--------------------------------------------------------
Viết xong ý chính rồi tranh thủ bán tiếp than. Tình hình là 9/8 bạn phấn khởi comeback xong hôm sau bạn đã có thể ăn cơm nhưng cái máy tính nó phân bì nên bạn cho nó đi ăn cháo bù. Công nhận tháng xui, năm hạn có khác. Ủ qua tháng 9 mới chữa cho nó luôn. Tính 9/9 comeback tiếp vào ngày đẹp nhưng comeback hoài thấy dễ ăn dép quá nên thôi 5/9 bon chen khai blog lại luôn. Hi vọng đợt này làm ăn ngon lành tí. Sẵn cảm ơn mọi người đã quan tâm, ủng hộ, spam WPB trong những ngày qua. Xin chân thành cảm ơn!

Làm Skin Ăn Liền Cho Opera

, , , ...



Xử lý xong em Cáo. Hôm nay, Pearl xin giới thiệu với mọi người thêm cách để làm điệu em O luôn. Thật ra thì Pearl thấy làm skin cho Opera tương đối đơn giản hơn. Cụ thể là skin Opera đều được đóng gói thành 1 file .zip. Trong đó sẽ chứa các folder backgrounds, icons, buttons và 1 file cấu hình skin.ini (cũng có cấu trúc tương tự CSS vậy). Cho nên việc làm skin Opera cũng gần với công việc thiết kế một template bằng CSS. Cái quan trọng là bạn cần phải biết về code dùng trong file skin.ini cũng như phải tẩn mẩn thiết kế hàng trăm graphics sẽ dùng cho skin. Tuy nhiên hôm nay Pearl sẽ không bàn tới chuyện làm toàn bộ một skin to tát như vậy. Hôm nay Pearl sẽ chỉ giới thiệu với mọi người 1 cách thức để tự làm 1 skin đơn giản mang phong cách cá nhân nhưng tất nhiên cũng không kém phần đẹp (cái này là tùy vào thẩm mỹ của từng người). Cái ý tưởng là chúng ta sẽ chỉ thay đổi background, text color cho phần đầu và chân của trình duyệt thôi. Nó hoàn toàn tương tự với phương thức của add-on Personas mà Pearl đã giới thiệu.

Theo như ý tưởng ở trên thì việc đầu tiên là chúng ta sẽ phải tìm trong file skin.ini section (có tính năng định danh như selector của CSS vậy) quy định về phần đầu và chân của trình duyệt. Section [Browser Window Skin] quy định style của các vùng bao gồm một số toolbars như Mainbar ([Mainbar Skin]), Personal Bar ([Personalbar Skin]), Tab Bar ([Pagebar Skin]), Status Bar ([Statusbar Skin]) và cả Menu ([Menu Skin]) nên sẽ thích hợp cho công việc này. Hơn nữa trong Opera cũng có một cách thức thể hiện ảnh nền rất hay là BoxTile. Theo đó ảnh nền của một section có thể được định nghĩa lên đến 9 ảnh bao gồm 4 góc, 4 cạnh và trung tâm. Cho nên chỉ với 1 section [Browser Window Skin] chúng ta hoàn toàn có thể tô vẽ thoải mái background cho 2 vị trí đã định. Vấn đề khó khăn còn lại chỉ là section [Browser Window Skin] nằm dưới các section quy định style cho Menu, Toolbars cho nên sẽ bị ảnh nền các thành phần này che mất. Để giải quyết vấn đề này thì hoặc chúng ta sẽ xóa đi phần định nghĩa ảnh nền cho các Menu, Toolbars trên. Hoặc chúng ta sẽ giảm độ mờ đục của chúng xuống. Để đơn giản và giúp skin bóng bẩy hơn Pearl sẽ chọn cách 2 là giảm độ mờ đục các ảnh này xuống.

Khởi đầu chúng ta sẽ vào thư mục skin chuẩn của Opera theo đường dẫn %ProgramFiles%/Opera/Skin (gõ trong Run hay Address Bar của Explorer). Chúng ta sẽ copy file skin chuẩn của Opera là standard_skin.zip. Mở file standard_skin.zip copy bằng WinRar (đáng lý là giải nén rồi làm nhưng hình như Opera không làm việc với các skin đóng gói bằng WinRar và cả Windows Compress nên bài hướng dẫn này Pearl sẽ làm trực tiếp từ WinRar luôn). Trong WinRar chúng ta sẽ chọn file skin.ini và bấm Ctrl + C để copy. Vẫn để nguyên cửa sổ WinRar chúng ta sẽ chuyển qua 1 thư mục nào đó bên Explorer và bấm Ctrl + V để paste file skin.ini. Mở file skin.ini này lên. Chúng ta có thể ghi chú một số thông tin về skin chúng ta đang thực hiện ở section [Info]. Sau đó chúng ta sẽ xóa đi các thuộc tính ở section [Browser Window Skin] và viết lại cho phù hợp với skin đang làm.

Nếu bạn chỉ muốn đặt một background ở phần top và 1 background ở bottom thì bạn sẽ thêm các thuộc tính sau vào section [Browser Window Skin]

[Browser Window Skin]
Type = BoxTile
Tile Top = Top.jpg
Tile Bottom = Bottom.jpg
Color = #d9dde2

Lưu ý: bạn nên chọn ảnh làm background có kích thước phù hợp. Theo Pearl thì ảnh nền ở phần đầu nên có kích thước bằng bề ngang độ phân giải hiện hành trên màn hình máy bạn và 200px cho chiều cao. Tương tự ảnh nền ở phần chân sẽ có chiều cao khoảng 100px. Nếu chiều ngang của ảnh không đủ mặc định ảnh sẽ được repeat theo phương ngang. Riêng về thuộc tính Color = #d9dde2 sẽ quy định màu nền vùng trống nếu ảnh của bạn bị hụt.

Sau khi đã chỉnh sửa các thông số trên cho file skin.ini. Chúng ta sẽ lưu lại và copy nó từ Explorer paste thẳng vô cửa sổ WinRar bằng Ctrl + V (mặc định WinRar sẽ overwrite nó lên file skin.ini cũ). Công việc tiếp theo là bạn sẽ phải copy 2 file ảnh Top.jpg và Bottom.jpg đã chuẩn bị sẵn vào file standard_skin.zip copy luôn (nằm cùng chỗ với file skin.ini). Bây giờ bạn đóng file standard_skin.zip copy lại và rename nó thành một cái tên phù hợp hơn. Chép nó lại vào thư mục skin chuẩn của Opera. Bây giờ chúng ta sẽ khởi động Opera lên và bấm Shift + F12 để mở hộp thoại Appearance lên. Trong thẻ skin chúng ta sẽ có tên skin chúng ta vừa tạo. Chọn nó và ... không thấy có chuyện gì xảy ra. Đó là do ảnh nền của các Toolbars và Menu đã che mất ảnh nền mà chúng ta vừa thực hiện ở trên rồi. Cho nên công việc kế tiếp của chúng ta sẽ làm là tìm những ảnh nền của các Toolbars, Menu này và giảm độ mờ đục của nó xuống. Các ảnh liên quan là mainbar.png, pagebar*.png và statusbar.png trong folder backgrounds. Các ảnh pagebar*.png và toolbar-hover.png trong folder buttons. Chúng ta copy các ảnh này ra ngoài như đã làm với file skin.ini rồi dùng 1 chương trình chỉnh sửa ảnh trên máy bạn có để giảm độ mờ đục xuống khoảng 30%. Chép đè toàn bộ chúng vào lại vị trí cũ. Bây giờ bạn thử khởi động lại Opera và chọn skin mới tạo xem. Bạn đã thành công rồi đó.

Nếu cảm thấy các ảnh nền làm cản trở việc hiển thị text cho các Toolbars và Menu thì bạn edit lại file skin.ini và thêm thuộc tính Text Color = #yourcolor là một mã màu bạn chọn vào trong 2 section [Browser Window Skin] và [Menu Button Skin].

Tất cả công việc chỉ có vậy. Tuy nhiên để đơn giản hơn thì Pearl đã chuẩn bị sẵn cho các bạn một file skin đóng gói đã được giảm độ mờ đục cho các ảnh nền Toolbars, Menu cũng như đã được chỉnh một số thông số cơ bản cho skin.ini. Công việc của bạn giờ đây chỉ là tải file skin mẫu này về và copy 2 file Top.jpg và Bottom.jpg đã chuẩn bị sẵn vào nữa là được.

Download Skin Sample


Ngoài ra Pearl cũng có làm một số skin theo cách này. Mọi người có thể vào đây xem và download về dùng.

Nhảy Bungee

, , , ...



Tự nhiên lại cảm thấy thích trò này. Có một cái gì đó như giới hạn. Càng nhìn xuống càng cảm thấy sợ hãi và không dám nhảy nữa. Cần một chút can đảm và "máu". Cuộc sống cũng vậy. Cứ nghĩ nhiều quá thì chẳng thể "nhảy" được. Thèm được nhảy



Wow, It's great! Chả biết cái này ở đâu. Bình tĩnh, hơi sợ độ cao. Nhưng mà nhảy vài lần chắc gan to ra. Hông chừng hôm nào kết sợi dây thung rồi tìm đại cái cầu nào cao cao nhảy thử :devil: Có ai nhảy bungee chưa nhở? :left:

Bonus thêm cái bản tin thời tiết. Tình hình là mấy ngày hôm nay trời nóng kinh quá. Cứ như nhiệt độ phải 35o trở lên ấy. Nóng đến nỗi tắm mà còn chảy mồ hôi T__T Nhưng được cái buổi tối trời quang, có sao (mặc dù không nhiều lắm) nên mấy hôm nay hôm nào cũng tranh thủ ngó nghiêng. Trông nó cứ đẹp thế nào ấy. Cảm giác rất dễ chịu. Hình như có chòm sao trông giống cái càng cua nhà mình nữa :D Tưởng tượng nằm trên một đồng cỏ, gió thổi vi vu mà ngắm sao như thế này thì tuyệt (không chừng ngủ luôn ngoài ấy :lol:). Dạo này trời nóng T__T

Opera Vietnamese Language Interface Release

, , , ...

Sau gần 19 tháng lười biếng. Cuối cùng bạn Pearl cũng đã hoàn tất chương trình xóa mù Việt ngữ cho em Opera. Người ta vẫn bảo "núi lửa, sóng thần không bằng ngữ pháp Việt Nam", cho nên để dạy được một học trò ngoại quốc như em Opera đúng là một công việc mệt mỏi +__+. Em nó thì không biết tiếng Việt rồi (nên mới phải học chứ p:), mà Pearl lại cũng không rành các ngôn ngữ mà em nó hiểu nên sau tuần đầu làm việc với em nó thì Pearl đã hết chữ để dạy penguin. Mặc dù cũng rất lưu luyến em nó nhưng Pearl vẫn đành phải chia tay với em nó :whistle:. Đó là việc hồi cuối tháng 3 năm ngoái. Bẵng đi hơn năm Pearl cũng đã quên chuyện này. Nhưng mới vừa rồi Pearl lại gặp lại em nó. Nghe kể gần đây em nó đã làm quen được nhiều người bạn Việt Nam. Em nó bảo cũng nhờ Pearl mà em nó đã có thể giao tiếp tốt hơn với các bạn mới :rolleyes: :cool:. Nhưng mà em nó vẫn tiếc vì em nó học hành dang dở nên đôi khi những người bạn Việt Nam vẫn không hiểu em nó đang muốn nói gì Homer: Doh!. Vốn dĩ Pearl cũng luôn canh cánh vì vẫn chưa dạy cho em nó đến nơi đến chốn. Nên sau cùng 2 thầy trò lại sục sạo từ điển xem được thêm chữ nào thì đỡ chữ đó. Chấp chấp, vá vá cả mấy ngày cuối cùng Pearl cũng đã miễn cưỡng phổ cập xong những mảng kiến thức còn thiếu cho em nó.

Không như lần trước. Mức độ xóa mù lần này tương đối mạnh. Ngoại từ một số từ như chat, kick, e-mail,... mà ngay cả các bạn Việt Nam cũng rành thì còn lại Pearl đều dạy phần nghĩa tiếng Việt tương ứng cho em nó. Thậm chí dạy cả một số từ mà Pearl chế nghĩa :D

Đây là ảnh em nó vào ngày nhận "chứng chỉ tốt nghiệp"



Thôi không buôn chuyện nữa. Đây là "giáo trình xóa mù" Pearl đã soạn ra sau khi dạy xong cho em nó. Mọi người có thể mang về để xóa mù em Opera nhà mình. "Giáo trình" tương thích Opera 9.63



Hướng dẫn sử dụng

+ Đầu tiên mọi người mang "giáo trình xóa mù" này về. Mở dây kéo, lôi nó ra đặt đâu tùy ý (miễn đừng quên quăng thùng rác là được).
+ Mở em Opera nhà mình lên. Bấm Ctrl + F12 để mở Preferences ra. Chọn Tiếng Việt [vi] ở phần Language. Bấm Details mở hộp thoại Languages ra. Browse chọn "giáo trình xóa mù tiếng Việt" (vi.lng) ở phần User interface language > OK > Đồng ý :D
Xong, từ nay thì mọi người đã có thể thoải mái giao tiếp với em Opera nhà mình :yes:

Lưu ý:
+ Cái "giáo trình" này chỉ dành cho người chưa quen với việc giao tiếng với các em Opera mù Tiếng Việt.
+ Cái "giáo trình" này do Pearl soạn nên nếu ai đã sử dụng tức là chấp nhận mọi sự cố do nó gây ra (chứ đừng có vác dép chọi Pearl đó awww). Tuy nhiên, nếu ai có cao kiến gì trong việc nâng cao chất lượng giáo trình thì có thể liên hệ với Pearl.
+ Nếu ai có nhu cầu sử dụng lại nội dung "giáo trình" này cho các mục đích cá nhân thì có thể liên hệ với Pearl theo e-mail ghi trong "giáo trình".

Cuối cùng xin chân thành cảm ơn anh Tansang, bạn NK, GNC và những bạn khác đã giúp đỡ kiểm duyệt giáo trình.


Chúc mọi người sẽ hiểu em Opera nhà mình hơn :D

Gmail Có Theme

, , ,

Hôm nay, post bài khủng bố vô Gmail lấy mấy link box trữ trong đó. Vừa vô hú hồn với cái giao diện đăng nhập transparent của nó :cool: Nhìn qua bên trái mới thấy thông tin Gmail đã có theme. Đăng nhập vô thấy cái giao diện đổi mới ngay. Hóa ra vừa qua Google đã chính thức add thêm vào Gmail 30 cái theme rất :cool:. Chỉ cần vào Settings > Themes > click chọn trên thumbnail là Gmail của bạn sẽ có ngay một cái áo. Có nhiều theme rất đẹp và Google cũng rất tinh ý khi áp dụng các hiệu ứng thời tiết, mặt trời lặn, mọc trên các theme về thiên nhiên cho tương ứng với khu vực địa lý của người dùng.

Gmail Themes

Gmail thật tuyệt. Nhưng mà đúng là không có bữa ăn nào free. Có vẻ như nó tăng cường quảng cáo hơn trước. Nhưng mà không sao cả. Google là một nhà nghệ thuật về quảng cáo. Các mẫu quảng cáo của Google luôn làm người ta cảm thấy dễ chấp nhận. Có hứng rồi, tự nhiên thấy Gmail sao hay quá. Sẽ ngâm cứu viết 1 bài tổng hợp. Đúng là nó biết mình mê đẹp nên dụ T_T

Btw, đã bồ kết 1 số theme của Gmail, không chừng nó sẽ sớm bay qua Opera :D
Download Opera, the fastest and most secure browser
November 2009
S M T W T F S
October 2009December 2009
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30