Xây dựng lại trang web Flash năm 2004 cho năm 2018

Rất nhiều đã thay đổi kể từ đó. Trong bài viết này, tôi sẽ tham gia một chuyến đi xuống Memory Lane và tạo lại cùng một trang web 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, nhìn chung, mọi dự án mới cho tôi bắt đầu với MKD theo sau là G init. Đối với những người bạn biết tôi, tại một số điểm, có lẽ tôi đã đề cập đến các dotfiles cho bạn. DotFiles là các tệp chỉ đơn giản là bắt đầu bằng một dấu chấm (tôi phải mất một thời gian dài đáng ngạc nhiên để thực sự tạo 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 dotfiles yêu thích của tôi là .aliasasas và .funt. Hãy để tôi giải thích ...

Trong bash, có thể tạo một thư mục mới bằng cách sử dụng lệnh mkdir sau đó sau đó bạn phải thay đổi đĩa thư mục vào thư mục mà bạn vừa tạo. Sử dụng mã tôi có trong tệp .Finations của mình, giờ đây có thể chạy MKD. Điều này cũng 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 có vẻ quá mức cần thiết lúc đầu, nhưng tôi yêu những chiến thắng vi mô này. Theo thời gian, đặc biệt là nếu chạy các lệnh này nhiều lần một ngày, họ sớm thêm vào rất nhiều thời gian lưu.

 # Tạo một thư mục mới và nhập nó
Hàm MKD () {
    mkdir -p "$ @" & amp; & amp; CD "$ _";
} 

Lệnh tiếp theo, nếu bạn quen thuộc với git, chỉ đơn giản là git init, điều này sẽ cho phép chúng ta kiểm soát phiên bản dự án. Tôi sử dụng git rất nhiều, ngay cả đối với danh sách mua sắm! Vì vậy, thay vì phải gõ git mỗi lần, thêm bí danh g = "git" thành .aliases một lần nữa là một tiết kiệm thời gian nhỏ, tốt đẹp cho tôi.

Những ngày này, có rất nhiều khung và công nghệ khác nhau. Đối với dự án này, tôi muốn giữ cho mọi thứ đơn giản. Tôi sẽ sử dụng HTML, CSS và nếu yêu cầu rắc JavaScript. Đầu tiên, hãy tạo đánh dấu HTML cơ bản. Nhưng hãy đợi! Hãy dừng lại và suy nghĩ trong một phút.

Đôi khi các nhà phát triển, bản thân tôi đã bao gồm, có thể siêu thú vị về một dự án và muốn bị 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 điều này thường không phải là cách tiếp cận tốt nhất. Tôi thích có được một cái nhìn tổng quan trong tâm trí của dự án đầu tiên. Bằng cách 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 ra quyết định tốt hơn nhiều. Ví dụ, nếu tôi lặn thẳng vào mã, tôi có thể gặp phải một vấn đề mà sau đó tôi phải quay lại và tái cấu trúc. 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ể là 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 trong thời trang này, tôi có thể kết thúc với 'Mã spaghetti' gây khó khăn trong tương lai để cập nhật, gỡ lỗi và dẫn đến mất hiệu suất; Thứ ba, đôi khi nó hoạt động ổn 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ả thứ nhất và thứ hai là 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, Gigs, Phương tiện, Album, Liên kết và Phần phổ biến Trong số các trang này: Tiêu đề, Điều hướng, Nội dung typography, Danh sách, Hình ảnh, Video. Khi xây dựng trang web Flash năm 2004, mọi thứ đơn giản hơn rất nhiều về thử nghiệm. Trang web được tích hợp trong Flash, để flash trên máy tính để bàn với chuột và bàn phím. Những ngày này, việc sử dụng internet di động và máy tính bảng phổ biến hơn trên máy tính để bàn, và xu hướng này đang tiếp tục tăng.

Để thực hiện một trải nghiệm tốt hơn cho bất cứ ai xem trang web, tôi sẽ tính đến một vài điều khi bắt đầu dự án và sử dụng chiến lược đầu tiên của 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ẽ thoát khỏi một cây bút và giấy lỗi thời tốt. Đầu tiên, tôi viết ra sơ đồ trang web; Khi làm như vậy có một số lĩnh vực quan trọng 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 mỗi album của ban nhạc. Tại thời điểm họ có ba album và để phù hợp độc đáo trong điều hướng. Bây giờ họ có nhiều hơn và có khả năng nhiều hơn để đến, vì vậy đã trong tâm trí tôi đang nghĩ về những cách để làm cho trang web thêm bằng chứng trong tương lai (một người già nhưng một Goodie là Dan Cederholm Thiết kế web chống đạn ).

Bây giờ tôi có một ý tưởng sơ bộ trong đầu sơ đồ trang web và trang của mình, tiếp theo là tạo ra một số khung dây thấp. Từ kinh nghiệm trước đây Xây dựng nhiều trang web đáp ứng, Mobile đi kèm với những thách thức thiết kế thú vị, cụ thể 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 đã phát triển để yêu / ghét: cách tiếp cận menu burger. Tuy nhiên, tôi sẽ thêm một chút xoắn. Các tác phẩm nghệ thuật ban đầu đã sử dụng chim, ví dụ như biểu tượng menu burger tiêu chuẩn, tôi sẽ sử dụng tác phẩm nghệ thuật chim sẽ kích hoạt menu và mở và đóng cánh của nó như một cách để biểu thị nếu menu đang hoạt động hay không.

Những điều trong tâm trí tôi hiện đang bắt đầu hình thành, với một ý tưởng về cách mọi người sẽ có thể điều hướng xung quanh trang web. Bây giờ tôi sẽ suy 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 typography. Tiếp theo, tin tức - một lần nữa nội dung typography, có khả năng hình ảnh và sau đó một số loại điều hướng để xem các bài đăng cũ hơn. Gigs - một 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 phương tiện truyền thông, nhìn lại trang web trước đó, tôi có 'hình ảnh' và 'video' là hai phần khác nhau, nhưng ở đây tôi nghĩ có chỗ để cải thiện và củng cố là 'phương tiện truyền thông'. Album, Ah, Có Album - Bây giờ đây là nơi thực hiện loại điều này đượ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 có nhiều giống như cấu trúc giống như trang tin tức! Tổng quan cấp cao nhất này, tôi có thể nhìn và nghĩ rằng mọi thứ ở một thành phần, thành phần hơn, một số thậm chí có thể nói Thiết kế nguyên tử Cấp độ, nếu bạn quen thuộc với công việc của Brad Frost.

Bây giờ tôi có một ý tưởng về cách trang web sẽ hoạt động trên các thiết bị nhỏ hơn và các yếu tố có thể tái sử dụng, đã đến lúc lặp lại quá trình với các thiết bị lớn hơn. Vì trang web khá đơn giản, và với các khung dây đã đượ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 ra, chúng tôi có thêm một số phòng, để 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à bit của trang web mà từ phần bù tôi rất hào hứng. Lấy cảm hứng từ tác phẩm nghệ thuật gốc 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 lá. Mỗi lá là một nút được liên kết với một trang khác của trang web. Ngoài ra, khi bạn cuộn và lơ lửng khỏi lá, lá sẽ hoạt hình, rơi xuống đất. Flash là tuyệt vời ở đâ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 khác nữa dọc theo dòng thời gian và thêm một đường dẫn cho phần tử để theo dõi. Lấy những thứ xa hơn một chút, thay đổi nhiều đường, thời gian và tốc độ của những chiếc lá rơi, cuối cùng tôi đã kết thúc với thứ mà tôi rất hài lòng.

Nhưng bây giờ chúng tôi không sử dụng flash, vậy làm thế nào để chúng ta làm điều này? Khá thường xuyên tôi sẽ nhảy vào codepen hoặc js bin. Đối với những người không biết, Codepen và JS Bin là các dịch vụ trực tuyến cho phép bạn nhanh chóng mã và lưu. Tôi có xu hướng thấy Codepen như nhiều đèn LED thiết kế, và JS Bin tập trung nhiều JavaScript. Đố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 điều này, nếu mọi thứ rất quan trọng, tôi có thể kết thúc với 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à hình ảnh động lá đẹp, thì điều này sẽ mất nhiều thời gian hơn để sản xuất. Mộ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 phân lập từ trang web chính và cơ sở mã. Nếu mọi thứ trở nên khó khăn với việc hoàn thành nó, tôi có thể lưu nơi tôi đang ở, hãy tiếp tục với bản dựng trang web chính, sau đó quay lại điều hướng. Đôi khi tôi thấy rằng trong việc đi khỏi một vấn đề, hoặc thậm chí ngủ trên đó, tiềm thức của tôi có thể tiếp tục suy nghĩ về nó. Sau đó, sau khi quay lại vấn đề, một giải pháp thể hiện chính nó.

SVGS! Tôi yêu Svgs. Trước đây trong Flash, tôi đã rút ra tài sản lá trong Illustrator. Thật ngạc nhiên khi tôi vẫn còn một đĩa CD hoạt động với tác phẩm nghệ thuật gốc và có thể mở nó. Những ngày này tôi sử dụng Phác thảo và nó đã làm rất nhiều công việc mở tệp. Bây giờ tôi có tài sản lá đã sẵn sàng để được xuất dưới dạng SVGS. Tại sao SVGS? Có rất nhiều lý do. Nếu chúng ta sử dụng JPG hoặc GIF trên thiết bị Retina, chúng ta cũng sẽ phải cung cấp tài sản lớn hơn, nếu không chúng sẽ bị mờ. Ngoài ra, với SVGS, chúng ta có thể sử dụng CSS. Điều này rất tuyệt và cho phép chúng tôi thay đổi màu sắc của SVG bằng cách sử dụng một chút CSS thay vì phải tạo một tài sản hình ảnh khác. Điều này có nghĩa là việc duy trì dễ dàng hơn, và như một phần thưởng mà nó cũng có hiệu suất cao hơn. Nếu bạn không quen thuộc với SVGS, tôi khuyên bạn nên đọc theo họ và công việc đáng kinh ngạc từ người bạn tốt của tôi, Sara Soueidan. .

Với các tài sản trên cây và lá bây giờ, điều cuối cùng để thêm là hình động. Có một vài cách tiếp cận tôi có thể thực hiện với điều này. Một người sẽ là một cách đúng với con đường 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 đó có khả năng tiếp tục SVG hoạt động với các đường dẫn và Animatemotion. Tôi khá thích ý tưởng này từ quan điểm hoài cổ, nhưng CSS đã đến rất nhiều so với những năm qua và bây giờ chúng tôi đã chuyển đổi và dịch theo ý của chúng tôi, vì vậy đây có thể là một cách tiếp cận khác. Thực hiện thêm một bước nữa, chúng ta thậm chí có thể thêm một số JavaScript sẽ chọn ngẫu nhiên lá rơi.

Cả hai tùy chọn nghe tốt, nhưng tôi đang lắc lư về phía tuyến đường CSS-led nhiều 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 đi và 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 nó không cảm thấy đúng, tôi có thể thử một cách tiếp cận khác với ít thời gian lãng phí. 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 cho 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 di động đầu tiên, 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 bây giờ có sẵn trong CSS không? Họ có Hỗ trợ trình duyệt khá tốt Trong Chrome, Edge, Safari và Samsung Internet là tốt! Khi tôi đang cố gắng để giữ cho CSS cơ bản và tránh nhu cầu về bất kỳ phụ thuộc thêm nào, đây là tin tuyệt vời. Vậy làm thế nào chúng ta sẽ thực hiện điều này? Ở đầu bảng kiểu, tôi tuyên bố các biến của mình:

: root {
  --Grey: #ccc;
  --Red: # fb0f0c;
  - Kích thướcGrid: 10px;
} 

Bây giờ họ đã được tuyên bố, tôi có thể gọi cho họ, vì vậy ví dụ cài đặt màu nền cơ thể sẽ trông như thế này:

 cơ thể {
  Bối cảnh: var (- màu xám);
} 

Thực hiện thêm một bước này và để giúp căn chỉnh lưới, không gian trắng, nhịp dọc, bạn có thể nhận thấy 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ỳ tốt với Calc và điều đó có vẻ hơi giống như thế này:

 // biến tiêu chuẩn đang được sử dụng, đầu ra 10px.
Padding-Top: var (- kích thước lưới);

// Thêm calc để nhân đơn vị biến bằng 2, đầu ra 20px.
Đệm-Dưới: Calc (Var (- Kích thước lưới) * 2); 

Với các phong cách điều hướng di động hoàn tất, hãy giải quyết chức năng ẩn nấp và hiển thị nó. Đối với nút toggle, chúng ta sẽ áp dụng một thẻ nhãn, sau đó trong thẻ NAV, chúng tôi sẽ thêm một đầu vào:

& lt; tiêu đề lớp = "Tiêu đề" & gt;
  & lt; H1 Class = "Header_Title" & GT; BAND WEBSITE & LT; / H1 & GT;
  & lt; h2 class = "header_cienpage" & gt; home & lt; / h2 & gt;
  & lt; nhãn cho = "mobilenav_toggle" class = "mobilenav_toggle" & gt; toggle & lt; / nhãn & gt;
& lt; / tiêu đề & gt;

& lt; nav class = "mobilenav" & gt;
  & lt; nhập loại = "hộp kiểm" id = "MOBILENAV_TOGGLE" Vai trò = "Nút" & GT;
  & lt; ul class = "mobilenav_list" & gt;
    & lt; li class = "mobilenav_listem" & gt; & lt; a class = "mobilenav_listemlink" href = "#" & gt; / a & gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; about & lt; & lt; / li & gt;
    & lt; li class = "mobilenav_listem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; portfolio & lt; & lt; / li & gt;
    & lt; li class = "mobilenav_listem" & gt; & lt; a class = "mobilenav_listemlink" href = "#" & gt; tin tức & lt; / a & gt; / li & gt;
    & lt; li class = "mobilenav_listem" & gt; & lt; a class = "mobilenav_listitemlink" href = "#" & gt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt; 

Sử dụng CSS sau, 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 ta có thể sử dụng ~ AKA Tilde hoặc (U + 007e) để nó hoạt động trong khi không được thành công ngay lập tức bởi yếu tố đầu tiên.

 #mobilenav_toggle [type = clube] {
  không trưng bày;
Không thể

#mobilenav_toggle [type = clube]: Đã kiểm tra ~ .mobilenav_list {
  Hiển thị: Khối;
} 

Với điều hướng di động hoàn tất, đã đến lúc thực hiện một số thiết kế web đáp ứng . Thêm vào nội dung chính cho trang web, sau đó sử dụng chế độ xem đáp ứng trong các công cụ dành cho nhà phát triển Chrome, tôi có thể tăng chiều rộng khung nhìn cho đến khi tôi cảm thấy có đủ chỗ để giữ đủ điều hướng cây. Điều này kết thúc là ở mức 600px, và đối với điều này, chúng ta có thể sử dụng Truy vấn phương tiện:

 .Treenav {
  không trưng bày;
Không thể

@Media Màn hình và (Chiều rộng tối thiểu: 600px) {
  .Treenav {
    Hiển thị: Khối;
  Không thể
} 

Gần như ở đó! Cuối cùng để điều hướng cây để ngồi cạnh khu vực nội dung chính, tôi sẽ sử dụng Flexbox:

 .Container {
  Hiển thị: Flex;
Không thể

.Treenav {
  không trưng bày;
  Chiều rộng tối thiểu: 140px;
} 

Bây giờ điều hướng cây chiếm chiều cao 100%, với nội dung làm như vậy và ngồi bên phải của nó. Điều này có nghĩa là bất kể nội dung trở thành 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 kiểm tra flexbox.io. bởi một và duy nhất wes bos. Có rất nhiều thứ có thể làm!

Đó là tất cả những gì tôi có thời gian cho lúc này, nhưng vẫn còn nhiều thứ chúng tôi có thể làm để làm cho dự án này thậm chí còn tốt hơn. Nếu bạn có bất kỳ câu hỏi, hoặc thích bài viết, xin vui lòng nói xin 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 viết này ban đầu được xuất bản trong số phát hành 304 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 304 tại đây hoặc là Đăng ký tại đây .

Những bài viết liên quan: