{"id":259,"date":"2014-09-24T19:37:16","date_gmt":"2014-09-24T19:37:16","guid":{"rendered":"http:\/\/art556.com\/?page_id=259"},"modified":"2014-09-24T19:37:16","modified_gmt":"2014-09-24T19:37:16","slug":"additional_information","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-2-multiple-page-sites\/additional_information\/","title":{"rendered":"additional information"},"content":{"rendered":"<h2 class=\"p1\"><b>favicon<\/b><\/h2>\n<ul>\n<li class=\"p2\">it\u2019s that tiny icon in the tab of the browser<\/li>\n<li class=\"p2\">To make it, create a 64x64px png image, then convert to .ico: search in your browser for &#8220;convert to ico&#8221;<\/li>\n<li class=\"p2\">add it with the following code in the head of your html:<span class=\"s1\">&lt;link rel=\u201dshortcut icon\u201d href=\u201d\/favicon.ico\u201d \/&gt;<\/span><\/li>\n<\/ul>\n<h2>typically, use one css file per site<\/h2>\n<ul>\n<li class=\"p2\"><strong>It&#8217;s easier<\/strong><br \/>\nMake a change once and it effects the whole website. If you want to change a font, a color, or a position, change it once in css and it can be reflected in the whole site.<\/li>\n<li class=\"p2\"><strong>One css file insures consistency from page to page<\/strong><br \/>\nAs we build a site, we brand with fonts, text formatting, colors, backgrounds, navigation, headers, footer and much more. 1) Consistency from page to page lets the user know that they have not left the site. 2) Consistent navigation\u00a0 with the same buttons in the same location makes navigating the site easier. 3) Consistent placement of elements is good design.<\/li>\n<li>a conventional name for your style sheet is &#8220;<strong>styles.css<\/strong>&#8220;.<\/li>\n<\/ul>\n<h2>index.html<\/h2>\n<ul>\n<li class=\"p1\">if a browser is directed to a folder, it will automatically go to the index.html file<\/li>\n<li class=\"p1\">your home page should be called <strong>index.html<\/strong><\/li>\n<\/ul>\n<h2 class=\"p1\"><b>pdf<\/b><\/h2>\n<ul>\n<li class=\"p2\">pdf = portable document format<\/li>\n<li class=\"p2\">with an InDesign file, if the user doesn\u2019t have your images or fonts, they won\u2019t display correctly<\/li>\n<li class=\"p2\">a pdf will embed the fonts and images so they view correctly<\/li>\n<li class=\"p2\">to save as a pdf in InDesign, go to<br \/>\nfile -&gt; Adobe PDF Presets\u00a0 and see options from &#8220;high quality print&#8221; to\u00a0\u00a0\u201csmallest file size\u201d<br \/>\n<em>for this class, \u201csmallest file size\u201d is appropriate<\/em><\/li>\n<\/ul>\n<h2 class=\"p1\"><b>converting fonts from pixels to ems<\/b><\/h2>\n<p>Most browsers, by default use 16px for &lt;p&gt;. We have been changing the size of &lt;p&gt; in our css:<br \/>\n<em>p {font-size: 14px;}<\/em><\/p>\n<p>We have also defined the size of H1, H2, etc.<br \/>\n<em>h1 {font-size: 42px;}<\/em><br \/>\n<em>h2 {font-size: 21px;}<\/em><\/p>\n<p>You could use ems to define the size of your fonts rather than px.<\/p>\n<p class=\"p10\">\u00a0if body\u00a0 \u00a0{\u00a0font-size: 14px; \u00a0}<\/p>\n<p><em>p {font-size: 1em;} .\u00a0 \u00a0&#8212;&#8212;&#8212;&#8211;&gt;14px<\/em><br \/>\n<em>h1 {font-size: 3m;}\u00a0 \u00a0\u00a0&#8212;&#8212;&#8212;&#8211;&gt;36px<\/em><br \/>\n<em>h2 {font-size: 1.5m;} .\u00a0\u00a0\u00a0&#8212;&#8212;&#8212;&#8211;&gt;21px<\/em><\/p>\n<p class=\"p3\">font-size: 16px; &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;&gt;font-size: 1 em;<br \/>\nline-height: 24px; &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;&gt;line-height: 1.5em;<\/p>\n<p>So why use ems?<br \/>\npixels give absolute control.<br \/>\nems are scalable.\u00a0 \u00a0If you set up your whole site with ems, and change the initial setting, everything else will change proportionately.<\/p>\n<h2 class=\"p1\"><b>fixed, flexible\u00a0<\/b><\/h2>\n<h4>fixed:<\/h4>\n<ul>\n<li>the site width is defined by px:\u00a0 \u00a0\u00a0<em>body (width: 1028px;)<\/em><\/li>\n<li>design is very easy to control, because the container is a set size<\/li>\n<\/ul>\n<h4>flexible:<\/h4>\n<ul>\n<li>the site width is defined by percentages:\u00a0 \u00a0\u00a0<em>body (width: 80%;)<\/em><\/li>\n<li>design is not as easy to control, because the container is going to adapt to the window size, potentially causing the contents to change size or position.<\/li>\n<li>margins and paddings can also be defined by percentages, causing elements to scale.<\/li>\n<\/ul>\n<p class=\"p1\">body {<br \/>\nwidth: 80%<br \/>\n}<\/p>\n<p class=\"p7\">section\u00a0{<br \/>\nwidth: 70%;<br \/>\nmargin-right: 5%;<br \/>\n}<\/p>\n<p class=\"p7\">aside {<br \/>\nfloat: left;<br \/>\nwidth: 25%;<br \/>\n}<\/p>\n<p class=\"p7\">So the section and aside combined =100%, filling the body.<\/p>\n<p class=\"p1\"><b>images by percentage<br \/>\n<\/b>The following css will set the image\u2019s width to 100% of the parent element.\u00a0height: auto will keep it in proportion.<\/p>\n<p class=\"p2\">img { max-width: 100%;<br \/>\nheight: auto:<br \/>\n}<\/p>\n<h2 class=\"p1\"><b>adaptive, responsive<\/b><\/h2>\n<p class=\"p1\"><b>adaptive:\u00a0<\/b><\/p>\n<ul>\n<li>You are designing for specific viewports.<\/li>\n<li>You have more control over design.<\/li>\n<li>Consider your users when deciding how many viewports you design for.<\/li>\n<li>Generally, there are three viewports to design for: mobile, tablet and desktop<\/li>\n<\/ul>\n<p class=\"p1\"><b>responsive:<\/b><\/p>\n<ul>\n<li>Instead of defining viewports, you manually resize your browser until the layout breaks. Then you create a media query for that breaking point.<\/li>\n<\/ul>\n<p class=\"p2\">** You can combine fixed, flexible, adaptive and responsive.<\/p>\n<h2 class=\"p1\"><\/h2>\n<h2 class=\"p1\"><b>media queries<\/b><\/h2>\n<p class=\"p2\">Media queries provide different sets of css for different devices based on width, color or resolution.<\/p>\n<p class=\"p2\"><b>The css can be in a separate, linked css file:<br \/>\n<\/b>&lt;link rel=\u201dstylesheet\u201d media=\u201d(max-width: 800px)\u201d href=\u201dexample.css\u201d \/&gt;<\/p>\n<p class=\"p2\"><b>or multiple sets of css can be in one file:<br \/>\n<\/b>\/* mobile styles*\/<br \/>\n@media only screen and (max-width: 480px)\u00a0 { }<\/p>\n<p class=\"p7\">\/* tablet styles*\/<br \/>\n@media only screen and (min-width: 481px) and (max-width:768px) { }<\/p>\n<p class=\"p7\">\/* desktop styles*\/<br \/>\n@media only screen and (min-width: 769px) { }<\/p>\n<h2><\/h2>\n<h2 class=\"p1\"><b>viewport<\/b><\/h2>\n<p class=\"p2\">Viewport is the open window. Setting a viewport tells the browser how content should fit on the device\u2019s screen.<\/p>\n<p class=\"p3\">Adding this content to the head section\u00a0<span style=\"line-height: 1.714285714; font-size: 1rem;\">of your page tells the browser to set the viewport to the width of the device with the initial-scale of 1.<\/span><\/p>\n<p class=\"p11\">&lt;meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u201d&gt;<\/p>\n<h2 class=\"p1\"><b>content\/design modifications<\/b><\/h2>\n<p class=\"p2\">As a site is scaled down from desktop to mobile, the following changes need to be considered:<br \/>\n<b>images:<\/b> Are they important enough to download on a mobile device?<br \/>\n<b>text:<\/b> Is the formatting set up\u00a0<span style=\"line-height: 1.714285714; font-size: 1rem;\">for desktop legible on mobile?\u00a0<\/span><span style=\"line-height: 1.714285714; font-size: 1rem;\">Does it need adjustments?<br \/>\n<\/span><b>design:<\/b> How will margins and vertical spacing change to get more in a smaller space?<br \/>\n<b>nav:<\/b> How will the mobile version accommodate touch navigation?<\/p>\n<h2 class=\"p1\"><b>exercise<\/b><\/h2>\n<ul>\n<li>Create mobile versions of your designs in InDesign. (pages-&gt;create alternate Layout-&gt;custom<\/li>\n<li>Save a backup copy of index.html. (Could be saved with a date as index1021.html)<\/li>\n<li>Working on index.html, create a media query.<\/li>\n<li>Add media query code.<\/li>\n<li>Copy css for a mobile set.<\/li>\n<li>Set the viewport for your page.<\/li>\n<li>Working on the mobile set of css:<br \/>\nconvert type pixels to ems,\u00a0convert divs, margins, padding, and images from pixels to percentages or ems,\u00a0and view on a mobile device adjusting as needed.<\/li>\n<\/ul>\n<h2>examples:<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><b>adaptive vs. responsive examples:<\/b><\/p>\n<p class=\"p2\"><a href=\"http:\/\/mediaqueri.es\/\">http:\/\/mediaqueri.es\/<\/a><br \/>\n<a href=\"http:\/\/muumilaakso.tampere.fi\/\">http:\/\/muumilaakso.tampere.fi\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>favicon it\u2019s that tiny icon in the tab of the browser To make it, create a 64x64px png image, then convert to .ico: search in your browser for &#8220;convert to ico&#8221; add it with the following code in the head of your html:&lt;link rel=\u201dshortcut icon\u201d href=\u201d\/favicon.ico\u201d \/&gt; typically, use one css file per site It&#8217;s [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":25,"menu_order":120,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-259","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/259\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}