WP Island

Theo thông tin từ Yahoo Việt Nam thì ngày 13/7 (sao không chọn 13/6 cho nó đẹp đôi nhỉ) tới đây Yahoo sẽ chính thức đóng cửa Yahoo!360 (tin thiệt 100% chứ hem phải tin vịt nhá). Việc đóng cửa 360 sẽ đồng nghĩa với việc hàng triệu blogger 360 sẽ bị mất nhà (thật ra mà nói thì có vẻ như các blogger còn trông đợi việc này hơn, coi như một kết thúc cho thời gian "hành xác" vừa qua). Tuy nhiên, Yahoo cũng đã sớm phát triển Yahoo!360 Plus như một sự thay thế cho Yahoo!360. Tuy nhiên phát nữa là có vẻ như Yahoo!360 Plus không được "trọng dụng" như người anh em 360 cho lắm. Cái này cũng dễ hiểu thôi. Từ lâu các blogger đã sớm chán 360 rồi, miễn cưỡng sống chung chỉ là vì "mớ gia tài" chứa trên đó. Hơn nữa từ đợt khủng hoảng hồi năm rồi thì có vẻ như Yahoo đã không còn là một chỗ dựa đáng tin tưởng nữa,... tất cả những điều này đã góp phần làm cho các blogger bắt đầu có thiện cảm hơn đối với các mạng xã hội lớn khác như Facebook, Blogger, Wordpress, Twitter hay Opera (cứ tưởng tượng Yahoo như cái bánh mà cắt, cắt, cắt )

Hiện tại thì có vẻ như blog đã phát triển đến mức bão hòa rồi. Các nhà cung cấp dịch vụ thì quá xá nhiều chứ không như vài năm trước. Có thể nói là mỗi nhà một vẻ. Cho nên trong bài viết này Pearl chỉ đề cập về My Opera thôi (ưu tiên gà nhà tí ). My Opera là một mạng xã hội có lịch sử khá lâu đời (từ 2001) với mục đích là hỗ trợ cho cộng đồng người dùng trình duyệt Opera. Ngoài ra, My Opera còn hỗ trợ người dùng các chức năng blog, photo album, nhóm. Tạo một môi trường tốt cho việc tự thể hiện, giao lưu và kết bạn (không giới hạn). Với dung lượng 1GB được cung cấp cho mỗi tài khoản người dùng còn có thể lưu trữ và chia sẽ những tài liệu, hình ảnh trên My Opera. Chức năng Opera Link cho phép bạn đồng bộ hóa bookmark và speed dial từ các máy tính khác nhau. Khả năng tùy biến giao diện dựa trên CSS. Hỗ trợ nhiều giao diện ngôn ngữ. Cập nhật, nâng cấp thường xuyên... Opera xứng đáng là một sự lựa chọn tốt cho mọi blogger. Và đặc biệt là các blogger đang vật vờ bên 360, vì hiện tại My Opera đã phát triển thành công công cụ giúp các blogger chuyển tất cả các entry, comment từ blog 360 của mình sang My Opera. Đặc biệt theo quảng cáo thì nó còn có khả năng giữ lại xác lập về quyền riêng tư như private, friend only tương ứng khi chuyển sang My Opera.

Để sử dụng công cụ trên thì đầu tiên bạn cần phải đăng ký một tài khoản trên My Opera. Sau đó vào trang Import Blog. Nhập username và password tài khoản 360 của bạn để My Opera tiến hành import dữ liệu sang tài khoản My Opera của bạn. Do việc truy cập 360 hiện khá khó khăn nên tốc độ xử lý sẽ hơi chậm (khoản 1 ngày mới xong). Sau khi import xong My Opera sẽ gửi mail thông báo cho bạn.

Trong cái thế giới mà việc định danh một người dựa trên các id, username như internet thì việc một người sở hữu một vài account trên một trang web là việc bình thường. Một người hoàn toàn có thể tạo ra vài mailbox, profile hay blog cá nhân trên một trang mạng. Tuy nhiên làm sao để có thể cùng lúc đăng nhập cùng lúc các tài khoản này để có thể cùng lúc check Gmail, cập nhật Twitter, nhảm sự trên blog? Có thể bạn sẽ sử dụng cùng lúc nhiều trình duyệt. Đó cũng là một giải pháp. Nhưng nếu bạn đang sử dụng IE8 hay Google Chrome thì việc này đã "được hỗ trợ". Nguyên lý ở đây là các trang web sử dụng cookie để giữ vết tình trạng đăng nhập của người dùng. Cho nên nếu trình duyệt có chế độ nào đó để lại truy xuất trang web đó với một cookie mới thì ta lại có thể login tiếp.

Đối với IE8

Multi-login với chức năng New Session của IE8

Trên IE8 có 2 tính năng mới đáng chú ý đó là Inprivate Browsing và New Session. Inprivate Browsing là một chế độ lướt web mà các dữ liệu trong quá trình lang thang net bao gồm các file tạm, cookie, history,... sẽ bị xóa khi tắt đi chế độ này (tính năng kiểu này rất thích hợp cho những tín đồ ma giáo đây). Do tính năng đặc dị này nên các thứ dữ liệu kể trên (bao gồm cookie) trong chế độ lướt web này sẽ được lưu trữ tách biệt so với chế độ bình thường. Do đó ta có thể lợi dụng tính năng này để cùng lúc đăng nhập vào một trang web với 2 account (1 ở chế độ lướt web thường và 1 trong chế độ private). Thử tí nhá. Bạn bật IE8 lên rồi đăng nhập vào My Opera (hoặc trên một trang mạng bất kỳ nào đó). Sau đó bấm Ctrl + Shift + P để bật Inprivate Browsing. Trong cửa sổ IE mới hiện ra, bạn thử đăng nhập My Opera với một username khác. Bây giờ thì bạn đã có thể cùng lúc sử dụng 2 account để spam rồi nhá. Một mẹo nhỏ là bạn có thể thêm vào thông số -private ở thuộc tính Target của shortcut IE8 để mở nhanh chế độ Private bằng shortcut.

Biện pháp ở trên chỉ có thể giúp bạn đăng nhập cùng lúc 2 account. Nhưng nếu bạn muốn đăng nhập cùng lúc với nhiều account hơn thì phải sử dụng một chức năng khác của IE8 là New Session. Với chức năng này bạn có thể mở nhiều cửa sổ session (phiên làm việc) để lướt web. Mỗi session riêng biệt này sử dụng cookie riêng của mình (không chia sẽ cookie) cho nên chúng ta có thể lợi dụng điều này để đăng nhập cùng lúc với nhiều account. Để mở một session mới bạn vào File > New Session (bấm phím Alt để mở menu bar ẩn). Hoặc một mẹo khác với shortcut là thêm -nomerge vào thuộc tính Target của shorcut IE8. Mỗi lần muốn mở session mới bạn chỉ cần dùng shorcut là được.

Lưu ý: Các cửa sổ và thẻ thuộc về session nào thì chia sẽ cookie với session đó, và đừng nhầm lẫn một session mới với một cửa sổ mới.

Đối với Google Chrome
Có vẻ như Microsoft và Google "tư tưởng lớn đụng nhau" cho nên với 2 tính năng kể trên của IE8 thì trong Google Chrome cũng có 2 tính năng tương tự nhưng cao cấp hơn. Do đó Pearl sẽ không bàn thêm nhiều nữa mà chỉ nói về những điểm khác biệt.

Đầu tiên là chế độ Incognito của Google với tính năng tương tự Inprivate Browsing. Bạn bấm tổ hợp phím Ctrl + Shift + N để bật chế độ này hay thêm -incognito vào thuộc tính Target của shortcut.

Multi-login với chế độ Incognito của Chrome

Tiếp theo là tính năng tạo Profile lướt web của Google. Đây là một tính năng giúp phân chia các thông tin lướt web theo profile. Giúp cho những thành viên dùng chung máy tính tránh khỏi các vấn đề nhạy cảm mà vẫn không cần dùng tính năng Incognito. Và vì vậy mà các dữ liệu phát sinh khi lướt web của mỗi profile cũng sẽ được lưu trong các folder riêng. Chính đều này nên ta có thể tạo ra nhiều profile để có thể tiến hành multi-login. Bạn vào Control (cái nút icon chìa khóa ấy) > New window in profile > New Profile. Bạn gõ vào tên profile muốn tạo. Có thể check vào Create a desktop shortcut để tạo shortcut khởi động nhanh Google Chrome với profile này > OK. Bây giờ bạn đã có thể đăng nhập vào My Opera (hoặc trang mạng bất kỳ) với nhiều account cho riêng mỗi một profile. Để mở một cửa sổ mới cho profile nào đó bạn vào Control > New window in profile > tên profile. Hay có thể bấm tương ứng tổ hợp phím Ctrl + Shift + profile id.

Lần trước Pearl đã có một bài giới thiệu về cách fix lỗi hiển thị ảnh PNG trong suốt cho IE 5.5+. Tuy nhiên, cách thức tương đối dài dòng, khó sử dụng và có một lỗi nho nhỏ mà trong bài viết lần trước Pearl đã chưa kịp giới thiệu (tại chưa thấy phát sinh ). Trong bài viết lần này Pearl sẽ giới thiệu với mọi người một cách thức đơn giản hơn để có thể làm công việc này đồng thời đền bù thêm cách thức fix cái lỗi nho nhỏ kia luôn thể.

Về phương thức thì bài viết lần này hoàn toàn giống với bài trước tức là sử dụng bộ lọc "AlphaImageLoader" để hỗ trợ IE5.5+ hiển thị được ảnh PNG trong suốt. Tuy nhiên không rắc rối như cách thức trực tiếp đã giới thiệu ở lần trước. Lần này chúng ta sẽ sử dụng một extension của IE là HTML Component (có định dạng *.HTC). HTML Component như tên gọi của nó chính là một thành phần HTML bao gồm stylesheet, script được đóng gói lại để có thể tham chiếu cho nhiều trang web. Giúp thuận tiện hơn trong việc xây dựng các ứng dụng web như sự quảng cáo của Microsoft (mặc dù W3C đã ignore công nghệ này của Microsoft). Và một điều thú vị là chúng ta có thể nhúng HTML Component vào trang web thông qua CSS với thuộc tính behavior.

Nhưng trước tiên chúng ta sẽ phải xây dựng một HTML Component để giúp hiển thị ảnh PNG trong suốt cái đã. Ý tưởng ở đây đó là chúng ta sẽ viết một script để nhận diện hình ảnh định dạng PNG trên trang web rồi sau đó chúng ta sẽ replace những ảnh PNG này bằng một ảnh trắng và đưa ảnh PNG vào bộ lọc AlphaImageLoader.

Ví dụ ban đầu trên trang web của bạn có một ảnh PNG như sau

<img src="WP-Logo.png" width="250" height="250">

Chúng ta sẽ viết một đoạn script để đọc trang web và nếu nó đọc thấy ảnh WP-Logo.png thì sẽ replace img tag như trên thành thế này

<img src="blank.gif" style="width: 250px; height: 250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WP-Logo.png', sizingMethod='scale')" />

Cơ chế là như vậy thôi nhưng nói thật Pearl cũng hem biết viết cũng hem có thời gian ngâm cứu cách viết mấy HTML Component này nên bạn nào có nhu cầu tìm hiểu sâu về vấn đề này thì có thể tham khảo tại đây.

Trong bài viết này Pearl sẽ chỉ giới thiệu về một HTML Component do TwinHelix xây dựng sẵn với các chức năng như sau:
+ Tự động hỗ trợ trong suốt cho tất cả ảnh PNG trên trang web (tất nhiên ảnh chỉ hỗ trợ ảnh PNG trong suốt) bao gồm ảnh định nghĩa trong thẻ img, ảnh nền CSS.
+ Hỗ trợ script chuyển src, class name của thành phần ảnh HTML.
+ Hỗ trợ CSS định vị, repeat cho ảnh (cần phải dùng thêm javascript).

Bây giờ bạn download file IE PNG Fix 1.0 từ TwinHelix về giải nén được file bank.gif và iepngfix.htc. Bạn upload 2 file này lên host của mình. Bây giờ bạn chỉ cần thêm thuộc tính behavior: url(iepngfix.htc) vào một selector nào đó trong CSS để áp dụng hiệu ứng cho selector đó. Ví dụ:

div, img, a, input { behavior: url (iepngfix.htc) }

Lưu ý: Url file htc dựa trên liên hệ của file htc với trang web muốn áp dụng hiệu ứng chứ không phải là với file CSS như trường hợp url của background. Ảnh blank.gif nên đặt cùng vị trí với file htc hoặc thay đổi url cho ảnh blank.gif trong file htc. Nếu trang web của bạn sử dụng quá nhiều ảnh PNG thì sẽ load lâu hơn.

Một lỗi nghiêm trọng khi sử dụng bộ lọc AlphaImageLoader đó là nếu như áp dụng bộ lọc này cho một thành phần A. Đồng thời thành phần A này được đặt CSS position là static, relative hay absolute. Trong thành phần A này lại chứa các thành phần link B. Hệ quả đó là các liên kết B bên trong thành phần A sẽ không thể click. Biện pháp khắc phục:

- Nếu thành phần A có position là static thì chúng ta sẽ thêm vào thành phần B thuộc tính CSS position:relative và z-index:1

- Nếu thành phần A có position là relative hay absolute thì phải thêm một innerwrap C trong thành phần A. Và chuyển hiệu ứng fix PNG từ A sang C. Rồi tiếp tục xử lý như cách trên. Tức là dùng C làm trung gian.

Nếu muốn sử dụng thuộc tính CSS position và repeat cho ảnh PNG trong suốt thì bạn phải sử dụng thêm javascript trong phiên bản IE PNG Fix 2.0 beta

Xem ví dụ minh họa cho IE PNG Fix 1.0 (non JS) và IE PNG Fix 2.0.