Giáo Sư Tự học: 2014

Thứ Bảy, 6 tháng 12, 2014

Dọn dẹp sự gọn gàng của Facebook với chức năng Interest List

Mới học một ứng dụng hay. giúp dọn dẹp Facebook một cách hiệu quả về sự quan tâm của mình. Đó chính là chức năng Interest

Cách tạo Interest List

Truy cập vào Interest List trên Facebook, nhấn vào nút "Create List", một cửa sổ mới sẽ xuất hiện. Tại đây sẽ có ba phần:

Pages: hiển thị các trang mà bạn yêu thích trong tài khoản của mình.
Subscriptions: hiển thị danh sách các tài khoản mà bạn đang theo dõi.
Friends: danh sách toàn bộ bạn bè có trong danh bạ Facebook.
Selected: hiển thị danh sách các trang, tài khoản theo dõi hay bạn bè mà bạn đã chọn.

Nhấn Next để tiếp tục sau khi chọn lựa. Một giao diện hiển thị ba chế độ để bạn lựa chọn và bên khung phải là danh sách các bạn bè hay trang doanh nghiệp đã được chọn.

Public: bất kỳ ai cũng có thể thấy danh sách và đăng ký tham gia để cập nhật tin từ nhóm này.
Friends: Chỉ có bạn bè trong danh bạ của bạn mới thấy danh sách này và đăng ký tham gia.
Only Me: chỉ có bạn mới thấy danh sách bao gồm những ai.

Chọn một trong ba lựa chọn trên và nhấn "Done" để hoàn tất. Danh sách sẽ được tạo trong phần Interests, hiển thị ở cột trái trong phần Home trên Facebook (dưới danh sách Favorites, Friends, Groups, Apps). Để đưa một danh sách lên nhóm "Favorites" ở trên cùng của cột trái, bạn chỉ cần rê chuột vào danh sách đó và nhấn vào nút có biểu tượng "cây bút", nhấn chọn "Add to Favorites".

Các danh sách yêu thích (Interests) hiển thị ở cột trái

Một danh sách yêu thích mang tên Recipes đã được tạo lập để theo dõi
những tin tức về các công thức nấu ăn từ các trang yêu thích trên Facebook.
Bạn có thể chia sẻ với bạn bè cùng sở thích bằng cách nhấn "Share"

Phần Suggestions sẽ gợi ý một số nhóm mà bạn có thể thích tham gia
theo dõi, nhấn Subscribe để theo dõi nhóm đó

Tác giả bài viết đã thử nghiệm tạo một vào danh sách trong Interest List để phân chia các nhóm Fan Page và Profile trong nhóm Friends, cảm giác đầu tiên là rất thuận tiện để theo dõi luồng tin mới từ các nhóm đối tượng. Đây là một sự bổ sung hay nên dùng thử ngay!

Thứ Sáu, 5 tháng 12, 2014

Sửa lỗi không viết được chữ tiếng việt trong PhotoShop! - PhotoShop CS5,6

Sửa lỗi không viết được chữ tiếng việt trong PhotoShop! - PhotoShop CS5,6 Rất nhiểu bạn bị vấn đề về UNIKEY không gõ được tiếng việt trong các bản photoshop CS4, photoshop CS5, photoshop CS6, hay illustrator các kiểu. Mình cũng bị như vậy. Mình cũng lên mạng kiểm tra < Mình dùng Win7 64 > và không được kết quả khả quan. Mình đã thử download unikey 4.0 cho bản 64 hay 4.2 cho bản 64 và đã sét quyền mở = administartor đều ko đc.

Ảnh mượn tạm :3 Tuy nhiên mình đã xử lý đc nó bằng 1 các khác. Bác có thể xem ở đây.

Rất đơn giản. mình download bản UNIKEY cho win32 và khi cài, nó sẽ cài về C:\Program Files (x86) Tiếp theo. Chạy Run by administrator. Vậy là Xong. :D Hi vọng bạn cũng có thể giải quyết vấn đề tương tự của mình bằng cách đơn giản này :) Nếu có bát cứ 1 vấn đề nào về vấn đề này, bạn có thể liên hệ tới mình qua địa chỉ : http://facebook.com/daoiettung , mình sẽ hỗ trợ. Chúc may mắn :) Khắc phụclỗi không viết được chữ tiếng việt trong PhotoShop! - PhotoShop CS5,6

Thứ Hai, 10 tháng 11, 2014

Bài 3:Các thuộc tính định dạng cho text

Các thuộc tính định dạng cho text thường được sử dụng định dạng trực tiếp cho các thẻ thuộc nhóm inline, (những thuộc tính này cũng có thể định dạng được cho các thẻ khác).

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

Html

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div>
<p>Thành phần không có CSS.</p>
<p class="cssStyle">Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.</p>
</div>
</body>
</html>

CSS viết

p.cssStyle {
}

Hiển thị trình duyệt khi chưa sử dụng CSS

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Download phần chuẩn bị

Thuộc tính color

Thuộc tính color được dùng để định dạng màu sắc cho thành phần.
Tham khảo thêm về thuộc tính color.

Cấu trúc

tag {
    color: giá trị;
}

Giá trị của thuộc tính color: (Tham khảo)

Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).
VD: color: #ff0000;
Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).
VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.
VD: color: red;

CSS viết

p.cssStyle {
    color: #ff0000;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-size

Thuộc tính font-size được dùng để định dạng cỡ chữ cho thành phần.
Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-size: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    font-size: 200%;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-family: kiểu chữ;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

p.cssStyle {
    font-family: "Courier New", Courier, monospace;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-weight

Thuộc tính font-weight được dùng để định dạng độ dày của chữ cho thành phần.
Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-weight: giá trị;
}

Giá trị chính của font-weight gồm: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

CSS viết

p.cssStyle {
    font-weight: bold;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-style

Thuộc tính font-style được dùng để định dạng kiểu chữ cho thành phần.
Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-style: giá trị;
}

Các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal.

CSS viết

p.cssStyle {
    font-style: italic;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính letter-spacing

Thuộc tính letter-spacing được dùng để định dạng khoảng cách các ký tự cho thành phần.
Tham khảo thêm về thuộc tính letter-spacing.

Cấu trúc

tag {
    letter-spacing: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    letter-spacing: 5px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính line-height

Thuộc tính line-height được dùng để định dạng khoảng cách các dòng cho thành phần.
Tham khảo thêm về thuộc tính line-height.

Cấu trúc

tag {
    line-height: giá trị;
}

Giá trị có thể là số không đơn vị hoặc có đơn vị, tham khảo các loại đơn vị khác nhau.

CSS viết

p.cssStyle {
    line-height: 5;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính text-decoration

Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.
Tham khảo thêm về thuộc tính text-decoration.

Cấu trúc

tag {
    text-decoration: giá trị;
}

Các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none

CSS viết

p.cssStyle {
    text-decoration: underline;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính word-spacing

Thuộc tính word-spacing được dùng để định dạng khoảng cách giữa các từ cho thành phần.
Tham khảo thêm về thuộc tính word-spacing.

Cấu trúc

tag {
    word-spacing: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    word-spacing: 10px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Bài 2: Sử dụng CSS

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

Html

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
...Phần thân viết ở đây...
</body>
</html>

Thuộc tính href ta phân tích như sau:

style.css là một file có tên là style với định dạng file là .css
css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

p { color: red; }

Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

p { color: red; float: left; padding-left: 10px; }

Đoạn code trên tương tự như đoạn code sau:

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="content">
<ul>
<li>Mục 01</li>
<li>Mục 02</li>
<li>Mục 03</li>
<li>Mục 04</li>
</ul>
<p>Đoạn văn</p>
</div>

<div class="navi">
<p>Nội dung navi</p>
</div>
</body>
</html>

Bộ chọn theo tên id

tag#tênid { thuộc tính: giá trị; }

Bắt buộc phải có ký tự dấu "#" và tênid

div#content { width: 600px; }

Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }

Bắt buộc phải có ký tự dấu "." và tênclass

div.navi { background: #333333; }

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần <p> nếu sử dụng cách chọntag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

/* Đây là dòng comment */

Bài 1: Giới thiệu về CSS

CSS viết tắt của từ Cascading Style Sheets, ý nghĩa nó là gì chúng ta không cần quan tâm để làm gì mà chỉ cần biết CSS là một file có phần mở rộng là .css, nhiệm vụ của nó là tách riêng phần định dạng (style) ra khỏi nội dung trang HTML.
Khi sử dụng css chúng ta sẽ dễ dàng quản lý nội dung trang HTML, dễ điều khiển phần định dạng, và đặc biệt là sẽ tốn ít thời gian khi code hay chỉnh sửa, giả sử các bạn có ~100 file HTML có tiêu đề như nhau, các tiêu đề này được định dạng trong từng trang HTML, khi các bạn muốn chỉnh sửa các tiêu đề này, thì các bạn sẽ phải mở và chỉnh từng trang trong ~100 file, việc này mất bao nhiêu thời gian chắc các bạn có thể ước lượng được, còn nếu ~100 file này được kết hợp với 1 file CSS thì việc định dạng tiêu đề trong ~100 file nàychỉ mất vài phút.

Ghi chú: Chúng ta đừng nhầm lẫn CSS và "style trong HTML" là như nhau, style dùng để dịnh dạng cho nội dung HTML, còn CSS là file chứa các định dạng style, 2 đoạn code style dưới đây không thể gọi là CSS:

HTML viết

<html>
<head>
<style>
p { color: #ff0000; }
</style>
</head>

<body>
<p>Một đoạn văn bản.</p>
</body>
</html>

HTML viết

Những bài học tiếp theo dành cho các bạn lần đầu làm quen với CSS, chỉ hướng dẫn một số tính chất cơ bản, thường dùng của thuộc tính, không đi sâu vào các giá trị riêng lẽ, mục đích là giúp các bạn học cách sử dụng các thuộc tính, vì vậy nếu muốn hiểu sâu hơn giá trị các thuộc tính, hay những thuộc tính khác các bạn có thể xem thêm bên phần tham khảo.