{"id":337,"date":"2016-02-11T12:13:39","date_gmt":"2016-02-11T17:13:39","guid":{"rendered":"https:\/\/jacob.steenhagen.us\/blog\/?p=337"},"modified":"2016-02-11T14:12:28","modified_gmt":"2016-02-11T19:12:28","slug":"live-demo-captive-portal-design","status":"publish","type":"post","link":"https:\/\/jacob.steenhagen.us\/blog\/2016\/02\/live-demo-captive-portal-design\/","title":{"rendered":"Live Demo of Captive Portal Design"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/jacob.steenhagen.us\/blog\/wp-content\/uploads\/2016\/02\/aruba-portal-ipad.png?resize=300%2C225&#038;ssl=1\" alt=\"Aruba Portal on an iPad\" width=\"300\" height=\"225\" style=\"float:left; margin-right: 20px; margin-bottom: 5px;\" data-recalc-dims=\"1\" \/>In <a href=\"https:\/\/jacob.steenhagen.us\/blog\/2016\/02\/simple-responsive-design-for-aruba-captive-portal\/\">my previous post<\/a>, I showed a very simple design for an Aruba captive portal that is usable on small handheld screens (like a cell phones) as well as full size browser windows. In this post, I had directly pasted the HTML code (with embedded CSS). This actually had a couple of drawbacks. First, WordPress didn&#8217;t really handle the code very well. Part of the reason I pasted it right in the post was to have the code stylized by <abbr title=\"Generic Syntax Highlighter\">GeSHi<\/abbr>. Unfortunately, GeSHi didn&#8217;t properly highlight the CSS. This also ended up making the post really long and there&#8217;s at least a few places where it mutilated the code. And second, embedding the code in a WordPress post also had the drawback that you couldn&#8217;t see how the page looked other than in my screenshots.<\/p>\n<p>So I&#8217;ve now uploaded the code as a normal webpage. You can <a onclick=\"window.open('https:\/\/jacob.steenhagen.us\/captive\/', '', 'resizable=yes,scrollbars=yes,width=480, height=500'); return false\" href=\"https:\/\/jacob.steenhagen.us\/captive\/\">view it in a window sized like a phone screen [<i>Pops up new window<\/i>]<\/a>. Once this window opens, you should be able to resize it in order to see how the page will look at different screen\/browser sizes. Or you could <a href=\"https:\/\/jacob.steenhagen.us\/captive\/\">view it in your current browser window<\/a> (if you&#8217;d like to download the HTML, you should be able to right-click the link to get an option from your browser to save the target).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous post, I showed a very simple design for an Aruba captive portal that is usable on small handheld screens (like a cell phones) as well as full size browser windows. In this post, I had directly pasted the HTML code (with embedded CSS). This actually had a couple of drawbacks. First, WordPress &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/jacob.steenhagen.us\/blog\/2016\/02\/live-demo-captive-portal-design\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Live Demo of Captive Portal Design&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[65,4],"tags":[42,67,66,53],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7EJi-5r","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/posts\/337"}],"collection":[{"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":3,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jacob.steenhagen.us\/blog\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}