1

1

BỘ QUỐC PHÒNGTRƯỜNG CAO ĐẲNG NGHỀ SỐ 5

GIÁO TRÌNH

Môn học: THIẾT KẾ VÀ QUẢN TRỊ WEB NGHỀ TIN HỌC VIỄN THÔNG ỨNG

DỤNG

Trình độ: TRUNG CẤP NGHỀ

( Ban hành theo Quyết định số / QĐ – CĐN5ngày tháng năm của Hiệu trưởng trường Cao đẳng nghề số 5)

NĂM 2014

2

2

MỤC LỤCĐỀ MỤC TRANGBài 1: Tổng quan về Internet và World Wide Web 3Bài 1: Công cụ soạn thảo Web 8Bài 1: Định dạng văn bản bằng HTML và CSS 11Bài 1: Xử lý đồ họa trên Web 17Bài 1: Quản trị máy chủ Web Server 21Bài 1: Thiết kế Web 27Bài 1: Cổng thông tin điện tử -Portal 32

3

3

CHƯƠNG TRÌNH MÔ ĐUN ĐÀO TẠOTHIẾT KẾ VÀ QUẢN TRI WEB

Mã số mô đun: MĐ 18Thời gian mô đun: 120 giờ (Lý thuyết: 45 giờ; Thực hành: 75 giờ)

I. VỊ TRÍ, TÍNH CHẤT CỦA MÔ ĐUN- Vị trí mô-đun: Mô đun được bố trí sau khi học sinh học xong các môn học chung, các môn học/ mô đun nghề, ở năm thứ 2. - Tính chất của mô-đun: Là mô đun nghề bắt buộc.

II. MỤC TIÊU MÔ ĐUN: + Kiên thức : - Trang bị các kiến thức để xây dựng một Website - Ngôn ngữ HTML - Qui trình thiết kế website+ Kỹ năng :

- Thức thi một vài phương pháp và công cụ để xây dựng và quản trị Web. - Thực thi việc quản lý, biên tập, xây dựng và phát triển Web.

+ Thái độ : - Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

III. NỘI DUNG MÔ ĐUN:1. Nội dung tổng quát và phân phối thời gian:

SốTT

Tên các bài trong mô đunThời gian

Tổng sốLý

thuyếtThực hành

Kiểm tra*

1 Tổng quan về Internet và World Wide Web

6 6 0

2 Công cụ soạn thảo Web 18 6 123 Định dạng văn bản bằng

HTML và CSS19 6 12

Kiểm tra số 1 14 Xử lý đồ họa trên Web 18 6 125 Quản trị máy chủ Web Server 19 6 12

Kiểm tra số 2 16 Thiết kế Web 21 9 127 Cổng thông tin điện tử -Portal 19 6 12

Kiểm tra số 3 1Cộng: 120 45 72 3

*Ghi chú: Thời gian kiểm tra được tích hợp giữa lý thuyết với thực hành được tính vào giờ thực hành.2. Nội dung chi tiết: Bài 1: Tổng quan về Internet và World Wide Web Thời gian: 6 giờMục tiêu:

- Nắm được mô hình tổ chức và nguyên tắc hoạt động của hệ thống Web.- Biết khai thác, sử dụng các dịch vụ trên Internet..- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

Nội dung:

4

4

1. Internet 1.1 Lịch sử phát triểnVào cuối những năm 60, Bộ Quốc Phòng Mỹ đã tài trợ cho một nhóm sinh viên từ nhiều trường Đại học và Viện nghiên cứu của Mỹ để tham gia chương trình nghiên cứu về một cách thức truyền thông mới. Kết quả nghiên cứu là sự ra đời của mạng ARPA (The Advanced Research Project Agency - tên của tổ chức tài trợ chi phí nghiên cứu cho chương trình này). Sau đó, mạng này được các trường Đại học cùng nhau phát triển để trở thành một mạng chung cho các trường Đại học, gọi là ARPAnet - ông tổ của Internet ngày nay. Ban đầu, mạng này được các trường Đại học sử dụng, sau đó Quân đội cũng bắt đầu tận dụng, và cuối cùng Chính phủ Mỹ quyết định mở rộng việc sử dụng mạng cho mục đích thương mại và cộng đồng. Mạng Internet ngày nay đã trở thành một mạng liên kết các mạng máy tính nội bộ và các máy tính cá nhân trên khắp toàn cầu.1.2 Tổ chức của InternetCho đến ngày nay, mọi người đều công nhận rằng sự phát minh ra Internet là một trong những phát minh vĩ đại nhất của nhân loại trong thế kỷ XX và sự phát minh này có ảnh hưởng rất lớn đến sự phát triển kinh tế toàn cầu. Sự ảnh hưởng của Internet lên nền kinh tế thế giới, lên cuộc sống của mỗi người trên thế giới sẽ còn tiếp tục trong nhiều năm tới, đặc biệt là ở các nước đang và chưa phát triển.World Wide Weblà một hệ thống siêu văn bản có thể liên kết nhiều loại văn bản ở nhiều nguồn khác nhau. 1.3. Quản lý tài nguyên mạng InternetTài nguyên mạng Internet vô hạn, vì mỗi máy tính chứa một tài nguyên, vì vậy internet chứa một tài nguyên rộng lớn, với sự phát triển của web nên tài nguyên internet đã được nhanh chóng phát triển.1.4. Một số dịch vụ trên Internet

2. World Wide Web2.1 Nguồn gốc World Wide Web- World Wide Web được một kỹ sư người Anh là Tim Berners. Lee phát minh và hoàn thiện vào năm 1991. Xuất phát từ nhu cầu hệ thống lại những ghi chép lộn xộn của mình, nhanh chóng tìm ra và liên kết được với những tài liệu tham khảo tại bất cứ chỗ nào trên một văn bản, Tim Berners-Lee đã phát minh ra một phần mềm trên một giao diện văn bản có thể tạo ra các liên kết với các file dữ liệu trong máy tính của mình, sau đó phát triển tính năng này có thể liên kết với bất cứ file dữ liệu nào trong các máy tính trên mạng Internet. Từ đó ra đời khái niệm trang Web là một loại siêu văn bản có địa chỉ cụ thể và duy nhất, trên trang web có thể đặt các liên kết tới các trang web khác một cách đơn giản và tiện lợi. Tập hợp các trang web ở khắp nơi trên thế giới thông qua mạng Internet tạo thành World Wide Web.World Wide Web đã nhanh chóng phát triển và có thể nói nó đã trở thành linh hồn cho mạng Internet. Trên web không những chuyển tải được các văn bản mà còn các thông tin đa phương tiện khác như hình ảnh, âm thanh, phim, ...vì vậy chẳng những nó mang lại một nguồn thông tin khổng lồ mà còn mang đến rất nhiều ứng dụng trong đời sống của con người như giải trí (chơi trò chơi, xem phim, nghe nhạc...), mua sắm, học tập, kết bạn, làm việc. 2.2 Trang Web Các trang web có các chức năng cung cấp thông tin, dịch vụ mạng cho người sử dụng để, khai thác. Hiện tại web đã được ứng dụng rộng rãi trên các lĩnh vực kinh doanh, quân sự, dự báo, quảng cáo..

5

5

2.3.Trình duyệt WebFirefox

Firefox là cái tên đã không còn xa lạ đối với nhiều người vì những tính năng mà nó mang lại. Trình duyệt Web này có tốc độ duyệt Web cao, đảm bảo an toàn cho người dùng khi lướt Web, cung cấp một kho tiện ích khổng lồ, đa dạng, với hàng loạt những cải tiến, bổ sung và nâng cấp bảo mật trên các phiên bản mới cập nhật

Một trong những đặc điểm nổi bật nhất của Firefox chính là chế độ Private Mode giúp người dùng ẩn danh ngay cả khi đang truy cập Internet mà không để lại bất kì dấu vết nào.

Google Chrome

Google Chrome là trình duyệt Web ngày càng chứng minh được vì sao nó lại là tiện ích tốt nhất với tốc độ duyệt Web, tính năng bảo mật, ổn định cao, những cải tiến đáng kể trong các phiên bản mới cập nhật đáp ứng nhu cầu duyệt Web của người dùng. Google Chrome tương thích với mọi loại máy tính từ máy tính để bàn đến máy tính xách tay, các máy tính sử dụng hệ điều hành khác nhau. Tính đến thời điểm này, trình duyệt Web đã hỗ trợ hầu hết ngôn ngữ thuộc nhiều Quốc gia trên thế giới.

Opera

Opera là trình duyệt Web có tốc độ xử lý nhanh và giao diện bắt mắt. Tiện ích này tích hợp công nghệ hiện đại và tiên tiến giúp tăng hiệu suất lướt Web và mang đến cho người dùng trải nghiệm đồ họa tuyệt đẹp. Chức năng tìm kiếm trong Opera cũng được đánh giá rất cao, khả năng quản lý danh sách bookmark, ngăn chặn các phần mềm theo dõi quá trình duyệt Web tốt.

Safari

Safari cung cấp cho người dùng khả năng lướt Web thần tốc với thiết kế lạ mắt. Sử dụng trình duyệt này giúp người dùng quản lý và sắp xếp các Tab dễ dàng. Tiện ích

6

6

sẽ hiển thị một danh sách các trang Web có lượt truy cập nhiều nhất dưới dạng hình ảnh thu nhỏ đính kèm, có khả năng xem được nhiều trang Web linh hoạt nhất.

Internet Explorer

Internet Explorer (hay còn gọi là IE) là trình duyệt Web xuất hiện đầu tiên trên thế giới và được tích hợp sẵn khi cài đặt hệ điều hành Windows từ phiên bản Windows 7 trở lên. Mặc dù hiện nay với sự ra đời của nhiều trình duyệt Web hiện nay đặc biệt là 2 đối thủ Google Chrome và Firefox nhưng IE vẫn luôn là cái tên có sức hút với mọi người. Tiện ích không cần sử dụng định dạng Flash mà vẫn xem được Video, chức năng ghi nhớ trang Web vào thanh tác vụ, bảo mật thông tin khi duyệt Web...

Torch

Torch Browser là trình duyệt web giúp bạn có thể truy cập internet an toàn, nhanh chóng và khả năng tùy biến cao, tích hợp đầy đủ các chức năng trong trình duyệt mang đến cho bạn khả năng tìm kiếm nhanh và mạnh mẽ. Thêm vào đó, Torch Browser cung cấp nhiều tính năng nâng cao cho người dùng tùy biến sử dụng. Bảo mật tuyệt đối các hoạt động truy cập web bằng cách không lưu bất kỳ thông tin URL, password, cookies, ... Tải các file dữ liệu về máy được hiển thị trên cùng màn hình để dễ quản lý.

Maxthon

Maxthon được xây dựng dựa trên nền tảng của trình duyệt IE, được tích hợp nhiều plug-in có sẵn giúp người dùng lướt Web an toàn trong môi trường Proxy. Tiện ích này có sẵn những bộ lọc hiện đại nhằm ngăn chặn các Pop-up quảng cáo phiền phức,

7

7

bảo vệ tài khoản trực tuyến cho người dùng khi đăng nhập vào nhiều trang Web khác nhau.

SeaMonkey

SeaMonkey là một ứng dụng Web tất cả trong một bao gồm: Email chuyên dụng, nhóm thông tin, hiệu chỉnh HTML và thảo luậ ICR. Đây là trình duyệt Web được xây dựng dựa trên mã nguồn mở, cho phép người dùng duyệt Web trên nhiều Tab khác nhau, người dùng sẽ không phải mở từng trang như trước mà thay vào đó là mở cùng lúc nhiều trang khác nhau.

Avant Browser

Avant Brower nổi tiếng là trình duyệt thân thiện với người dùng. Một số tính năng có sẵn như chống chỉ định đứng im, xem Video không cần cài đặt phần mềm Flash, đa module tốt hơn nhiều trình duyệt Web khác như Internet Explorer chẳng hạn, tính năng bảo mật cao, ngăn chặn Virus, Malware, Adware. Nhưng cũng giống như Deepnet Explorer, tiện ích này chỉ tương thích với hệ điều hành Windows.

Deepnet Explorer

Trong số những trình duyệt Web trên thế giới, Deepnet Explorer là một trong số ít những trình duyệt có tính năng cảnh báo các mối nguy hại qua đường link, các trang Web lừa đảo có khả năng lấu cắp thông tin tài khoản trực tuyến của người dùng. Nhược điểm duy nhất của trình duyệt này là chỉ có thể sử dụng trên hệ điều hành Windows.

8

8

Bài 2: Công cụ soạn thảo Web Thời gian: 18 giờMục tiêu:

- Nắm được các công cụ và các nội dụng soạn thảo Web.- Biết soạn thảo Web với FrontPage.- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo

Nội dung: 1. Giới thiệu một số công cụ soạn thảo Web Một số phần mềm soạn thảo web như: Dreamweaver, FrontPage, Microsoft office word, Notepad++...2. FrontPage

2.1. Mở, đóng, tạo mới một trang WebWebsite là tập hợp nhiều trang web và các tập tin khác liên kết lại với nhau. Mỗi

website có một trang chủ là trang đầu tiên bạn sẽ xem khi gõ địa chỉ website. Chọn File/New/Page or Web. Bạn có thể mở một trang trắng (Blank page) hay lựa chọn trong số các trang mẫu sẵn có (Page Template). Ơ đây, chúng ta mở một trang trắng (chưa có gì). Khi cần lưu những gì bạn đã làm, đơn giản là chọn lịnh Save (hay Save As khi lưu thành file mới) trong menu File

2.2. Định dạng font chữ, paragraphSau khi một trang mới đã được mở, sẵn sàng cho bạn đưa dữ liệu và hình ảnh

trang trí vào, trong phần góc dưới bên trái của cửa sổ Frontpage có ba bảng (tab) chọn lựa gồm Normal, HTML, Preview. Công dụng của chúng như sau:

- Normal: Cho phép bạn soạn thảo trang web trong tình trạng gần giống như khi hiển thị trong trình duyệt.

- HTML: Cho phép bạn soạn thảo trang web với đầy đủ mã nguồn. Bạn sẽ thấy toàn bộ tag (the) nội HTML của trang và làm việc với trang web giống như khi mở bằng NotePad.

- Preview: Xem như đang ở trong trình duyệt web và không sửa được. Để soạn thảo văn bản tiếng Việt với font Unicode, bạn mở menu File/Properties/Language, chọn Save the document as: Unicode (UTF-8). Hay chọn bảng HTML và thay thế dòng <meta http-equiv=”Content-Type” content=”text/ html; charset=windows-1252"> (ở giữa hai the <head> và </head>) thành <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8"> rồi chuyển trở lại bảng Normal.

Chu ý: Nếu dùng font tiếng Việt khác như ABC, VNI, Bách Khoa,... bạn phải thay bằng dòng <meta http-equiv=”Content-Type” content=”text/html; charset=x-user-defined”>. Nếu bạn chỉ dùng tiếng Việt Unicode, bạn có thể xác lập mặc định UTF-8 cho Frontpage bằng cách lưu trang này thành trang mẫu có tên là Normal.htm trong thư mục Program Files/Microsoft Office/Templates/1033/Pages/normal.tem/. Bạn có thể dùng trình gõ tiếng Việt hỗ trợ Unicode như VietSpell, Vietkey, Unikey,... để nhập tiếng Việt khi soạn thảo. Việc định dạng văn bản cũng tương tự như Word với thanh công cụ Formatting, tức là bạn có thể chọn kiểu tiêu đề, font và kích cơ font, làm đậm, nghiêng, gạch dưới, canh lề, so hàng, màu font, màu nền...

Cách làm: Chọn vùng văn bản cần định dạng rồi bấm các biểu tượng định dạng trong thanh công cụ.

2.3. Ảnh, âm thanh

9

9

Một cách để làm cho trang web của bạn thêm hấp dẫn là thêm nhạc nền vào đó, nhạc nền chỉ phát một thời gian hay phát liên tục chừng nào trang web này còn được mở là tuỳ bạn.

Cách làm: Bấm phím phải chuột vào vùng trống trên trang web rồi chọn lịnh Page Properties. Trong hộp thoại Page Properties, chọn bảng :

General/Background Sound/Location/Browse, chỉ định file âm thanh (wav, mid, ram, ra, aif, aifc, au, snd).

Bạn chỉ định cho phát liên tục (đánh dấu chọn Forever) hay một số lần nhất định (bỏ dấu chọn Forever và nhập số vào Loop).

2.4. Bảng (Table)Bạn có thể chèn một hình vào trang web, chia hình này ra làm nhiều phần rồi cho

mỗi phần liên kết với một trang web nào đó. Đặc điểm này được gọi là bản đồ ảnh (Image map).

Cách làm: Di chuyển dấu nháy đến vị trí cần chèn hình, mở menu Insert/Picture/From file. Trong hộp thoại Picture, chọn file hình rồi chọn OK. Sau khi hình đã được chèn vào trang web, chọn hình để vẽ các điểm nóng (hotspots) tạo thành một bản đồ ảnh. Frontpage sẽ hiển thị thanh công cụ Picture, bấm chuột vào nút Rectangular Hotspot trong thanh công cụ này. Giữ phím trái chuột và kéo con trỏ chuột để vẽ một hình chữ nhật có kích thước tuỳ ý lên hình, sau đó nhả ra. Hộp thoại Insert Hyperlink xuất hiện, bạn chỉ định file liên kết cho vùng ảnh mà bạn đã chọn. Bạn tiếp tục vẽ các vùng khác và chọn liên kết file cho các vùng này cho đến khi kết thúc.

Chu ý: Bấm phím phải chuột lên hình rồi chọn Picture Properties để xác định vị trí của hình, canh lề, tạo đường viền,...2.5. Hyperlink, bookmark

Để liên kết đến Bookmark trong cùng trang web, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink, chọn Bookmark.

Để liên kết đến Bookmark trong một trang web khác, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink. Chọn trang web đích trong ô liệt kê rồi bấm nút Bookmark. Trong danh sách Bookmark có trong trang web đích, chọn một Bookmark đích.

Chu ý: Liên kết bookmark có dạng là “#tên bookmark” (thí dụ: weblh/ ctv/ctvlk.htm#lvd) trong mã lệnh và có biểu tượng lá cờ khi đang soạn thảo trong bảng Normal.

2.6. Tạo mã kết nối CGIBạn có thể chèn một hình vào trang web, chia hình này ra làm nhiều phần rồi cho

mỗi phần liên kết với một trang web nào đó. Đặc điểm này được gọi là bản đồ ảnh (Image map).

Cách làm: Di chuyển dấu nháy đến vị trí cần chèn hình, mở menu Insert/Picture/From file. Trong hộp thoại Picture, chọn file hình rồi chọn OK. Sau khi hình đã được chèn vào trang web, chọn hình để vẽ các điểm nóng (hotspots) tạo thành một bản đồ ảnh. Frontpage sẽ hiển thị thanh công cụ Picture, bấm chuột vào nút Rectangular Hotspot trong thanh công cụ này. Giữ phím trái chuột và kéo con trỏ chuột để vẽ một hình chữ nhật có kích thước tuỳ ý lên hình, sau đó nhả ra. Hộp thoại Insert Hyperlink xuất hiện, bạn chỉ định file liên kết cho vùng ảnh mà bạn đã chọn. Bạn tiếp tục vẽ các vùng khác và chọn liên kết file cho các vùng này cho đến khi kết thúc.

Chu ý: Bấm phím phải chuột lên hình rồi chọn Picture Properties để xác định vị trí của hình, canh lề, tạo đường viền,...3.Thực hành soạn thảo trang WebHãy thiết kế một trang web đơn giản với bố cục web tin tức:

1

10

1

11

Bài 3: Định dạng văn bản bằng HTML và CSS Thời gian: 18 giờMục tiêu:

- Nắm được cấu trúc trang HTML, kỹ thuật trang trí bằng CSS.- Biết xây dựng trang HTML kết hợp trang trí bằng CSS.- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

Nội dung: 1. Khái niệm về ngôn ngữ đánh dấu -HyperText (Siêu văn bản) là một loại văn bản thông thường nhưng lại chứa một hay nhiều tham chiếu tới các văn bản khác.

HTML là ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language), được sử dụng để tạo các trang Web. Các trang Web được hiển thị nhờ vào một trình duyệt Web (Web Browser)

Tài liệu (Document) HTML được lưu dưới dạng siêu văn bản, có phần mở rộng là*.htm hoặc *.html

1

12

Các thông tin trên Web được tổ chức theo dạng có cấu trúc. Các cấu trúc này được định nghĩa thông qua các the (Tag)

Thí dụ: <Title>Tựa đề của trang Web</title>

2. Xây dựng trang HTML2.1. Phần đầu trangLàm việc trong the <body>...........</body>

2.2. Phần nội dung trangLàm việc trong the <body>...........</body>

3. Kỹ thuật CSS3.1. Liên kết CSS với trang HTML- CSS là viết tắt của cụm từ "Cascading Style Sheet" , nó là một ngôn ngữ quy định cách trình bày của các the html trên trang web.- Là ngôn ngữ đang được sử dụng rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách mạng.

1

13

- Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải quyết bài toán này.- CSS quy định cách hiển thị nội dung của các the HTML trên các trình duyệt gần như giống nhau,bằng cách quy định các thuộc tính cho the HTML đó.Cách chèn CSS vào trang HTMLChúng ta có 3 cách để đưa nội dung của CSS vào trang web như sau:+ Cách 1: Chèn nội dung CSS vào trong cặp the <style> </style> trong phần <head></head> của trang web:VD:<html> <head> <title>Chen CSS-Cách 1</title> <! Chen CSS vào giữa cặp the sau: > <style type="text/css"> Nội dung CSS đặt bên trong đây </style> </head> <body> </body></html>+ Cách 2: Chèn trực tiếp vào bên trong the HTML.- Chèn trực tiếp CSS vào bên trong các the mở của HTML.- Nếu có nhiều thuộc tính cần quy định, ta ngăn cách giữa chúng bằng khoảng trắng.VD: Ơ đây ta chèn CSS vào the mở của cặp the <p></p>.<html> <head> <title>Chen CSS-Cách 2</title> </head> <body> <p style="Nội dung CSS ở đây, cách nhau bằng khoảng trắng"> </p> </body></html>+ Cách 3: Liên kết với một file *.css bên ngoài- Đây là cách được dùng nhiều nhất trong sử dụng CSS vì tính tiện dụng và linh hoạt của nó. Giả sử, bạn có một website gồm hàng trăm trang, khi bạn muốn thay đổi một chút cách trình này của website, thay vì gạch cạch đi gõ từng trang một, bạn chỉ cần sửa file CSS bên ngoài một chút, hàng trăm trang web của bạn đều được thay đổi.- Cú pháp: Thực hiện liên kết bằng the <link> ( Không có tag đóng ), theo cú pháp sau: <link rel="stylesheet" href="Đường dẫn đên file .css" type="text/css" />

1

14

Tag này được đặt trong cặp tag <head></head> của trang web, và không cần đặt trong tag <style></style>- Nếu bạn đặt file *.css cùng thư mục với trang web, thì trong thuộc tính href bạn chỉ cần viết: href="<ten_file_css.css".- Nếu file *.css không cùng thư mục với trang web: Bạn cần chỉ trong đường dẫn tuyệt đối tới file *.css đó trong thuộc tính hrefVD:<html> <head> <link rel="stylesheet" href="danbocuc.css" type="text/css" /> </head> <body> </body></html><span style="font-weight:bold;text-decoration:underline;color:#FF0000;">Đoạn text cần in đậm, gạch chân, màu đỏ</span><style type="text/css">body {font-family:verdana;color:#0000FF;} /* Kiểu chữ trong trang Web là "Verdana", màu chữ thông thường là màu xanh dương */</style>body {font-family:verdana;color:#0000FF;}<link rel="stylesheet" type="text/css" href="style.css"/>3.2. Các qui tắc dùng trong CSSQuy tắc cơ bản về dàn trang và màu sắcĐể có khả năng nổi bật hơn so với phần còn lại, một trang cần phải vượt ra ngoài khuôn mẫu, phá bỏ các nguyên tắc cũng như ứng dụng một số thủ thuật mới khác với truyền thống. Tuy nhiên, bạn phải hiểu rõ căn bản và nền tảng của bất cứ nguyên tắc nào trước khi phá bỏ nó. Trước tiên chúng ta hãy cùng bàn về vấn đề dàn trang trên trang web.Quy tắc – Quá nhiều hộp khiến trang web của bạn mất thẩm mỹMột nhà thiết kế đã nói rằng trình độ thiết kế thể hiện ngay từ việc sử dụng các đường ke và hộp trên trang web. Bạn sẽ quyết định sử dụng một hoặc hai hộp hay đặt đường ke vào giữa các cột khi quan sát trang web và nhận thấy cần phải có một số thứ mang tính sáng tạo cũng như hấp dẫn hơn so với những thứ te nhạt vừa mới được thực hiện – đó chính là thời điểm để bạn thể hiện sự sáng tạo của mình.Tuy nhiên, hãy nhớ đừng quá lạm dụng trước khi sử dụng tất cả các hộp có trong phần mềm của bạn. Bởi bất cứ điều gì quá đều không tốt, cho dù chắc chắn rằng các đường ke và hộp là cách hay để nhấn mạnh vào thông tin quan trọng. Nhưng nếu bạn định dùng nó trong tất cả các trang web hoặc đặt gần như mọi thứ vào trong hộp thì trang web của bạn sẽ trở nên rối rắm.Quy tắc – Đừng chia trang web thành hai phần

1

15

Chia trang web thành ba phần là cách tốt nhất để truyền tải được sự hứng thú và đổi mới trong tài liệu. Sau đó, hãy đặt những đối tượng quan trọng nhất như tiêu đề, hình ảnh và các yếu tố hiển thị ở đầu hoặc cuối từng phần trên trang web.Và giờ là màu sắc trên trang web. Quy tắc – Các màu sắc tương phản giup đọc trang web dễ hơnBất cứ nhà thiết kế nào cũng đều biết rằng sự tương phản hợp lý giữa chữ và nền sẽ giúp đọc chữ và tài liệu dễ hơn. Thông thường, chữ màu tối được viết trên nền sáng hoặc ngược lại.Mặc dù cách dùng chữ màu sáng trên nền tối là dễ đọc, nhưng nên hạn chế dùng kỹ thuật này. Bởi thực tế đã chứng minh rằng mắt sẽ bị mỏi hơn khi đọc lượng chữ lớn trên nền tối so với các cách tạo sự tương phản khác.Quy tắc – Sử dụng hạn chế màu sắc Để gây ấn tượng, các nhà thiết kế thường chọn dùng nhiều màu trên bản thiết kế của mình. Tuy nhiên, ấn tượng đó sẽ không còn nếu màu sắc xuất hiện mọi nơi trên trang web. Vì vậy, nguyên tắc ngón tay cái ở đây chính là hãy dùng màu cho các tựa đề và các từ ngữ quan trọng nhất trong tựa đề để tạo được ấn tượng tối đa.Quy tắc – Không dùng các màu bổ sungCác màu đối diện nhau trên bánh xe màu được gọi là các màu bổ sung. Ví dụ, màu xanh đối diện với da cam trên bánh xe màu. Do đó, khi đặt chúng cạnh nhau có thể gây nhức mắt người xem vì rất khó nhìn cả hai màu này cùng lúc. Ngoài ra, những màu bổ sung có thể trọi nhau khi đứng cùng nhau.Quy tắc – Không dùng màu che khuất hơn 40% chữBất kỳ màu nào tối hơn màu chữ 40% đều khiến khó đọc chữ hơn. Tuy nhiên, bạn cũng có thể thay đổi quy tắc này bằng cách tính được độ tối của màu sẽ dùng. Ví dụ, màu xanh lục có thể tối hơn nên không làm nổi bật được chữ bằng màu xanh dương. Vì vậy, muốn có kết quả tốt nhất, hãy xem cuốn Pantone dành cho những sắc thái màu khác nhau để thấy được mọi màu sắc đối với các màn hình khác nhau. Ngoài ra, cuốn Pantone cũng sẽ giúp bạn nhận biết màu nào là đọc được hay không đọc được với cả chữ xuôi lẫn chữ ngược trên màn hình.

4. Thực hành xây dựng trang HTML kết hợp trang trí bằng CSS- Hãy viết một trang web bán hàng giống như hình trên hinh sau:

1

16

Kiểm tra số 1

1

17

Bài 4: Xử lý đồ họa trên Web Thời gian: 18 giờMục tiêu:

- Nắm được những nội dung xử lý đồ họa trên Web.- Biết xử lý đồ họa trên Web bằng các công cụ Photoshop và Corel Draw.- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

Nội dung:1. Đồ họa trên Web

1.1. Khái niệmThiết kế giao diện web bằng Photoshop, Flash và một số công cụ hỗ trợ chuyên nghiệp. Hoàn tất chương trình học viên đủ khả năng tự thiết kế giao diện cho một website ấn tượng, thu hút người xem:

* Hiệu chỉnh, tối ưu hóa hình ảnh cho web.* Thiết kế giao diện ấn tượng bằng photoshop.* Xây dựng website sử dụng ngôn ngữ Flash – Action script.* Thiết kế banner, poster động với Flash.1.2. Xử lý đồ họa trên Web

Xử lý đồ họa trên Web là làm cho web đẹp hơn, làm theo yêu cầu của khách hàng. Có thể làm những hình ảnh được đẹp hơn.2. Các công cụ xử lý đồ họa trên Web

2.1. Photoshop

Menu là thành phần quen thuộc nhất đối với những người mới bắt đầu sử dụng photoshop. Nó chứa các loại tham số mà đôi khi không xuất hiện trên cả thanh công

1

18

cụ lẫn các bảng chức năng, người sử dụng chỉ có thể mở các tham số này từ thanh menu. Chúng ta có thể dành chút ít thời gian để tham khảo sơ qua.File chứa những chức năng cơ bản nhất một phần mềm phải có và bổ sung thêm một vài thứ hữu ích như Import để đưa các hình ảnh từ máy Scan hay chức năng Save for Web dùng để lưu các hình ảnh ở định dạng được hỗ trợ dành cho web.Edit là một nhánh menu cũng khá quen thuộc. Trong photoshop, Edit chứa những chức năng cơ bản để thay đổi các bức ảnh, đáng chú ý như Fill & Stroke (tô màu và đường viền), Transform (xoay, lật, kéo giản ảnh)Image là một nhánh menu bao gồm các chức năng có thể tác động lên toàn bộ bức ảnh như Color Adjustments (chỉnh màu sắc), Size Adjustments (chỉnh kích thước) và một số chức năng khác có thể thay đổi toàn bộ một bức ảnh trong photoshop.Layer tương tự như nhánh menu Image, nhưng nó có chức năng giới hạn sự thay đổi chỉ tác động tại một Layer (lớp). Tôi sẽ giải thích sâu hơn về Layer ở các phần sau. Ơ phần này bạn chỉ hiểu đơn giản một Image (ảnh) trong photoshop được cấu tạo bởi nhiều Layer (lớp) trong suốt chồng lên nhau. Do vậy, những chức năng trong nhánh Layer chỉ sẽ có tác dụng ở một hoặc nhiều Layer được chọn khác với menu Image là chúng ảnh hưởng đến toàn bộ bức ảnh.Type là menu chứa các chức năng về thay đổi, biến đổi về hiệu ứng cho chữ và kiểu chữ.Select menu bao gồm các chức năng về Selection (vùng chọn) bạn tạo ra. Vùng chọn trên ảnh mà bạn muốn thay đổi là phần khó nhất khi làm việc trong Photoshop. Ơ nhánh menu này bạn có thể lưu vùng chọn, tinh chỉnh vùng chọn hoặc thêm, bớt, đảo vùng chọn. Nắm vững chức năng các vùng chọn sẽ giúp bạn tiết kiệm nhiều thời gian trong lúc làm việc với photoshop.Filter (bộ lọc) menu là thứ người ta thường nhắc đến khi nói đến photoshop. Các bộ lọc có thể áp dụng lên bất kỳ phần nào của ảnh và tạo những hiệu ứng độc đáo.View (Xem) menu là nơi bạn có thể thay đổi các thông số hiển thị để xem trên giao diện photoshop. Bạn có thể sử dụng chức năng tắt / mở các đường dẫn (guidelines) trên ảnh, phóng to (zoom out) thu nhỏ (zoom in) có tại nhánh menu này.Window là menu cho phép bạn hiển thị hoặc giấu các bảng chức năng trong giao diện photoshop. Nếu bạn bị mất một bảng chức năng nào đó, bạn có thể mở lại tại đây.Help là phần thông tin trợ giúp bằng tiếng Anh. Tuy hơi vắn tắt nhưng đôi lúc cũng hữu dụng trong một số trường hợp.2.2. Corel DrawCorel DRAW trong nhiều trang minh họa, quảng cáo, trong các tờ bướm, nhãn hiệu, bích chương,… đầy rẫy chung quanh ta hiện nay. Ngoài ra, các chức năng vẽ chính xác làm cho Corel DRAW ngày càng được ưa chuộng trong việc thiết kế tài liệu, báo cáo thuộc các lĩnh vực khoa học kỹ thuật.

1

19

Xin nói ngay rằng không nhất thiết phải là họa sĩ trình bày hoặc họa viên kỹ thuật chuyên nghiệp, một khi bạn yêu thích màu sắc, đường nét và bố cục, Corel DRAW chắc chắn sẽ đem đến cho bạn những niềm vui tuyệt vời mỗi khi có nhu cầu, có cơ hội bộc lộ thị hiếu thẩm mỹ của mình.Tài liệu này giúp bạn tìm hiểu cách dùng Corel DRAW thuộc bộ Corel Graphics Suite 11 và rèn luyện những kỹ năng đồ họa căn bản. Cần nói rằng Corel Graphics Suite thực ra là một bộ công cụ đồ họa. Nếu cài đặt Corel Graphics Suite đầy đủ, bạn có trong tay nhiều công cụ khác nhau: Corel TRACE, Corel PHOTO-PAINT, Corel R.A.V.E.,… và quan trọng nhất là Corel DRAW, “trái tim” của Corel Graphics Suite.Cửa sổ Corel DRAWGiả sử máy tính của bạn đã được cài đặt bộ công cụ Corel Graphics Suite. Ta bắt đầu nhé…Khởi động Corel DRAW: Bấm nút Start, trỏ vào Programs, trỏ vào Corel Graphics Suite 11 và bấm vào Corel DRAW trên trình đơn vừa hiện ra.Từ đây về sau, thao tác mà bạn cần thực hiện được trình bày trong bảng tương tự như trên. Cột trái của bảng mô tả thao tác. Cột phải giải thích ý nghĩa, tác dụng của thao tác.Khi thủ tục khởi động kết thúc, cửa sổ Corel DRAW xuất hiện trên màn hình (hình 1). Nếu chưa từng dùng Corel DRAW lần nào, có lẽ bạn sẽ hơi… hoảng (và ngao ngán nữa!) vì những chi tiết nhằng nhịt trong cửa sổ Corel DRAW. Thực ra không có gì ghê gớm lắm đâu. Trấn tĩnh một chút, phân biệt từng bộ phận của cửa sổ Corel DRAW, bạn sẽ tự tin trở lại.

2

20

Phần trống trải nhất trên cửa sổ Corel DRAW là miền vẽ (drawing area). Giữa miền vẽ là trang in (printed page), được biểu diễn dưới dạng hình chữ nhật có bóng mờ phía sau. Chỉ có những đối tượng (object) nằm trong trang in mới được in ra giấy mà thôi. Nếu đối tượng có một phần nằm trong trang in, một phần nằm ngoài trang in, chỉ có phần nằm trong trang in được in ra giấy.Bằng cách bày ra trang in ngay trên màn hình, Corel DRAW giúp bạn hình dung rất rõ ràng bố cục của bản vẽ trên giấy, làm cho công việc thiết kế trở nên tự nhiên, rất giống cách làm truyền thống. Quanh miền vẽ lại còn có thước đo (ruler) dọc và ngang, cho phép ước lượng dễ dàng kích thước thực sự trên giấy của các đối tượng và khoảng cách giữa chúng.Phía dưới thanh trình đơn và bên trái miền vẽ là các thanh công cụ (toolbar). Gọi như vậy vì đấy là nơi chứa các công cụ làm việc, tựa như hộp “đồ nghề” của bạn.Mỗi công cụ xuất hiện trên thanh công cụ dưới dạng một nút bấm và đều có tên gọi riêng (tiếng Anh kêu bằng tooltip). Để biết công cụ nào đó kêu bằng gì, bạn trỏ vào công cụ ấy và đợi chừng một giây. Một ô nhỏ màu vàng hiện ra cạnh dấu trỏ chuột, trình bày tên công cụ đang xét.– Bấm vào đâu đó trên miền vẽ. Trình đơn Effects biến mất– Trỏ vào một công cụ nào đó tùy ý bạn trên thanh công cụ ở bên trái miền vẽ và chờ chừng một giây. Xuất hiện một ô nhỏ màu vàng nêu tên công cụ đang xét

5. Thực hành xử lý đồ họa trên Web với các phần mềm Photoshop và Corel Draw.Hãy thiết kế trang web sử dụng Phần mềm Photoshop design giống như hình vẽ

2

21

Bài 5: Quản trị máy chủ Web Server Thời gian: 18 giờMục tiêu:

- Nắm được được những nội dung quản trị máy chủ Web Server.- Quản trị máy chủ Web Server trên MS Windows với Internet Information Services

(IIS).- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo

Nội dung: 1. Web Server và một số phần mềm Web Server

1.1. Web Server và một số phần mềm Web ServerWeb Server (máy phục vụ Web): máy tính mà trên đó cài đặt phần mềm phục vụ

Web, đôi khi người ta cũng gọi chính phần mềm đó là Web Server.Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy nhiên mỗi

Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như IIS của Microsoft dành cho *.asp, *.aspx…; Apache dành cho *.php…; Sun Java System Web Server của SUN dành cho *.jsp…

1.2. Một số phần mềm Web ServerWamp ServerPhải kể tới đầu tiên là Wamp, viết tắt của Window + Apache + MySql và PHP, đơn

giản trong cài đặt và cấu hình, tôi rất ưa dùng Wamp vì hầu như mọi thứ cần thiết để giả lập một server thì wamp đều có.

Ưu điểm của Wamp server là nhẹ nhàng, cài đặt nhanh chóng và cấu hình cũng đơn giản, chỉ cần một cú click chuột là server ảo trên máy tính của các bạn đã sẵn sàng hoạt động, các bạn có thể bắt gặp hầu như các module của Apache và các Extention của PHP ở đây.

Lưu ý với những người chạy các mã nguồn mở là để bật mod rewrite ( đường dẫn thân thiện ) trên các website các bạn cần phải kích hoạt mod rewrite_mod như trong hình:

wamp_rewriteCòn đâu nhu cầu thế nào thì do các bạn thêm thắt !Tiếp nữa là các phần mềm giả lập server thế này đều sử dụng cổng 80 làm cổng giao

tiếp, nếu các bạn cài đặt SKYPE thì cần phải chuyển cổng skype sang cổng 443 hoặc tắt skype trước khi chạy localhost.

XAMPPXampp là một chương trình cho phép bạn chạy giả lập máy chủ ngay trên chính máy

tính chạy hệ điều hành window của các bạn, Xampp có tích hợp sẵn Apache, MySQL, PHP, Perl và FTP, thậm chí cả Mail server nữa chứ, Xampp có trình quản lý cũng như Wamp, rất đơn giản và tiện lợi trong bật tắt các chức năng cùng với các module.

Hơn thế nữa, Xampp còn có thể chạy trên hầu hết các hệ điều hành hiện nay, Linux hay Window hay MacOS đều có thể cài đặt Xampp, các bạn có thể xem thêm tại đây: https://www.apachefriends.org/index.html

Trình điều khiển của XamppBạn chỉ cần khởi động chương trình, bảng điều khiển chính sẽ hiện ra cho phép bạn

khởi động các dịch vụ nhanh chóng và tiện lợi.

2

22

* Lưu ý: Vẫn là Skype, nếu các bạn đang sử dụng Skype thì vào Tools -> Options -> Advanced -> connection và vô hiệu hóa “Use port 80 and 443 for alternatives for incoming connections”. đăng xuất khỏi skype và khởi động lại Apache một lần nữa.

Trên đây là hai phần mềm chạy Server ảo ( localhost ) cho các bạn tập tành viết web, hoặc cho các nhà lập trình … Đây là hai phần mềm được ưa dùng nhất nên mình chỉ giới thiệu thế thôi, nếu các bạn có sự cố gì với chúng thì hãy comment để mình hỗ trợ nhé.2. Quản trị máy chủ Web Server

2.1. Quản trị máy chủ Web Server trên MS WindowsWeb server là một máy tính được cài phần mềm trên hệ điều hành windows phục vụ

web. Máy chủ cài web server thường là máy có tốc độ và cơ sở dữ liệu rất lớn, để có thể lưu trữ rất nhiều website và những thứ liên quan khác ( các mã script, các file mutilmedia...).

Mỗi web server đều có một địa chỉ IP (IP adress) và một domain name( tên miền). Ví dụ: khi bạn gõ một địa chỉ trang web là www.bizvietso1.com vào trình duyệt web thì thông tin đó sẽ được gửi tới server có domain name là bizvietso1.com, server sẽ tìm dữ liệu của trang web đó và truyền về trên trình duyệt của bạn thông qua giao thức http, để hiển thị trang web đó trên máy tính của bạn.

Tất cả các web server đều hiểu và đọc được các file có đuôi *.htm và *.html, tuy nhiên có một số web server được thiết kế để có thể đọc được các file chuyên biệt, như là IIS của Microsoft có thể đọc được các file có đuôi *.asp và *.aspx, Apache dùng cho *.php....

Bất kỳ một máy tính nào cũng có thể trở thành web server nếu được cài phần mềm phục vụ web và kết nối internet. Web server được kết nối liên tục đến Internet giúp cho việc truy cập vào website được thông suốt.

2.2. Quản trị máy chủ Web Server trên LinuxWeb server là một máy tính được cài phần mềm trên hệ điều hành Linux phục vụ

web. Máy chủ cài web server thường là máy có tốc độ và cơ sở dữ liệu rất lớn, để có thể lưu trữ rất nhiều website và những thứ liên quan khác ( các mã script, các file mutilmedia...).

Mỗi web server đều có một địa chỉ IP (IP adress) và một domain name( tên miền). Ví dụ: khi bạn gõ một địa chỉ trang web là www.bizvietso1.com vào trình duyệt web thì thông tin đó sẽ được gửi tới server có domain name là bizvietso1.com, server sẽ tìm dữ liệu của trang web đó và truyền về trên trình duyệt của bạn thông qua giao thức http, để hiển thị trang web đó trên máy tính của bạn.

Tất cả các web server đều hiểu và đọc được các file có đuôi *.htm và *.html, tuy nhiên có một số web server được thiết kế để có thể đọc được các file chuyên biệt, như là IIS của Microsoft có thể đọc được các file có đuôi *.asp và *.aspx, Apache dùng cho *.php....

Bất kỳ một máy tính nào cũng có thể trở thành web server nếu được cài phần mềm phục vụ web và kết nối internet. Web server được kết nối liên tục đến Internet giúp cho việc truy cập vào website được thông suốt.3. Thực hành cài đặt và quản trị Internet Information Services(IIS) .

2

23

- Để cài đặt IIS7.0 nhập phải chuột Computer chọn Manage.Chọn Roles trong Server Manager sau đó click chọn Add roles.

- Chọn Web Server (IIS) trong màn hình Select Server Roles.

2

24

- Windows sẽ bật màn hình Add Roles Wizard nhấp chọn Add Required Features.Chọn các dịch vụ cần thiết cho Server .

- Nhấn Install để bắt đầu cài đặt.

2

25

Quá trình cài đặt bắt đầu.

2

26

- Sau khi cài đặt hoàn tất sẽ thấy trong Administrative Tools xuất hiện đến 2 dịch vụ IIS đó là IIS6 và IIS7. Kiểm tra số 2

2

27

Bài 6: Thiết kế Web Thời gian: 31 giờ

Mục tiêu:

- Nắm được qui trình thiết kế Web.

- Thực hiện được các bước trong qui trình thiết kế Web.- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

Nội dung:

1. Thiết kế hệ thống

1.1. Thiết kế chức năng

Tác nhân : khách xem

Mô tả: cho phép khách xem đăng ký làm thành viên của hệ thống.

Tiền điều kiện: khách hàng ghé thăm hệ thống

Luồng sự kiện chính:

Khách xem chọn mục đăng ký thành viên

Form đăng ký thành viên hiển thị

Khách xem đăng nhập thông tin cá nhân vào form đăng ký

Nhấn nút đăng ký

Hệ thống báo kết quả quá trình nhập thông tin cá nhân. Nếu thông tin nhập không chính xác thì thực hiện luồn rẽ nhánh A1. Nếu nhập chính xác thì thực hiện bước 6.

Hệ thống cập nhật thông tin của khách xem vào danh sách thành viên

UC kết thúc

1.2. Phân quyền người dùng

Tác nhân: thành viên

Mô tả: UC cho phép thành viên đăng nhập vào hệ thống

Tiền điều kiện: thành viên chưa đăng vào hệ thống

Luồng sự kiện chính:

Thành viên chọn chức năng đăng nhập

Form đăng nhập hiển thị

Nhập tên, mật khẩu vào form đăng nhập

Hệ thống kiểm tra tên, mật khẩu của thành viên

Nếu việc đăng nhập thành công thì … Nếu thành viên nhập sai tên, mật khẩu thì chuyển sang luồng rẽ nhánh A1

UC kết thúc

2

28

Luống sự kiện rẽ nhánh:

Luồng rẽ nhánh A1: thành viên đăng nhập không thành công

Hệ thống thông báo quá trình đăng nhập không thành công

Chọn: đăng ký hay đăng nhập lại.

Hệ thống yêu cầu thành viên nhập lại tên và mật khẩu

Nếu khách xem đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không đồng ý thì UC kết thúc.

Hậu điều kiện: Thành viên đã đăng nhập thành công và có thể sử dụng các chức năng mà hệ thống cung cấp

1.3. Mô tả quy trình nghiệp vụBiểu đồ UC đăng kí, đăng nhập

1.4. Thiết kế biểu đồ lớp.

2

29

1.5. Thiết kế Use Case

1.6. Thiết kế biểu đồ trình tự

2. Thiết kế cơ sở dữ liệu

2.1. Thiết kế bảng (Table)- LoaiNhanVien(MaLoaiNV, TenLoaiNV)- NhanVien(MaNV, TenNV, DiaChi, DienThoai, Luong, MaLoaiNV)- KhachHang(MaKH, TenKH, DiaChi, DienThoai)- NhaCungCap(MaNCC, TenNCC, DiaChi, DienThoai)- ThietBi(MaTB, TenTB, MaNCC, SoLuong)- DonDatHang(MaDH, MaTB, MaKH, TenKH, SoLuong, DiaChi, DienThoai, Email)

3

30

- PhieuNhapHang(MaPhieuNH, MaTB, MaNVNhapHang, MaNVNhanHang, Soluong, NgayNhap)- PhieuXuatHang(MaPhieuXH, MaTB, MaNVXuatHang, MaNVNhanHang, MaKH, SoLuong, NgayXuat)- HoaDon(MaHD, TenHD, Ngay, MaNV, MaKH, MaTB, TenTB, SoLuong, DonGia, BaoHanh, ThanhTien)

2.2. Thiết kế sơ đồ cơ sở dữ liệu (Database Diagrams)

‘

3. Thiết kế giao diện

3.1. Thiết kế bố cục

3

31

3.2. Thiết kế Màu sắc

Dùng phần mềm đồ họa Photoshop thiết kế màu sắc cho web.

3.3. Thiết kế font chữ, các tiểu tiết.

Dùng css để định dạng font chữ và các tiểu tiết.

4. Phát triển hệ thống

4.1. Phát triển các thủ tục cơ sở dữ liệu (Procedure)

Việc phát triển cơ sở dữ liệu nhằm giúp cho trang web lưu trữ dữ liệu tốt hơn, giảm bớt việc thiết kế ra nhiều file làm web chạy chậm.

4.2. Phát triển các chức năng của hệ thống (Module)

Việc phát triển chức năng của hệ thống nhằm giúp sau này phát triển và sửa lỗi lẫn bảo trì được dễ dàng hơn.

4.3. Lập trình giao diện (User Interface)

Lập trình lắp ghép các giao diện lại để tránh lặp đi lặp lại những giao diện không cần thiết hoặc dư thừa file.

4.4. Tích hợp ứng dụng.

Có thế tích hợp các ứng dụng tiện ích vào web để cho trang web thêm đa dạng và tiện ích cho người dùng. Vd: dự báo thời tiết, vật giá, tỷ giá.

4.5. Tối ưu hóa tìm kiếm máy chủ (SEO – Search Ingine Optimization)

Tối ưu hóa nhằm giúp cho trang web xuất hiện trang đầu google, tăng thứ hạng cho bộ máy tìm kiếm google.

5. Thực hành thiết kế Web

Hãy Thiết kế trang web chuẩn seo bán hàng thời trang.

3

32

Bài 7: Cổng thông tin điện tử - Portal Thời gian: 18 giờMục tiêu:

- Nắm được các đặc trưng cơ bản của Portal, sự khác biệt giữa WebSite và Portal.- Xây dựng được Portal.- Rèn luyện thái độ học tập nghiêm túc, cần cù, sáng tạo.

Nội dung: 1. Khái niệm về Portal

1.1. Portal là bước phát triển tiếp theo của WebSiteCổng thông tin hay cổng thông tin điện tử (Portal) là một hoặc một nhóm trang web mà từ đó người truy cập có thể dễ dàng truy xuất các trang web và các dịch vụ thông tin khác trên mạng máy tính. Đầu tiên khái niệm này được dùng để mô tả các trang web khổng lồ như là Yahoo, AOL,... bởi lẽ có hàng trăm triệu tỉ người truy cập chúng như là điểm xuất phát cho hành trình "duyệt web" của họ. Lợi ích lớn nhất mà cổng thông tin điện tử đem lại là tính tiện lợi, dễ sử dụng và dễ thay đổi, tùy chỉnh cho phù hợp với nhu cầu của từng cá nhân.1.2. Các đặc trưng cơ bản của PortalCổng thông tin điện tử - Portal là một thuật ngữ tin học xuất hiện từ năm 1998. Nội hàm khái niệm còn có nhiều vấn đề cần phải tiếp tục bàn bạc, trao đổi, bởi vậy cho đến thời điểm hiện nay vẫn chưa đưa ra được có một định nghĩa hoàn chỉnh. Sau đây là một số khái niệm về Portal thường được sử dụng:Portal là giao diện dựa trên nền web được tích hợp và cá nhân hóa tới các thông tin, ứng dụng và các dịch vụ hợp tác.Portal như là một cổng tới các trang web, cho phép một khối lượng lớn các thông tin sẵn có trên Internet và các ứng dụng được tích hợp, được tuỳ biến, được cá nhân hóa theo mục đích của người sử dụng.Portal là điểm đích truy cập trên Internet mà qua đó người dùng có thể khai thác mọi dịch vụ cần thiết và "không cần thiết phải đi đâu nữa".Portal là một giao diện web đơn, nó cung cấp truy cập cá nhân tới thông tin, các ứng dụng, xử lý thương mại và nhiều hơn nữa. Với công nghệ Portal, các tổ chức có thể giảm cường độ, nhưng lại tăng giá trị lao động và đặc biệt còn làm tăng giá trị các sản phẩm. Các tổ chức có thể tích hợp thông tin trong phạm vi môi trường làm việc, các ứng dụng dịch vụ hoặc sử dụng giao diện đơn le.Portal là một giao diện dựa trên nền Web, tích hợp các thông tin và dịch vụ có thể có. Nó cho phép khai báo, cá biệt hóa thông tin và dịch vụ, cho phép quản trị nội dung và hỗ trợ một chuẩn về một nội dung và giao diện hiển thị. Nó cung cấp cho người dùng một điểm truy cập cá nhân, bảo mật tương tác với nhiều loại thông tin, dữ liệu và các dịch rộng rãi đa dạng ở mọi lúc mọi nơi nhờ sử dụng một thiết bị truy cập Web.1.3. Giới thiệu một số Portal Cổng thông tin là địa chỉ tổng hợp các ứng dụng của một tổ chức như thư điện tử, chia se tài liệu, lịch công tác thông qua giao diện Web. Các thành viên của doanh nghiệp có thể thông qua giao diện web (hay còn gọi là cổng thông tin, webportal) mà truy cập và sử dụng các ứng dụng của doanh nghiệp đơn giản tiện lợi.

3

33

Thông qua mạng internet người dùng có thể thực hiện không hạn chế các chức năng mà thông thường chỉ thực hiện được đối với mạng intranet (mạng nội bộ doanh nghiệp). Cổng thông tin trở thành công cụ đắc lực cho các hoạt động của mọi doanh nghiệp.Cổng thông tin giúp người dùng có thể tận dụng tối đa những tài nguyên có sẵn và nâng cao giá trị của thông tin.Những yêu cầu này nảy sinh từ mục tiêu ban đầu: cổng thông tin là điểm đi tới của tất cả các ứng dụng khác (cùng cung cấp bởi một hãng, công ty).

2. Các bước xây dựng Portal 2.1. Lập kế hoạchKhả năng truy cập một lần (single sign-on): Portal tích hợp hoặc cung cấp hệ thống đăng nhập một lần (một cửa). Nói cách khác, Portal sẽ lấy thông tin về người sử dụng từ các dịch vụ thư mục như LDAP (lightweight Directory Access Protocol), DNS (Domain Name System) hoặc AD (Active Directory).2.2. Thiết kế tổng thểKhả năng tích hợp các ứng dụng: Portal cung cấp một môi trường tích hợp toàn bộ các ứng dụng Website đang có. Khía cạnh tích hợp này bao gồm hỗ trợ truy cập một lần (một cổng), kể cả các tài nguyên, trang Web bên ngoài, hỗ trợ các dịch vụ Website và có thể hiểu Portal mạng lại một ứng dụng được tích hợp.Các công cụ phát triển: Sản phẩm Portal cung cấp các công cụ phát triển mạnh mẽ và dựa trên các tiêu chuẩn, cho phép kỹ thuật viên tích hợp các ứng dụng và các chức năng Portal mở rộng khác.2.3. Phát triểnKhả năng quản lý nội dung: là một tính năng hữu hiệu cho phép người sử dụng không cần hiểu biết về kỹ thuật có thể tạo lập được nội dung. Portal cũng phải kiểm soát được các truy xuất đến từng nội dung để đảm bảo chỉ những người có quyền mới có thể truy nhập được các văn bản mà họ được cấp phép.Khả năng cá nhân hoá: Portal hiển thị hay thể hiện theo nhiều cách khác nhau tuỳ thuộc vào nhóm người sử dụng. Mỗi các nhân có thể tự chỉnh sửa, tái lập lại các hiển thị thông tin, ứng dụng, nội dung theo sở thích hoặc để phù hợp với công việc của mình.Các tính năng của một ứng dụng lớn: Portal đáp ứng được các tính năng chuẩn của một phần mềm ứng dụng lớn như: Khả năng đáp ứng được dư thừa dữ liệu, khả năng chịu lỗi, khả năng cân bằng tải (chia luồng xử lý), khả năng sao lưu.Khả năng hỗ trợ Mobile và công nghệ không dây: Portal phải có khả năng vận hành đa nền, đa phương tiện. Cho phép người sử dụng có thể sử dụng nhiều hệ điều hành khác nhau, thông qua các trình duyệt web khác nhau để truy xuất vào Portal. Bao gồm cả các phương tiện như điện thoại di động, các loại máy tính cầm tay, PDA (Personal Digital Assitant) không dây.Khả năng bảo mật: Portal cung cấp được các hệ thống xác thực và cấp phép mạnh. Bất kỳ sự tích hợp các hệ thống nào, với cơ đăng nhập một lần, đều phải được bảo mật và ngăn chặn các giao dịch không hợp lệ của người sử dụng trên các ứng dụng khác nhau.

3

34

2.4. Các giai đoạn hình thành phát triển PortalKhả năng phân loại nội dung: cho phép tổ chức nội dung và ứng dụng theo nhiều cách khác nhau để đáp ứng các yêu cầu không giống nhau của các nhóm (phân loại theo người sử dụng, phòng ban, đơn vị) bên trong một tổ chức.Khả năng tìm kiếm và chỉ mục: Portal cung cấp hoặc tích hợp được các hệ thống tìm kiếm và đánh chỉ mục các văn bản, tài liệu để giúp người sử dụng có thể nhanh chóng truy xuất đến những thông tin họ cần.

3. Công nghệ xây dựng Portal 3.1. Công nghệ WebSite tĩnhKhả năng truy cập một lần (single sign-on): Portal tích hợp hoặc cung cấp hệ thống đăng nhập một lần (một cửa). Nói cách khác, Portal sẽ lấy thông tin về người sử dụng từ các dịch vụ thư mục như LDAP (lightweight Directory Access Protocol), DNS (Domain Name System) hoặc AD (Active Directory).Web tĩnh là những website không có hệ thống quản lý nội dung (xem bài cms) và người dùng không thể chỉnh sửa được hoặc có thể chỉnh sửa, thay đổi dữ liệu được. Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại với những công ty chuyên về thiết kế website, họ sử dụng web tĩnh bởi họ có kiến thức và dễ dàng chỉnh sửa nội dung khi cần.3.2. Công nghệ WebSite động3.3. Công nghệ PortalNgược lại với web tĩnh, web động là những website có hệ thống quản lý nội dung và người dùng có thể chỉnh sửa nội dung được. Ví dụ như trang vnexpress.net hay 24h.com.vn thì đó là những web động bởi vì họ có thể đăng tin mới, chỉnh sửa tin mới và chỉnh sửa danh mục menu, ...Web động được làm từ gì?Web động sử dụng các công nghệ như HTML, CSS, HTML5, CSS3, JAVASCRIPT, ... và điều đặc biệt là có sử dụng một ngôn ngữ lập trình server như PHP, một hệ quản trị cơ sở dữ liệu như MySQL, vì vậy web động phải chạy trong máy chủ. Nếu đặt trên máy tính của bạn thì bạn phải cài các Web server ảo như vertrigo, Xampp, wampp, ..Ưu điểm của web động:Dễ dàng quản lý nội dung Dễ dàng nâng cấp và bảo trìCó thể xây dụng được web lớnThường sử dụng tương tác với người dùng caoHiện nay vẫn SEO tốt bởi ta có thể sử dụng chức năng Rewrite URL để chuyên URL thân thiện

4. Thực hành xây dựng PortalHãy thực hành thiết kế xây dựng PortalKiểm tra số 3

IV. ĐIỀU KIỆN THỰC HIỆN MÔ ĐUN - Vật liệu:

3

35

- Dụng cụ và trang thiết bị: Máy tính, mạng LAN, Internet, các phần mềm hỗ trợ soạn thảo, lập trình Web và quản trị máy chủ Web Server.- Nguồn lực khác: máy chiếu Overhead, Projector

V. PHƯƠNG PHÁP VÀ NỘI DUNG ĐÁNH GIÁ:1. Phương pháp đánh giá:

- Trắc nghiệm khách quan- Dựa vào kết quả thực hiện của học viên theo các tiêu chí:

+ Mực độ hoàn thành công việc được giao+ Thời gian thực hiện + Thao tác với các công cụ trong quá trình thực hiện+ Tính thẩm mỹ+Thái độ giữ gìn, bảo quản dụng cụ

2. Nội dung đánh giá:- Kiến thức:

+ Trình bày tổ chức và nguyên tắc hoạt động của Internet và hệ thống World Wide Web.+ Sự hiểu biết về các nội dung, phương pháp và công cụ thiết kế, quản trị Web.

- Kỹ năng: + Soạn thảo Web, xử lý đồ họa trên Web.+ Cài đặt và quản trị máy chủ Web Server

- Thái độ:+ Nghiêm túc trong học tập + Trung thực trong kiểm tra+ Kiên trì, cẩn thận và nghiêm túc trong công việc luôn luôn tuân thủ các biện pháp an toàn

VI. HƯỚNG DẪN THỰC HIỆN MÔ ĐUN1. Phạm vi áp dụng chương trình: Chương trình mô đun đào tạo này được sử dụng để giảng dạy cho trình độ sơ cấp nghề, trung cấp nghề Tin học viễn thông ứng dụng.2. Hướng dẫn một số điểm chính về phương pháp giảng dạy mô đun:

- Giáo viên trước khi dạy cần phải căn cứ vào mục tiêu và nội dung của từng bài học, chọn phương pháp giảng dạy phù hợp, đặc biệt quan tâm phương pháp dạy học tích cực để người học có thể tham gia xây dựng bài học. Ngoài phương tiện giảng dạy truyền thống, nếu có điều kiện giáo viên nên sử dụng máy chiếu projector, Laptop, và các phần mềm minh họa nhằm làm rõ và sinh động nội dung bài học.

- Đối với các giờ thực hành, giáo viên cần chuẩn bị đầy đủ các trang thiết bị cần thiết.

- Cuối mỗi buổi học, cần có sự đánh giá nhận xét kết quả buổi học3. Những trọng tâm chương trình cần chú ý:

- Các nội dung và công cụ thiết kế, soạn thảo Web.- Cài đặt và quản trị máy chủ Web Server.

4. Tài liệu cần tham khảo:

3

36

[1]. Nguyễn Phương Lan, Hoàng Đức Hải – Lập trình ứng dụng Web với JSP/Servlet – NXB Lao động – Xã hội 2005.

[2]. Nguyễn Phương Lan, Hoàng Đức Hải – Java lập trình mạng – NXB Giáo dục 2001.

[3]. Nguyễn Ngọc Tuấn – JavaScript – NXB Thống kê 2004. [4]. ASP 3.0 và ASP.NET-NXB Giáo dục, Nguyễn Phương Lan, NXB Giáo dục.[5]. Professional Active Server Pages 3.0-Wrox Press Ltd. . [6]. HTML và Javascript for Visual Learners – Visibooks .[7]. Javascript & DHTML Cookbook, Danny   Goodman , Copyright © 2003

O'Reilly & Associates, Inc.[8]. DHTML and Javascript, Gilorien, Prentice Hall PTR