CMP186* - : tailieuhoctap@hutech.1 Wireframing, mockup và prototype .1 (PaaS) Platform as a Service .2 (IaaS) Infrastructure as a Service .1 Replacing Virtual Machine .4 Enabling a microservices architecture .6 Reducing debugging overhead .7 Enabing continuous delivery (CD). 80 IV MÔ MÔN Công và môi phát là trong môn cung có có nguyên và cho phát trình. công trình không mà còn giúp rút gian hoàn máy tính. Các công lý án cung tính giám sát ngày lý các phiên và quan là giúp các nhóm làm DUNG MÔN - Bài 1: Cung cho sinh viên các khái và các trong UI/UX các công và công Balsamiq Wireframes.
- Bài 2: Cách và các phím trong Dev Tool trong trình web giúp các developer gian và nâng cao làm - Bài 3: lý phiên lý code và làm nhóm developer nên - Bài 4: Trong lý, theo dõi và hành án yêu thông tin khác nhau nên lý và lý án có hoàn thành nhanh, có - Bài 5: toán mây cho phép quá trình mua/thuê hay máy (server). nêu ra yêu mình, gom các tài nguyên yêu Môn mã sinh viên có trình, trình trình website, xúc internet. V YÊU MÔN các dung khi làm các bài nhà và gian nhà. CÁCH DUNG MÔN môn này, sinh viên ôn các bài các câu và làm bài bài và tìm thêm các thông tin liên quan bài bài sinh viên tiêu và tóm bài sau dung bài thúc ý bài sinh viên câu ôn và thúc toàn bài sinh viên làm các bài.
PHÁP GIÁ MÔN Môn giá hai thành - quá trình (50%): Hình và cách giá do viên lý phê môn. - thi (50%): Hình làm án môn và thi trên dung án môn lý trong các bài Danh sách án do viên môn và cung vào khóa BÀI 1: 1 BÀI 1: Bài này giúp các dung sau: - Wireframing, Mockup, và Prototype là gì? - Các wireframe. - Các tính công Balsamiq Wireframes và các chúng.1 KHÁI NI M Khi nói phát quan là trông nào, khi phát là quan vì nó vai trò là kim nam cho các bên liên quan trong án Theo các mô ra yêu Tuy nhiên, khi các này, cá nhân có cách hình dung riêng yêu này trong các nhóm phát và lãng phí và gian.1 Wireframing, mockup và prototype Xu chung trong quá trình UI/UX (giao dùng) cho là ba giai wireframing, mockup và prototype. Wireframing có là quan hóa màn hình (di web).
Trong có nhu ngày càng màn hình/trang giá nó. 2 BÀI 1: Mockup trung vào các quan trên màn hình/ trang. Chúng hoàn thành và và các trên trang. Mockups là các tin hình.
Prototype là mockup có thêm UX dùng). Có là ta có vào button, có màn hình, có v.2 T i sao dùng wireframing Wireframing là gian yêu nói, tranh có giá ngàn , Wireframing cung cái nhìn thoáng qua yêu màn hình/ trang nào cách quan hóa màn hình và các cùng, nó giúp các nhóm phát theo tiêu chung. wireframe là Business Analyst (Nhà phân tích User Interface Designer (Nhà giao / Interaction Designer (Nhà tác) 1.3 Các công c wireframing Công wireframing là bút và bút chì. này không gì ! Tuy nhiên, khi nói nó các nhóm, ta giao bút và bút chì, có thêm các tính chia qua email hay các Có công này, hình là: Axure, UxPin, Balsamiq và Proto.
Balsamiq là công các yêu wireframing, tác và sáng tính nó cho phép thành viên trong nhóm wireframing nhanh chóng, ra tính phát Nó cho phép tác trên các nhóm khác nhau, thành viên trong nhóm có tác các nhóm cùng trí xa khác nhau. các wireframe PDF / PNG linh BÀI 1: 3 1.2 GI I THI U BALSAMIQ WIREFRAMES Balsamiq phát trên 2 Cloud và Desktop.1 Cài t Balsamiq trên máy tính Adobe Air 2.6 Nó 1 trên các máy tính và hành. Các yêu ra Mac OS X - macOS 10.12 (macOS Sierra) - 4GB RAM - 100MB không gian Windows - Windows 7 with SP2 - 4GB RAM - 150MB không gian 1.2 Giao di n Balsamiq Sau khi cài xong, Balsamiq, màn hình sau: 1 4 BÀI 1: Hình 1.1: Giao Balsamiq hình 1-1, giao dùng Balsamiq chia thành 4 thành sau: - Navigator - UI Library - Inspector - Wireframe space/Area 1.3 UI Library vi n UI) UI phân theo các màn hình khác nhau. có theo ngang trên All và xem các thành màn hình có trong Balsamiq.2: UI Library này phân chia theo danh BÀI 1: 5 All Danh này bao các UI có trong Balsamiq.
có theo ngang xem / chúng. Assets Danh này thành do dùng lên Big Danh này bao các màn hình, có kích Ví trình placeholders, iPad, Buttons Nó bao các nút (button controls) trong wireframe trang web hay di Common Nó bao hình / khác nhau các tác Containers tên nó bao trình Field Forms các UI (UI controls) liên quan form. Icons các dùng trong giao iOS các UI dành riêng cho hành iOS. Layout Các thành trên 1 trang/ màn hình.
Markup các thành dùng ghi chú, bình trong wireframe Media các liên quan hình âm thanh trong wireframe Symbols các thành có tái Text tên nó bao các UI liên quan 1.1 B i c nh Bài này ví website cho 1 công ty. Chúng ta xây các wireframes cho website 1 công ty Trong giai chúng ta suy và hình dung các trang có trên website và dung chúng. Hãy xem xét các trang sau cho trang web: 6 BÀI 1: Hình 1.3: Các trang trong website 1 công ty theo là các ví các trang. Cách chi trong các bài hành.4: Ví wireframe trang Home 1.3 Trang and Hình 1.5: Ví wireframe trang "Products and Services" 8 BÀI 1: 1.6: Ví wireframe trang "About Us" 1.7: Ví wireframe trang "Contact Us" BÀI 1: 9 khách hàng các này, chúng ta các wireframe sang các khác ví PDF, PNG.
Các trong UI/UX wireframing, mockup, prototype M c c tính Công c trung th c Phác h a, Tài li u, trao tr ng xám ho c Axure, UxPin, Wireframe Th p i, th o lu n xanh, th hi n Balsamiq, Proto.io nhanh c giao di n Thu th p ý ki n, xây d ng Sketch (onlyMac), Trung bình Giao di n có thi t Mockup ng d ng, Photoshop, Cao k UI, nh trình bày nhà Illustrator, Adobe XD ut. ng i dùng, HTML/CSS/Javascript, UI chi ti t + UX Prototype Cao trình bày, SketchUp (only Mac), animation, flow dùng l i giao Adobe XD di n. Ngoài ra, cách xây các wireframe cho website 1 công ty và Câu 1: Wireframe, Mockup, Prototype là gì? So sánh và tính khái Câu 2: 1 website xây các wireframe cho website 10 BÀI 2: BÀI 2: DEVTOOLS Khi trình web các trình viên hay các công phát hay là Developer Tool tra mã HTML hay debug mã javascript. này ra khá xuyên và có thao tác Vì thành cách và các phím trong Dev Tool giúp gian và nâng cao làm 2.1 KH NG CHROME DEVELOPER TOOL hãy Google Chrome và sau phím F12 nó.
Trong Developer Tool ra phía màn hình, có các khung panel sau: - Elements - Resources - Network - Source - Timeline - Profile - Audits - Console BÀI 2: 11 Trong các khung mà làm là Elements, Resources, Network và khung Console.2 KHUNG ELEMENTS Khung này dùng tra các trong HTML vì trong các sách Anh nó còn là khung element inspector. có mã HTML trên khung này cách click lên trong khung. Khi click lên HTML mã CSS dành cho này khung phía tay có thay CSS và theo dõi thay trên trình 12 BÀI 2: 2.3 KHUNG RESOURCES khung này có tìm danh sách các file javascript, html, css có trong trang web và thông tin Cookies, Local Storage các phiên trình HTML5). có thêm, và xóa các thông tin Cookies và Local Storage 2.4 KHUNG NETWORK khung này các thông tin chi các request trình server bao URL request, thái request (thành công hay có server.), gian server request.5 KHUNG CONSOLE khung này có thông tin javascript có).
có các mã javascript trên khung này.6 PHÍM T T TRONG CHROME DEV TOOLS cùng này, tôi các phím trong Chrome Dev Tools Windows / Linux Mac Kh i ng Dev Tool F12, Ctrl + Shift + I Cmd + Opt + I M (chuy n qua) Inspect Element mode Ctrl + Shift + C Cmd + Shift + C M Dev Tool và chuy n qua console tab Ctrl + Shift + J Cmd + Opt + J Chuy n qua khung panel sau Ctrl + ] Cmd + ] Chuy n qua khung panel c Ctrl + [ Cmd + [ 14 BÀI 2: Chrome Developer Tool là công cho các trình viên tích trong Google Chrome. DevTools cung cho các nhà phát web truy vào trình và web DevTools và code HTML, CSS, JavaScript. CÂU Câu 1: màu các element khác trên trang web Câu 2: Tìm cách console log, không log khi refresh trang web? Câu 3: Cách nhanh các file javascript trong trang web? BÀI 3: 15 BÀI 3: lý phiên (mã là gì, sao nên quan tâm? lý phiên là các thay tin (file) các tin theo gian, do nó giúp có quay phiên xác nào sau này. dù các ví trong sách này mã là cho lý phiên song trong file nào trên máy tính có cho lý phiên là nhà website, các phiên (cái mà thì Lý phiên (Version Control System - VCS) là cách làm khôn ngoan.
VCS cho phép khôi phiên các file, khôi phiên toàn án, xem các thay theo gian, xem ai là thay cùng có gây ra hay xem ai là gây ra và còn VCS còn khi làm tung lên hay vô tình xoá các file có khôi chúng cách dàng. quá trình này có nhanh chóng và không quá công 3.1 H TH NG QU N LÝ PHIÊN B N C C B pháp lý phiên cách copy các file sang khác (có là các tên theo gian, thông minh). là pháp vì nó tuy nhiên nó gây ra quên trong nào hay vô tình sao chép file mà không này, lâu các trình viên phát các phiên VCS có database các thay các files soát thay (xem Hình 1.1: Mô hình lý phiên trong lý phiên có tên là rcs còn máy tính cho bây Ngay hành Mac OS X vào các rcs khi cài Developer Tools (Các công dành cho trình viên). này cách các vá thay các file) phiên này qua phiên khác trên nó có tái file nào nào cách các vá nhau.2 H TH NG QU N LÝ PHIÊN B N T P TRUNG nghiêm theo mà là tác các trình viên khác trong qua này, Lý Phiên Trung (Centralized Version Control Systems - CVCSs) phát Các này, ví CVS, Subversion, và Perforce, bao máy có các tin "phiên hoá" (versioned), và danh sách các máy khách có thay các tin này trên máy trung tâm Trong vòng mô hình này thành tiêu cho lý phiên (xem Hình 1.2: Mô hình lý phiên trung.
Mô hình này cung so lý Ví dùng nào mà khác trong án làm. lý có lý ai có làm gì theo ý và này dàng so lý máy riêng Tuy nhiên, mô hình này có nghiêm là trung" mà máy trung tâm máy không trong là trong gian không ai có tác còn các thay phiên hoá tin nào mà thao tác.