Đã bao giờ bạn thắc mắc những website mà bạn xem hàng ngày được tạo ra như thế nào chưa? Và liệu bạn có muốn tự tạo website của riêng mình? Hãy đến với bài viết dưới đây
Hơn cả gạch và vữa, những dòng code máy tính và những điểm ảnh mới là kẻ xây dựng nền kinh tế của thế kỷ 21. Nếu bạn đã từng nhìn vào “Mã nguồn trang” hoặc “Công cụ nhà phát triển” trên trình duyệt của mình, gần như bạn sẽ gặp phải một mớ hỗn độn những dòng chữ, và thắc mắc tại sao chúng có thể xây dựng nên một website.
Những nhà phát triển web gọi Giao diện Đồ họa Người dùng (GUI) là front-end của một website, đối lập với back-end. Front-end là thứ mà người dùng có thể xem và thao tác. Back-end có thể được coi là hạ tầng bao gồm và hỗ trợ tất cả những thông tin và nhiệm vụ được chuyển đến từ front-end.
Bài viết này sẽ đề cập đến front-end. Chúng ta sẽ đến với từng phần để để bạn có thể hiểu những sự khác biệt và những khả năng đã làm nên front-end, và chỉ ra cho bạn cách để hiểu cũng như sử dụng những công cụ phát triển website để tạo ra những trang web thu hút và mang tính tương tác.
Thiết kế web và Phát triển front-end
Ở những tổ chức lớn, việc thiết kế và phát triển trang web được đảm nhận bởi một đội ngũ chuyên nghiệp với những người có chuyên môn khác nhau. Những nhà thiết kế sẽ tạo ra hình ảnh trang web cụ thể và những tương tác với trang web đó; trong khi những nhà phát triển front-end là những người có nhiệm vụ triển khai chúng.
Tuy nhiên đối với những cá nhân, không có lý do gì để hạn chế sự khám phá của họ: Chỉ vì bạn hứng thú với việc phát triển, không có nghĩa là bạn không có tầm nhìn trong việc thiết kế, và ngược lại. Một lượng hiểu biết vừa phải về những công nghệ web cơ bản hay những quy luật thiết kế có thể mang lại nhiều lợi ích cho công việc của bạn.
Phát triển front-end là một công việc ít mà nhiều hơn một hoạt động “coding”. Nhiều hơn là bởi, trong lĩnh vực này, hơn một nửa công việc là thiết kế: nhiều ý tưởng được vẽ ra từ sản phẩm in, sau đó mới được đưa vào máy tính. Ít hơn bởi vì khi sử dụng những dòng lệnh máy tính, những dòng lệnh này thường ít phức tạp, dễ chấp nhận và cần ít hiểu biết về lập trình hơn những ngôn ngữ lập trình web khác thuộc phần back-end (điển hình là php).
Front-end của một trang web: Markup, Style Sheet và Ngôn ngữ Lập trình
Hầu hết những trang web đang được xây dựng với bộ ba công nghệ: ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language – HTML), các tập tin định kiểu theo tầng (Cascading Style Sheet – CSS) và JavaScript (JS):
- Những ngôn ngữ đánh dấu như HTML đánh dấu một văn bản với các thẻ (tag). Những thẻ phân ranh giới ngữ nghĩa và cấu trúc hóa văn bản. Những văn bản được cấu trúc có thể được thêm kiểu cách.
- CSS là ngôn ngữ định kiểu theo tầng và hậu bối của những bản in đối những người sắp chữ (người tạo ra những hình ảnh có thể in cuối cùng cho những ấn phẩm); ở trên web, CSS quy định bề ngoài của nội dung chủ yếu như cách trình bày và bố cục, cũng như đặt vào đó những nội dung đồ họa.
- JavaScript, đối lập với 2 ngôn ngữ trên, là một ngôn ngữ lập trình. JS giải quyết tương tác và nội dung nhập vào của người dùng, và nó tập trung vào những sự kiện mà người dùng tạo ra. Để bạn dễ hình dung hơn, trái ngược với một trang có nội dung cố định được sắp đặt trước là một trang được lập trình để thực thi những lệnh tùy thuộc vào người dùng nhập vào.
HTML
Đã hơn 20 năm, và mục đích cốt lõi của HTML vẫn giữ nguyên như vậy: Để phân cách một đoạn văn theo cấu trúc cần thiết để người dùng có thể dễ dàng theo dõi.
Tại sao bạn cần nó
Tại sao HTML vẫn còn quan trọng? Nói một cách đơn giản, HTML là nơi mà ngữ nghĩa nội dung của bạn được đặt vào. Điều này quan trọng với những thiết bị đọc máy như spider search engine (robot của máy tìm kiếm) và screen reader (ứng dụng đọc màn hình). Qua thời gian, sự liên kết của sự phân biệt giữa đâu là ngữ nghĩa và đâu là cấu trúc càng được thắt chặt. Phiên bản mới nhất của HTML (5) giới thiệu những tag mới như <article>, <aside>, <nav>, <header> và <footer> với mục đích làm rõ ràng ngữ nghĩa và cấu trúc. Điều này mang lại lợi ích không chỉ cho con người mà còn cho các cỗ máy.
Cấu trúc của một thành phần HTML
Những thành phần HTML, ở mức độ tối thiểu, là những cặp của những tag mở và đóng, mỗi tag được đóng trong một cặp dấu ngoặc nhọn “<” và “>”, như thẻ “paragraph” chẳng hạn, ở hình dưới nó được đánh dấu bằng màu xanh lục lam. Những thành phần có thể được nhận những thuộc tính, ở hình dưới là màu hồng, như một “class”, thứ có thể biến những thành phần thành thành viên của một nhóm mà HTML và JS có thể tác động. Thuộc tính style, nội dung của nó được biểu thị bằng màu đỏ ở dưới, là một cách để tạo một quy tắc CSS chỉ tác dộng lên thành phần đó. (CSS tốt nhất là được viết với cấp trang, chúng ta sẽ tìm hiểu thêm về nó ở phần dưới.)
Kết quả của phép đánh dấu này:
Plain paragraph text here.
Phần nâng cao
Mọi nhà phát triển đều bị ám ảnh bởi tốc độ thực thi. Để đạt được điều này, chính họ sẽ tối ưu hóa ngôn ngữ lập trình để tăng tốc trong việc viết và tạo ra những dòng có thể đọc được. Việc này được gọi là “syntactic sugar”. Cộng đồng HTML đã tạo ra nhiều điều với những nỗ lực trên.
Tại sao lại sử dụng đường tắt của những nhà phát triển trong khi, có lẽ, bạn chỉ là người mới? Bằng cách tạo ra những thứ đơn giản hơn, bạn có thể tập trung vào mục tiêu cốt lõi chứ không phải là bên ngoài và đi ngược lại tiêu chuẩn. File mã nguồn đơn giản mà bạn tạo ra sẽ được biên dịch thành HTML hợp lệ, hoặc trình biên dịch sẽ trả về một lỗi với số dòng cụ thể. Có lẽ bạn sẽ thấy nó dễ dàng hơn là khuấy tung “nồi súp thẻ tag” để tìm một dấu ngoặc nhọn bị thiếu. Chúng đều cần một phần mềm hỗ trợ để biên dịch sang HTML. (Dẫu sao thì đây cũng là phần phụ của bài viết này.)
- Haml (HTML Abstraction Markup Language) | Cần có Ruby để biên dịch
- Jade | Cần Node.js để biên dịch
- Slim | Cần Ruby để biên dịch
CSS
CSS cho phép nội dung ngữ nghĩa và những thuộc tính trình chiếu bên ngoài của văn bản được chia ra làm 2 phần riêng biệt, làm những đặc điểm định kiểu như bố cục, màu sắc, và kiểu chữ linh động và dễ áp dụng vào những văn bản khác nhau. Khi nội dung và thiết kế bên ngoài được chia ra riêng biệt, nhà phát triển có nhiều sự linh động và nhất quán hơn trong thiết kế trực quan.
Tại sao bạn cần đến nó
Những website không được thiết kế sẽ trông tồi tệ và thiếu thu hút. Trong khi có thể chúng có thể đọc được, CSS là đặt nền móng cho việc phân tầng thông tin trực quan nhờ vào bố cục được nó tạo ra. Lấy ví dụ, dưới đây là hình ảnh của thanh “navigation” trên một trang web không được áp dụng CSS.
Hãy chú ý đến kiểu chữ và màu sắc, menu chưa được định dạng có phương thẳng đứng vì đó là kiểu mặc định của trình duyệt. Có vẻ hiếm có ai lại muốn đưa thế giớ internet quay về những năm 1990, vì vậy bạn sẽ muốn kiến thức về CSS của mình là đủ để đảm đương nhiệm vụ làm trang web đẹp đẽ hơn. Thêm vào đó, với sự xuất hiện của những sản phẩm có kích cỡ khác nhau và được kết nối với nhau như iPhone, tablet,v.v, một trong những kỹ năng quan trọng nhất đã trở thành “Responsive Desgin- thiết kế có tính phản hồi”, hoặc website có thể tùy chỉnh tùy vào kích cỡ màn hình. Tất cả chúng đều có thể thực hiện thông qua CSS.
Cấu trúc của một quy tắc CSS
Những quy tắc CSS được viết trong 1 trong 3 nơi sau: a) trong cùng dòng với một thành phần, b)bằng cách tạo ra một section <style> bên trong thẻ <head> của một văn bản HTML, c)trong một file style sheet riêng, ví dụ như style.css
Một cách lý tưởng, những “style” được viết bên trong những “style sheet” mà nhiều website có thể cùng sử dụng. Bằng cách sử dụng chung một hệ thống những quy tắc, những người viết web có thể tiết kiệm thời gian và tạo ra hiển thị trực quan được tổ chức và có sự nhất quán hơn.
Một quy tắc CSS bắt đầu với một selector, ở hình dưới có màu xanh lá. Trong trường hợp này, thành phần được chọn cho quy tắc là p – đoạn văn bản: quy tắc này sẽ được áp dụng cho những thành phần đoạn văn bản. Quy tắc được bao đóng trong {dấu ngoặc móc}, trái lại với dấu <ngoặc nhọn>. Trong trường hợp này, quy tắc làm đoạn văn bản có typerface bình thường.
Những quy tắc CSS có thể phức tạp và rắc rối hơn rất nhiều ví dụ trên. Đó là lý do vì sao, bạn sẽ tốn nhiều thời gian để học CSS hơn HTML.
Phần phụ (Nâng cao)
Giống như HTML, CSS có những bản tối ưu hóa dành cho những người muốn đạt được nhiều hơn, nhanh hơn:
JavaScript
Khi nhiều người nghĩ về việc “code”, họ nghĩ về nó như là việc hướng dẫn máy tính cách để làm gì đó. Đây là nhiệm vụ của ngôn ngữ lập trình, phần cuối cùng của thiết kế front-end.
Những ngôn ngữ lập trình thường được phân loại bằng độ trừu tượng trong ngữ nghĩa, những ngôn ngữ tiền bối, mô hình lập trình, những quy tắc của lệnh. JavaScript được phân loại ở mức đơn giản vì nó đã được mở rộng sang quá nhiều framework-thư viện các lớp đã được xây dựng hoàn chỉnh, để phù hợp với quá nhiều mục đích. Nó là một ngôn ngữ linh động, có cấu trúc tương tự như C, đa mô hình, sặc sỡ màu sắc như một chú tắc kè với những dòng lệnh. Nó là một ví dụ tuyệt vời của những ngôn ngữ được dùng cho nhiều mục đích, hoặc là một ví dụ nghèo nàn của nhiều loại ngôn ngữ khác nhau.
Tại sao bạn cần đến nó
Tại sao phải học JavaScript? Ngôn ngữ này có những đối thủ xếp trên hoặc xếp dưới, cụ thể là về độ thích hợp đối với những người mới bắt đầu. JavaScript có thể là ngôn ngữ lập trình phổ biến nhất hiện tại. Trong khi nó không mang lại nguồn tri thức để hiểu hết về thế giới của “code”, có những sự tranh luận xảy ra giữa việc nên học JS cùng Ruby hay PHP.
JS đơn thuần không thể tiến quá xa – nó đạt đến ngày hôm này là nhờ những framework.
Những framework phổ biến
- Angular, framework JavaScript của Google dành cho những ứng dụng web, điển hình như Gmail.
- JQuery được dùng cho WordPress và những ứng dụng khác.
- React, được xây dựng bởi những kỹ sư của Facebook, được làm ra để tạo ra UI (giao diện người dùng).
Phần phụ (Nâng cao)
Những “sugarcoat” dưới đây sẽ có ích cho việc lập trình JavaScript của bạn:
- CoffeeScript | Cần Node.js
- Typescript | Cần Node.js
Bắt đầu học từ đâu
Bởi vì phát triển front-end hiện tại đang được coi là một kỹ năng công việc cần thiết với những người làm việc ở nhiều lĩnh vực, bạn có lẽ sẽ tìm thấy điểm bắt đầu ở những khóa học trực tuyến. Dưới đây là danh sách những cái tên tiêu biểu:
- Coursera (Trả phí): Thu thập những khóa học trực tuyến từ những trường đại học và học viện. Giá cả rơi vào khoảng từ 50-250USD cho một khóa, nhưng họ quảng cáo rằng sẽ mang đến kiến thức với tiêu chuẩn cao.
- General Assembly Dash (Miễn phí): General Assembly là một sự lựa chọn phổ biến cho những người muốn tìm đến giáo dục trả phí chuyên nghiệp. Dash là một chương trình miễn phí của họ với HTML/CSS/JS.
- Mozilla Developer Network (Miễn phí): MDN uy tín, nhưng cách dạy của họ chủ yếu là cung cấp tài liệu chứ không phải cách hướng dẫn như trong nhà trường.
- Treehouse (Trả phí): Một lớp học online khác, bạn phải trả tiền theo tháng chứ không phải theo khóa học. Nhiều người đã thành công khi học ở đây với lĩnh vực thiết kế như Karen X Cheng.
- Rất nhiều khóa học cũng như tài liệu Tiếng Việt khác cũng là một sự lựa chọn tốt.
Bắt đầu
Một trong những ưu điểm của việc phát triển front-end đối với người mới bắt đầu đó là nó không đòi hỏi những công cụ đắt tiền: Công cụ cơ bản nhất đối với công việc này là một “text editor” và một trình duyệt:
Những “text editor” như Git’s Atom text editor, Sublime Text (Trả phí), hoặc VS Code by Microsoft.
Những trình duyệt như Mozilla Firefox hoặc Google Chrome.
Bên cạnh đó đôi khi bạn cũng cần những chương trình thiết lập máy chủ cục bộ như XAMPP.
Tiện lợi hơn, nhưng sẽ không thể sử dụng khi mất kết nối internet, là những editor trên nền tảng web như:
Những con đường tắt
Cấu trúc của HTML, xét về phần lớn, đều dễ hiểu. Đối với CSS, “style sheet” của một trang trung bình dài hàng ngàn dòng, và bạn có thể cá rằng rất ít những nhà phát triển hiện đại lại tự mình viết chúng. Hiện nay họ chủ yếu sử dụng những framework được xây dựng sẵn như bộ xương sống, sau đó có những tùy chỉnh cần thiết.
Bootstrap, được phát triển bởi Twitter, bao gồm HTML, CSS, và những mẫu JS thường được tìm thấy trên những website hiện nay. Bootstrap gần như là ngôn ngữ cầu nối trong việt bắt đầu phát triển web
Foundation tự xem mình là framework nâng cao nhất thế giới, và được xây dựng tập trung vào kích thước nhỏ và tốc độ
Những tài liệu liên quan
- A List Apart – “Dành cho những ai muốn tạo ra website”
- Can I use – “Những bảng hỗ trợ HTML5, CSS, v.v”
- HTML Living Standard Documentation – “Tiêu chuẩn sống – phiên bản dành cho nhà phát triển web”
- Smashing Magazine – “Dành cho những nhà thiết kế và phát triển web chuyên nghiệp”
- Smashing Magazine
- HTML5 Please
- CSS-Tricks
