10 - High Points CSCI 1710 - Introduction to Web Development and Design Lectures 6-10
Site Design Gestalt Web Design Principles An organized whole is perceived to be more than the sum of its parts. Emergence - the whole perceived before the parts Reification - our mind fills in gaps Multistability - the mind seeks to avoid uncertainty Invariance - recognizing similarities and differences
Web Design Tips Listen to your customer Guide the user’s eye Visual hierarchy Important items near the top (above the fold) Left to right / top to bottom
CSS Positioning Static Relative Absolute Fixed
CSS Positioning Width Height Left Right Bottom Top
CSS Float Only block level elements Content wraps around Left or right Continues until ‘clear’ (left, right, or both)
CSS Contextual Selectors Group tags (e.g., h1, h2, h3, h4) Nested tags ‘*’ -- all tags on page ‘ ‘ (space) -- all tags and children ‘>’ -- immediate children
HTML Semantics Semantic Tags New with HTML 5 ‘Special’ tags that provide meaning about their content Examples: <form>, <table>, <header>, <footer>, <img>, <section>, <article>, <aside>, <nav>
HTML Semantics Semantic Tags <article> may be nested inside <section> and vice versa, depending <section> defined as a block of related elements Think of ‘newspaper analogy’
HTML Semantics Figure Captions <figure> <img src=“images/ic.jpg” alt=“Integrated Circuit” /> <figcaption>Fig. 1 – An integrated circuit chip</figcaption> </figure>
HTML Semantics One Possibility <body> <header> (Page Header) <section> <header> (Article Header) <article> <footer> (Page Footer) <aside> <nav> (Main Navigation) <article> <header> (Article Header) <h1> (Heading) <p> (Article Content) <footer> (Article Footer) One Possibility
Fonts Google Fonts API -- Application Programming Interface Use custom fonts free / provided by Google https://www.google.com/fonts font-family property: if selected font is not installed on client computer, default will display instead
Fonts Five steps: Navigate to Google Fonts - https://www.google.com/fonts Select the font(s) you want to use Click on ‘Use’ Copy the link into your HTML document’s head element Add the font name’s value to the font-family property in your CSS
Fonts Google Fonts Should be used sparingly! Performance hit
Domains What’s in a name? ICANN -- Internet Corporation for Assigned Names and Numbers ‘Middlemen’ (e.g., GoDaddy) Purchasing domain vs. web hosting
Questions? ?
Copyrights Presentation prepared by and copyright of John Ramsey, East Tennessee State University, Department of Computing . (ramseyjw@etsu.edu) Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Oracle is a registered trademark of Oracle Corporation. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. ERPsim is a registered copyright of ERPsim Labs, HEC Montreal. Other products mentioned in this presentation are trademarks of their respective owners.