Năm 1999, tôi xây dựng trang web đầu tiên của mình bằng cách sử dụng Web Studio 1.0. Web Studio là một giao diện người dùng đồ họa. Có thể tạo một trang đích mới và kéo và thả các phần tử vào đó. Sau đó, tôi thiết lập một miền miễn phí và lưu trữ với GeoCities và thì đấy! Tôi đã có một trang web. Nhanh chóng đến năm 2004, tôi muốn tiến xa hơn và vì vậy, giống như nhiều người khác, tôi bắt đầu xây dựng một trang web của ban nhạc.
- 12 câu hỏi phổ biến về JavaScript được trả lời
Rất nhiều đã thay đổi kể từ đó. Trong bài viết này, tôi sẽ thực hiện chuyến đi ngược dòng trí nhớ và tạo lại trang web tương tự cho web ngày hôm nay.
Lấy các tập tin cho hướng dẫn này.
Vì vậy, hãy bắt đầu! Trước hết, mọi dự án mới đối với tôi đều bắt đầu với mkd, sau đó là g init. Đối với những người bạn biết tôi, tại một số điểm, tôi có thể đã đề cập đến dotfiles với bạn. Dotfiles là các tệp chỉ bắt đầu bằng một dấu chấm (tôi đã mất một thời gian dài đáng ngạc nhiên để thực sự tạo ra kết nối đó!) Và chúng có thể được sử dụng cho một số mục đích. Hai trong số các tệp dotfiles yêu thích của tôi là .aliasas và .functions. Hãy để tôi giải thích…
Trong bash, có thể tạo một thư mục mới bằng lệnh mkdir, sau đó bạn phải thay đổi cd thư mục thành thư mục mà bạn vừa tạo. Sử dụng mã tôi có trong tệp .functions của mình, bây giờ có thể chạy mkd. Thao tác này sẽ không chỉ tạo thư mục mới mà còn thay đổi thành thư mục đó. Điều này thoạt đầu có vẻ quá mức cần thiết, nhưng tôi thích những chiến thắng vi mô này. Theo thời gian, đặc biệt nếu chạy các lệnh này nhiều lần trong ngày, chúng sẽ sớm tiết kiệm được rất nhiều thời gian.
# Tạo một thư mục mới và nhập nó vào hàm mkd () {mkdir -p "$ @" && cd "$ _"; }
Lệnh tiếp theo, nếu bạn đã quen với git, chỉ đơn giản là git init, lệnh này sẽ cho phép chúng tôi kiểm soát phiên bản của dự án. Tôi sử dụng git rất nhiều, ngay cả cho danh sách mua sắm! Vì vậy, thay vì phải gõ git mỗi lần, việc thêm lại bí danh g = "git" vào .aliases là một cách tiết kiệm thời gian nhỏ và tốt cho tôi.
Ngày nay, có rất nhiều khuôn khổ và công nghệ khác nhau. Đối với dự án này, tôi muốn giữ mọi thứ đơn giản. Tôi sẽ sử dụng HTML, CSS và nếu cần, hãy bổ sung thêm JavaScript. Đầu tiên, hãy tạo đánh dấu HTML cơ bản. Nhưng đợi đã! Hãy dừng lại và suy nghĩ một phút.
Đôi khi các nhà phát triển, bao gồm cả tôi, có thể cực kỳ hào hứng với một dự án và muốn bẻ khóa ngay lập tức và đi thẳng vào bàn phím để viết mã. Tuy nhiên, tôi thấy đây thường không phải là cách tiếp cận tốt nhất. Tôi muốn có một cái nhìn tổng quan về dự án trước. Bằng cách làm điều này và có một tầm nhìn rõ ràng hơn nhiều về toàn bộ dự án, tôi thấy nó cho phép đưa ra quyết định tốt hơn nhiều. Ví dụ: nếu tôi đi sâu vào mã, tôi có thể gặp phải sự cố mà sau đó tôi phải quay lại và cấu trúc lại. Có một vài kết quả khác nhau với cách tiếp cận này. Đầu tiên, có thể tôi phải xóa mã hoàn toàn và bắt đầu lại; thứ hai, nếu tiếp tục theo kiểu này, tôi có thể gặp phải 'mã spaghetti' gây khó khăn cho việc cập nhật, gỡ lỗi trong tương lai và dẫn đến giảm hiệu suất; thứ ba, đôi khi nó hoạt động tốt và bạn kết thúc với mã tốt hơn, nhưng tôi có xu hướng nói rằng kết quả đầu tiên và thứ hai phổ biến hơn nhiều.
Dự án này khá nhỏ; nó có một vài trang: Trang chủ, Tin tức, Biểu diễn, Truyền thông, Album, Liên kết và các phần chung giữa các trang này: tiêu đề, điều hướng, nội dung kiểu chữ, danh sách, hình ảnh, video. Khi ban đầu xây dựng trang web Flash vào năm 2004, mọi thứ đơn giản hơn rất nhiều về mặt thử nghiệm. Trang web được xây dựng trong Flash, dành cho Flash trên máy tính để bàn có chuột và bàn phím. Ngày nay, việc sử dụng internet trên thiết bị di động và máy tính bảng phổ biến hơn so với trên máy tính để bàn và xu hướng này đang tiếp tục gia tăng.
Để làm cho trải nghiệm này tốt hơn cho bất kỳ ai xem trang web, tôi sẽ tính đến một số điều khi bắt đầu dự án và sử dụng chiến lược đầu tiên trên thiết bị di động. Để làm như vậy, và một lần nữa, trước khi viết bất kỳ mã nào, tôi sẽ lấy ra một cây bút và giấy kiểu cũ tốt. Đầu tiên, tôi viết sơ đồ trang web; làm như vậy có một số lĩnh vực chính mà tôi nghĩ có thể được cải thiện. Ví dụ: trang web ban đầu của tôi bao gồm các trang khác nhau cho từng album của ban nhạc. Vào thời điểm đó, họ có ba album và rất vừa vặn trong điều hướng. Giờ đây, họ có rất nhiều thứ khác và có khả năng còn nhiều hơn thế nữa, vì vậy trong tâm trí tôi, tôi đang nghĩ về những cách để làm cho trang web trở thành bằng chứng trong tương lai (một trang web cũ nhưng tốt là Thiết kế web chống đạn của Dan Cederholm).
Bây giờ tôi có một ý tưởng sơ bộ về sơ đồ trang web và các trang, tiếp theo là tạo một số khung hình dây có độ phân giải thấp. Từ kinh nghiệm xây dựng nhiều trang web đáp ứng trước đây, thiết bị di động đi kèm với những thách thức thiết kế thú vị, đó là cách tạo điều hướng nhưng vẫn cho phép mọi người xem nội dung chính của trang web. Tôi sẽ đi cùng với kết quả thiết kế mà tất cả chúng ta đều yêu thích / ghét: cách tiếp cận thực đơn bánh mì kẹp thịt. Tuy nhiên, tôi sẽ thêm thắt một chút. Tác phẩm nghệ thuật gốc sử dụng các loài chim, vì vậy thay vì biểu tượng menu burger tiêu chuẩn, tôi sẽ sử dụng tác phẩm nghệ thuật về loài chim sẽ kích hoạt menu và mở và đóng cánh của nó như một cách để cho biết menu có đang hoạt động hay không.
Mọi thứ trong đầu tôi hiện đang bắt đầu hình thành, với ý tưởng về cách mọi người có thể điều hướng xung quanh trang web. Bây giờ tôi sẽ nghĩ về cách các trang có thể trông như thế nào. Bắt đầu với trang chủ, nó khá đơn giản, với nội dung kiểu chữ. Tiếp theo, tin tức - một lần nữa nội dung kiểu chữ, hình ảnh tiềm năng và sau đó là một số loại điều hướng để xem các bài đăng cũ hơn. Gigs - danh sách các hợp đồng biểu diễn sắp tới với các liên kết để mua vé. Đối với Truyền thông, nhìn lại trang web trước đây, tôi thấy 'hình ảnh' và 'video' là hai phần khác nhau, nhưng ở đây tôi nghĩ rằng vẫn còn chỗ để cải thiện và hợp nhất là 'phương tiện'. Album, à, vâng Album - bây giờ đây là nơi mà việc làm này sẽ được đền đáp. Bạn thấy đấy, trang Album có kiểu chữ và hình ảnh, và sẽ cần một số loại điều hướng để xem các bài đăng cũ hơn. Nghe có vẻ quen? Nghe rất giống cấu trúc giống như trang tin tức! Với tổng quan cấp cao nhất này, tôi có thể xem xét và suy nghĩ mọi thứ ở một thành phần chi tiết hơn, một số thậm chí có thể nói cấp thiết kế nguyên tử, nếu bạn đã quen thuộc với tác phẩm của Brad Frost.
Bây giờ tôi có ý tưởng về cách trang web sẽ hoạt động trên các thiết bị nhỏ hơn và các phần tử có thể tái sử dụng, đã đến lúc lặp lại quy trình với các thiết bị lớn hơn. Vì trang web khá đơn giản và với wireframe đã được tạo cho thiết bị di động, tôi thấy các thiết bị lớn hơn khá giống nhau - ngoài việc bây giờ chúng tôi có thêm một số không gian, vì vậy chúng tôi có thể mở rộng các khu vực nội dung và cũng bao gồm một điều hướng bên.
Điều hướng bên là phần của trang web mà tôi thích thú nhất.Lấy cảm hứng từ tác phẩm nghệ thuật ban đầu của ban nhạc, tôi đã xây dựng điều hướng như một hình bóng cây với những chiếc lá. Mỗi lá là một nút liên kết đến một trang khác nhau của trang web. Ngoài ra, khi bạn cuộn và di chuột khỏi chiếc lá, chiếc lá sẽ hoạt hình, rơi xuống đất. Flash rất tuyệt về điều này; nó được gọi là tweening. Bạn có thể đặt một phần tử tại một khung hình chính trong giao diện trên dòng thời gian, tạo một khung hình chính khác dọc theo dòng thời gian và thêm một đường dẫn cho phần tử đó theo sau. Đi xa hơn một chút, thay đổi đường đi, thời gian và tốc độ của những chiếc lá rơi, tôi đã kết thúc với một thứ mà tôi rất hài lòng.
Nhưng hiện tại chúng tôi không sử dụng Flash, vậy làm cách nào để thực hiện điều này? Tôi thường chuyển đến CodePen hoặc JS Bin. Đối với những bạn chưa biết, CodePen và JS Bin là các dịch vụ trực tuyến cho phép bạn viết mã và lưu nhanh chóng. Tôi có xu hướng xem CodePen là thiết kế dẫn đầu hơn và JS Bin tập trung nhiều JavaScript hơn. Đối với dự án này, tôi sẽ sử dụng CodePen để tạo điều hướng cây vì một vài lý do. Đầu tiên, tôi muốn bắt đầu xây dựng phiên bản di động chính của trang web và trên thực tế, bằng cách làm này, nếu mọi thứ trở nên quan trọng, tôi có thể kết thúc bằng một mvp. Mặc dù có những cải tiến cho trang web có thể được thực hiện bằng cách thêm điều hướng và hoạt ảnh lá đẹp mắt, nhưng điều này sẽ mất nhiều thời gian hơn để sản xuất. Lợi thế của việc làm việc trong CodePen cho điều hướng cây có nghĩa là nó được tách biệt khỏi trang web và cơ sở mã chính. Nếu mọi thứ trở nên phức tạp khi hoàn thành nó, tôi có thể lưu lại vị trí hiện tại, tiếp tục với việc xây dựng trang web chính và sau đó quay lại điều hướng. Đôi khi tôi thấy rằng khi giải quyết một vấn đề, hoặc thậm chí ngủ quên về nó, tiềm thức của tôi có thể tiếp tục suy nghĩ về nó. Sau đó, khi quay trở lại vấn đề, một giải pháp sẽ tự xuất hiện.
SVG! Tôi yêu SVGs. Trước đây trong Flash, tôi đã vẽ các nội dung lá trong Illustrator. Thật ngạc nhiên là tôi vẫn có một đĩa CD đang hoạt động với tác phẩm nghệ thuật gốc và có thể mở nó ra. Ngày nay, tôi sử dụng Sketch và nó đã làm rất tốt việc mở tệp. Bây giờ tôi có tất cả các tài sản lá đã sẵn sàng để xuất dưới dạng SVG. Tại sao lại là SVG? Có rất nhiều lý do. Nếu chúng tôi sử dụng jpg hoặc gif trên thiết bị Retina, chúng tôi cũng sẽ phải cung cấp nội dung lớn hơn, nếu không chúng sẽ bị mờ. Ngoài ra, với SVG, chúng ta có thể sử dụng CSS. Điều này thật tuyệt và cho phép chúng tôi thay đổi màu của SVG bằng cách sử dụng một chút CSS thay vì phải tạo một nội dung hình ảnh khác. Điều này có nghĩa là nó dễ bảo trì hơn và là một phần thưởng, nó cũng hoạt động hiệu quả hơn. Nếu bạn không quen thuộc với SVG, tôi thực sự khuyên bạn nên đọc chúng và công việc đáng kinh ngạc từ người bạn tốt của tôi, Sara Soueidan.
Với tài sản cây và lá hiện đã có, điều cuối cùng cần thêm là hoạt ảnh. Có một số cách tiếp cận tôi có thể thực hiện với điều này. Một là sẽ đúng với đường dẫn Flash ban đầu mà tôi đã làm. Điều này có nghĩa là sao chép các đường dẫn và sử dụng SVG và sau đó SVG có khả năng làm việc với các đường dẫn và animateMotion. Tôi khá thích ý tưởng này theo quan điểm hoài cổ, nhưng CSS đã xuất hiện rất nhiều trong những năm qua, và hiện tại chúng tôi đã chuyển đổi và dịch theo ý mình, vì vậy đây có thể là một cách tiếp cận khác. Tiến xa hơn một bước, chúng tôi thậm chí có thể thêm một số JavaScript để ngẫu nhiên hóa những chiếc lá rơi.
Cả hai tùy chọn đều có vẻ tốt, nhưng tôi đang chuyển hướng sang con đường do CSS dẫn dắt hơn. Đây là một lợi ích khác của việc sử dụng CodePen, tôi có thể nhanh chóng thử một cách tiếp cận. Nếu hóa ra nó phức tạp hơn tôi nghĩ ban đầu hoặc cảm thấy không ổn, tôi có thể thử một cách tiếp cận khác mà ít lãng phí thời gian hơn. Trong thực tế, điều này hóa ra là một ý tưởng tuyệt vời! Tôi vẫn đang xem xét các tùy chọn cho việc này - vui lòng tham khảo dự án trên GitHub để biết kết quả cuối cùng.
Với điều hướng cây hiện đã được sắp xếp, tôi quay lại cách tiếp cận đầu tiên trên thiết bị di động, xây dựng điều hướng. Nếu bạn đã quen thuộc với Sass, bạn có nhiều khả năng gặp phải các biến. Nhưng bạn có biết các biến hiện đã có sẵn trong CSS? Họ cũng có hỗ trợ trình duyệt khá tốt trong Chrome, Edge, Safari và Samsung Internet! Vì tôi đang cố gắng duy trì CSS cơ bản và tránh cần thêm bất kỳ phụ thuộc nào nên đây là một tin tuyệt vời. Vì vậy, làm thế nào chúng ta sẽ thực hiện điều này? Ở đầu biểu định kiểu, tôi khai báo các biến của mình:
: root {--grey: #ccc; --red: # fb0f0c; --grid-size: 10px; }
Bây giờ chúng đã được khai báo, tôi có thể gọi chúng, vì vậy, ví dụ: thiết lập màu nền của nội dung sẽ trông như thế này:
body {background: var (- gray); }
Tiến thêm một bước nữa và để giúp căn chỉnh lưới, khoảng trắng, nhịp dọc, bạn có thể nhận thấy rằng tôi cũng đã xác định một biến kích thước lưới. Các biến hoạt động cực kỳ hiệu quả với calc và trông giống như sau:
// Biến tiêu chuẩn đang được sử dụng, xuất ra 10px. padding-top: var (- grid-size); // Thêm calc để nhân đơn vị biến với 2, xuất ra 20px. padding-bottom: calc (var (- grid-size) * 2);
Với các kiểu điều hướng trên thiết bị di động đã hoàn thành, hãy giải quyết chức năng ẩn và hiển thị nó. Đối với nút bật tắt, chúng tôi sẽ áp dụng một thẻ nhãn, sau đó trong thẻ điều hướng, chúng tôi sẽ thêm một đầu vào:
header> h1> Band Trang web / h1> h2> Home / h2> label for = "mobileNav_toggle"> Toggle / label> / header> nav> input type = "checkbox" id = "mobileNav_toggle" role = "button"> ul> li> a href = "#"> Trang chủ / a> / li> li> a href = "#"> Giới thiệu / a> / li> li> a href = "#"> Danh mục đầu tư / a> / li> li> a href = "#"> Tin tức / a> / li> li> a href = "#"> Liên hệ / a> / li> / ul> / nav>
Sử dụng CSS sau đây, chúng ta có thể hiển thị và ẩn menu điều hướng; bởi vì chúng tôi muốn nhãn trong tiêu đề, chúng tôi có thể sử dụng ~ aka dấu ngã hoặc (U + 007E) để nó hoạt động trong khi không được thành công ngay lập tức bởi phần tử đầu tiên.
#mobileNav_toggle [type = checkbox] {display: none; } #mobileNav_toggle [type = checkbox]: đã kiểm tra ~ .mobileNav_list {display: block; }
Khi điều hướng trên thiết bị di động hoàn tất, đã đến lúc triển khai một số thiết kế web đáp ứng. Thêm nội dung chính cho trang web, sau đó sử dụng Chế độ xem đáp ứng trong Công cụ dành cho nhà phát triển Chrome, tôi có thể tăng chiều rộng chế độ xem cho đến khi tôi cảm thấy có đủ chỗ để giữ điều hướng cây một cách thích hợp. Điều này kết thúc ở 600px và đối với điều này, chúng tôi có thể sử dụng một truy vấn phương tiện:
.treeNav {display: none; } @media screen và (min-width: 600px) {.treeNav {display: block; }}
Sắp xong rồi! Cuối cùng để điều hướng cây nằm bên cạnh khu vực nội dung chính, tôi sẽ sử dụng Flexbox:
.container {display: flex; } .treeNav {display: none; chiều rộng tối thiểu: 140px; }
Bây giờ điều hướng cây chiếm 100% chiều cao, với nội dung được thực hiện tương tự và nằm ở bên phải của nó. Điều này có nghĩa là bất kể nội dung có dài bao lâu, nó sẽ không bao giờ chảy bên dưới điều hướng cây. Nếu bạn muốn biết thêm về Flexbox, tôi khuyên bạn nên xem qua flexbox.io bởi một và duy nhất Wes Bos. Có rất nhiều điều nó có thể làm!
Đó là tất cả những gì tôi có thời gian vào lúc này, nhưng vẫn còn rất nhiều việc chúng tôi có thể làm để làm cho dự án này tốt hơn nữa. Nếu bạn có bất kỳ câu hỏi nào hoặc thích bài viết, vui lòng gửi lời chào trên Twitter hoặc thông qua trang web của tôi, hoặc gửi cho tôi một yêu cầu kéo trên GitHub!
Bài báo này ban đầu được xuất bản trong số 304 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Mua số 304 tại đây hoặc là Đăng ký tại đây.
