{"id":5,"date":"2020-12-12T12:22:27","date_gmt":"2020-12-12T17:22:27","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/nps207\/2020\/12\/12\/chapter-1\/"},"modified":"2020-12-14T21:08:10","modified_gmt":"2020-12-15T02:08:10","slug":"chapter-0","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/chapter\/chapter-0\/","title":{"raw":"Chapter 0 \u2022 Outline","rendered":"Chapter 0 \u2022 Outline"},"content":{"raw":"<h2>Chapter 1 \u2022 Introduction<\/h2>\r\n<ul>\r\n \t<li>What is a Screen Image?\r\n<ul>\r\n \t<li>Bitmapped image\u2014pixels, resolution (<span style=\"color: #ff0000\"><strong>Figure 1-1<\/strong><\/span>)<\/li>\r\n \t<li>Resolution for screen\u2014Common screen sizes\r\n<ul>\r\n \t<li>1920x1080 is maximum size and used by 20% of viewers<\/li>\r\n \t<li>1024px looks like letter-sized paper viewed at 30cm<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>How do photographs appear on screens?\r\n<ul>\r\n \t<li>News sites<\/li>\r\n \t<li>Catalogs sites<\/li>\r\n \t<li>Marketing sites<\/li>\r\n \t<li>Ebooks<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>How to Think About Screen Images\r\n<ul>\r\n \t<li>photos and text\u2014which is more important?<\/li>\r\n \t<li>text heavy documents\u2014marketing, history, novels, non-fiction<\/li>\r\n \t<li>photo-heavy documents\u2014photo sites, travel, recipes<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h2>Chapter 2 \u2022 Text and Photos<\/h2>\r\n<ul>\r\n \t<li>Types of web sites\r\n<ul>\r\n \t<li>fixed-width site\u2014looks like paper, book, magazine; easy to read (<span style=\"color: #ff0000\"><strong>Figure 2-1\u00a0<\/strong><\/span>)<\/li>\r\n \t<li>variable-width site\u2014expands to fill screen, dramatic (<span style=\"color: #ff0000\"><strong>Figure 2-2<\/strong><\/span>)<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Types of eBooks\r\n<ul>\r\n \t<li>reflowable ePub (<span style=\"color: #ff0000\"><strong>Figure 2-3<\/strong><\/span>)\r\n<ul>\r\n \t<li>text reflows to adapt to screen size and orientation<\/li>\r\n \t<li>readers can select type style and size for legibility\/accessibility<\/li>\r\n \t<li>best for text-heavy documents<\/li>\r\n \t<li>photos and design effects (ornaments, drop-caps, sidebars, callouts) are a bonus<\/li>\r\n \t<li>photos are limited to page width but can be linked to be expandable<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>fixed-layout ePub (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>)\r\n<ul>\r\n \t<li>not reflowable, potentially less legible\/accessible<\/li>\r\n \t<li>best for eBooks where photos and layout are equally important<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h2>Chapter 3 \u2022 Designing a Web Site<\/h2>\r\n<ul>\r\n \t<li>Fixed-width (<span style=\"color: #ff0000\"><strong>Figure 3-1<\/strong><span style=\"color: #000000\">)<\/span><\/span>\r\n<ul>\r\n \t<li>widths in pixels (px)<\/li>\r\n \t<li>accessibility\/responsive design: max-width<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Variable width (<span style=\"color: #ff0000\"><strong>Figure 3-2<\/strong><\/span>)\r\n<ul>\r\n \t<li>widths in %, vw (viewport width), vh (viewport height)<\/li>\r\n \t<li>image as background<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Design exercise\r\n<ul>\r\n \t<li>notes from Google Drive<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h2>Chapter 4 \u2022 Designing an ePub<\/h2>\r\n<ul>\r\n \t<li>Reflowable (ePub-RFL) (<span style=\"color: #ff0000\"><strong>Figure 4-1<\/strong><\/span>)<\/li>\r\n \t<li>Fixed Layout (ePub-FXL) (<span style=\"color: #ff0000\"><strong>Figure 4-1<\/strong><\/span>)<\/li>\r\n \t<li>Design exercise\r\n<ul>\r\n \t<li>notes from Google Drive<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","rendered":"<h2>Chapter 1 \u2022 Introduction<\/h2>\n<ul>\n<li>What is a Screen Image?\n<ul>\n<li>Bitmapped image\u2014pixels, resolution (<span style=\"color: #ff0000\"><strong>Figure 1-1<\/strong><\/span>)<\/li>\n<li>Resolution for screen\u2014Common screen sizes\n<ul>\n<li>1920&#215;1080 is maximum size and used by 20% of viewers<\/li>\n<li>1024px looks like letter-sized paper viewed at 30cm<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>How do photographs appear on screens?\n<ul>\n<li>News sites<\/li>\n<li>Catalogs sites<\/li>\n<li>Marketing sites<\/li>\n<li>Ebooks<\/li>\n<\/ul>\n<\/li>\n<li>How to Think About Screen Images\n<ul>\n<li>photos and text\u2014which is more important?<\/li>\n<li>text heavy documents\u2014marketing, history, novels, non-fiction<\/li>\n<li>photo-heavy documents\u2014photo sites, travel, recipes<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Chapter 2 \u2022 Text and Photos<\/h2>\n<ul>\n<li>Types of web sites\n<ul>\n<li>fixed-width site\u2014looks like paper, book, magazine; easy to read (<span style=\"color: #ff0000\"><strong>Figure 2-1\u00a0<\/strong><\/span>)<\/li>\n<li>variable-width site\u2014expands to fill screen, dramatic (<span style=\"color: #ff0000\"><strong>Figure 2-2<\/strong><\/span>)<\/li>\n<\/ul>\n<\/li>\n<li>Types of eBooks\n<ul>\n<li>reflowable ePub (<span style=\"color: #ff0000\"><strong>Figure 2-3<\/strong><\/span>)\n<ul>\n<li>text reflows to adapt to screen size and orientation<\/li>\n<li>readers can select type style and size for legibility\/accessibility<\/li>\n<li>best for text-heavy documents<\/li>\n<li>photos and design effects (ornaments, drop-caps, sidebars, callouts) are a bonus<\/li>\n<li>photos are limited to page width but can be linked to be expandable<\/li>\n<\/ul>\n<\/li>\n<li>fixed-layout ePub (<span style=\"color: #ff0000\"><strong>Figure 2-4<\/strong><\/span>)\n<ul>\n<li>not reflowable, potentially less legible\/accessible<\/li>\n<li>best for eBooks where photos and layout are equally important<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Chapter 3 \u2022 Designing a Web Site<\/h2>\n<ul>\n<li>Fixed-width (<span style=\"color: #ff0000\"><strong>Figure 3-1<\/strong><span style=\"color: #000000\">)<\/span><\/span>\n<ul>\n<li>widths in pixels (px)<\/li>\n<li>accessibility\/responsive design: max-width<\/li>\n<\/ul>\n<\/li>\n<li>Variable width (<span style=\"color: #ff0000\"><strong>Figure 3-2<\/strong><\/span>)\n<ul>\n<li>widths in %, vw (viewport width), vh (viewport height)<\/li>\n<li>image as background<\/li>\n<\/ul>\n<\/li>\n<li>Design exercise\n<ul>\n<li>notes from Google Drive<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Chapter 4 \u2022 Designing an ePub<\/h2>\n<ul>\n<li>Reflowable (ePub-RFL) (<span style=\"color: #ff0000\"><strong>Figure 4-1<\/strong><\/span>)<\/li>\n<li>Fixed Layout (ePub-FXL) (<span style=\"color: #ff0000\"><strong>Figure 4-1<\/strong><\/span>)<\/li>\n<li>Design exercise\n<ul>\n<li>notes from Google Drive<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"author":6,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[47],"contributor":[],"license":[],"class_list":["post-5","chapter","type-chapter","status-publish","hentry","chapter-type-standard"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":6,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/5\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/5\/revisions\/31"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/5\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapter-type?post=5"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/contributor?post=5"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/license?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}