Web Design: Server Side Scripts

Server Side Scripts

PHP, JavaScript, Pearl, ASP and TLS/SSL

Server Side Scripts and Secured Layers - Explained: 
Descriptions copied from : http://en.wikipedia.org/wiki/Server-side_scripting

Server-side scripting is a technique used in website design which involves embedding scripts in an HTML source code which results in a user's (client's) request to the server website being handled by a script running on the server-side before the server responds to the client's request. Scripts can be written in any of a number of server-side scripting languages that are available

Server-side scripting differs from client-side scripting where embedded scripts, such as JavaScript, are run client-side in a web browser. Server-side scripting is usually used to provide an interface for the client and to limit client access to proprietary databases or other data sources. Server-side scripting also enables the website owner to reduce user access to the source code of server-side scripts which may be proprietary and valuable in itself. The down-side to the use of server-side scripting is that the server website computer needs to provide most of the computing resources before sending a page to the client computer for display via its web browser.

When the server serves data in a commonly used manner, for example according to the HTTP or FTP protocols, users may have their choice of a number of client programs (most modern web browsers can request and receive data using both of those protocols). In the case of more specialized applications, programmers may write their own server, client, and communications protocol, that can only be used with one another.

Programs that run on a user's local computer without ever sending or receiving data over a network are not considered clients, and so the operations of such programs would not be considered client-side operations.

In the earlier days of the web, server-side scripting was almost exclusively performed by using a combination of C programs, Perl scripts, and shell scripts using the Common Gateway Interface (CGI). Those scripts were executed by the operating system, and the results were served back by the web server. Many modern web servers can directly execute on-line scripting languages such as ASP and PHP either by the web server itself or via extension modules (e.g. mod_perl or mod_php) to the web server. For example, WebDNA includes its own embedded database system. Either form of scripting (i.e., CGI or direct execution) can be used to build up complex multi-page sites, but direct execution usually results in less overhead because of the lower number of calls to external interpreters.

Script Languages:
There are a number of server-side scripting languages available, including:

ASP (*.asp)
ActiveVFP (*.avfp)
ASP.NET (*.aspx)
C (*.c, *.csp) via CGI
ColdFusion Markup Language (*.cfm)
Groovy Server Pages (*.gsp)
Java (*.jsp) via JavaServer Pages
JavaScript using Server-side JavaScript (*.ssjs, *.js) (example: Node.js)
Lua (*.lp *.op *.lua)
Perl CGI (*.cgi, *.ipl, *.pl)
PHP (*.php)
R (*.rhtml) - (example: rApache)
Python (*.py) (examples: Pyramid, Flask, Django)
Ruby (*.rb, *.rbw) (example: Ruby on Rails)
SMX (*.smx)
Lasso (*.lasso)
Tcl (*.tcl)
WebDNA (*.dna,*.tpl)
Progress WebSpeed (*.r,*.w)

Secure Network Programming API: TLS/SSL
Transport Layer Security (TLS) and its predecessor, Secure Sockets Layer (SSL), are cryptographic protocols designed to provide communication security over the Internet. A prominent use of TLS is for securing World Wide Web traffic between the website and the browser carried by HTTP to form HTTPS. Notable applications are electronic commerce and asset management.

They use X.509 certificates and hence asymmetric cryptography to authenticate the counterparty with whom they are communicating, and to exchange a symmetric key. This session key is then used to encrypt data flowing between the parties. This allows for data/message confidentiality, and message authentication codes for message integrity and as a by-product, message authentication. Several versions of the protocols are in widespread use in applications such as web browsing, electronic mail, Internet faxing, instant messaging, and voice-over-IP (VoIP). An important property in this context is forward secrecy, so the short-term session key cannot be derived from the long-term asymmetric secret key.

Web Design: Email

All things involving website email

Table of Contents:
*mailto: Links
*Hiding email address
   -CAPTCHA
   -Browser Encoding
   -Javascript & Php
   -CSS Pseudo-Classes

mailto: Links

Regular mailto: links
Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

Hiding email address from spam bots

Either don’t put it on the web page or take the necessary precautions. 

Source:
http://www.labnol.org/internet/hide-email-address-web-pages/28364/
http://www.w3schools.com/php/php_secure_mail.asp

CAPTCHA
Google’s reCAPTCHA service. It hide your email address behind a CAPTCHA image that requires user interface.

Browser Encoded Address
You can also encode email addresses in the browser. The encoded html mailto: address shows up on the client side as actual email address and copies accordingly.

*online encoder: http://ctrlq.org/encode/
-Just type the email address you want to encode.
-Copy the code we provide.
-Paste the code where the address should be.

my encoded yahoo email: kayakchic432@yahoo.com

Insert html a:link:
<a href="mailto:&#107;&#97;&#121;&#97;&#107;&#99;&#104;&#105;&#99;&#52;&#51;&#50;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;
" target="_top">
Send Mail</a>


Hide Email through CSS pseudo-classes

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>


Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>


Javascript

Obfuscate Email through JavaScript using the ‘onclick’ event. You can create a regular mailto hyperlink for your email address but replace some of the characters – like the dot and the @ sign – with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.

<a href = "mailto:johnATgmailDOTcom"
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>Contact Me</a>


Random Array

Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.

<span id="email"></span>

<script>
  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
</script>


WordPress + PHP

If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes &#97; and the @ symbol becomes &#64;) though they will render correctly in the browser.

<?php echo antispambot("john@abc.com"); ?>


PHP Secure E-mails

PHP Stopping E-mail Injections: The best way to stop e-mail injections is to validate the input. The code below is the same as in the previous chapter, but now we have added an input validator that checks the "from" field in the form.  Code uses PHP filters to validate input:
-The FILTER_SANITIZE_EMAIL filter removes all illegal e-mail characters from a string
-The FILTER_VALIDATE_EMAIL filter validates value as an e-mail address

<html>
<body>
<?php
function spamcheck($field) {
  // Sanitize e-mail address
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);
  // Validate e-mail address
  if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
    return TRUE;
  } else {
    return FALSE;
  }
}
?>

<h2>Feedback Form</h2>
<?php
// display form if user has not clicked submit
if (!isset($_POST["submit"])) {
  ?>
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  From: <input type="text" name="from"><br>
  Subject: <input type="text" name="subject"><br>
  Message: <textarea rows="10" cols="40" name="message"></textarea><br>
  <input type="submit" name="submit" value="Submit Feedback">
  </form>
  <?php
} else {  // the user has submitted the form
  // Check if the "from" input field is filled out
  if (isset($_POST["from"])) {
    // Check if "from" email address is valid
    $mailcheck = spamcheck($_POST["from"]);
    if ($mailcheck==FALSE) {
      echo "Invalid input";
    } else {
      $from = $_POST["from"]; // sender
      $subject = $_POST["subject"];
      $message = $_POST["message"];
      // message lines should not exceed 70 characters (PHP rule), so wrap it
      $message = wordwrap($message, 70);
      // send mail
      mail("webmaster@example.com",$subject,$message,"From: $from\n");
      echo "Thank you for sending us feedback";
    }
  }
}
?>
</body>
</html>

Web Design: CSS Pseudo Classes (Links)

CSS2 Pseudo-Classes

CSS3 Pseudo-Elements

Source:
http://www.w3schools.com/css/css_pseudo_classes.asp
http://meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
http://css-tricks.com/almanac/selectors/f/focus/
http://www.labnol.org/internet/hide-email-address-web-pages/28364/

Key Information:
* CSS pseudo-classes are used to add special effects to some selectors.
* CSS 1-2 pseudo-classes used for <a> hyperlinks,
* but CSS 3 introduced pseudo-elements that can be used for plain text.
* a:hover MUST come after a:link and a:visited in the CSS definition.
* a:active MUST come after a:hover in the CSS definition.
* Pseudo-class names are not case-sensitive.
* For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
* Hide email through pseudo classes

The syntax of pseudo-classes:
selector:pseudo-class
     {property:value;}

CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class
     {property:value;}

CSS Heresy Order:
a {color: red;}
a:link {color: black;}...style links to unvisited pages
a:visited {color: white;}...style after the link has been viewed
a:hover {color: cyan;} ... mouseover effect
a:active {color: maroon;}...link becomes active onclick or while holding down
a:focus {border: 1px solid red;}....INPUT-after click or keyboard or tabbing or other
a:focus:active state...When button is clicked, it is in
a:focus:hover {color: lime;}... after click while hovering

Focus:
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes works.

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused"

More examples:
P.cl1:hover {background: yellow;}
TD:hover {background: silver;}
TD A:hover {color: red; background: yellow;}

The selector matches any <p> element that is the first child of any element:
p:first-child {color: blue;}

The selector matches the first <i> element in all <p> elements:
p > i:first-child {color: blue;}

The selector matches all <i> elements in <p> elements that are the first child of another element:
p:first-child i {color: blue;}

The ::after pseudo-element can be used to insert some content after the content of an element.The following example inserts an image after each <h1> element:
h1::after {content: url(smiley.gif);}

/* unvisited link */ a:link {color: #FF0000;}

/* visited link */ a:visited { color: #00FF00;}

/* mouse over link */ a:hover {color: #FF00FF;}

/* selected link */ a:active {color: #0000FF;}


List of Pseudo Class and Element:

Selector Example     Example description

:link           a:link            Selects all unvisited links
:visited  a:visited        Selects all visited links
:active  a:active         Selects the active link
:hover  a:hover         Selects links on mouse over
:focus  input:focus    Selects the input element which has focus
::first-letter  p::first-letter   Selects the first letter of every <p> element
::first-line  p::first-line     Selects the first line of every <p> element
:first-child  p:first-child    Selects all <p> elements thats the first child of parent
::before  p::before        Insert content before every <p> element
::after  p::after           Insert content after every <p> element
:lang(language) p:lang(it)  Selects all <p> elements with a lang attribute value starting with "it"


Hide Email through CSS pseudo-classes:

Hide mailto: email address from spam bots thats posted on your website.

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>

Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>

Other Choices for hiding email:

*Obfuscate Email through JavaScript

*Random Array

*WordPress + PHP

*CAPTCHA's

*Encode email addresses in the browser

*See separate EMAIL post for all information

Web Design: CSS Animated Hide/Show Transitions

<!--http://css3.bradshawenterprises.com/animating_height/-->
<!--CSS Transitions Animated Height from 0 (hidden) to auto (reveal)-->
<!--according menu sets the max height to target (onclick) vs on hover.....ul.VmainMenu li:target ul with max-height set at 100% for fluid auto adjusting submenus-->

This is some content that could be any length. In fact, click on it to edit it in place.

Hover over the grey box.

So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.
<!DOCTYPE html>
<html>
<head>
<style>
.outside_box {
width:200px;
height:200px;
background-color: grey;
margin:0 auto 1em;
}
.our_content {
color:white;
background-color:#444;
border-bottom:1px white solid;

max-height:0;
overflow:hidden;

-webkit-transition:max-height 0.8s;
-moz-transition:max-height 0.8s;
transition:max-height 0.8s;
}
.our_content p {
padding:10px;
}
.outside_box:hover .our_content {
max-height:200px;
}
</style>
<div class='outside_box'>
<div class="our_content">
<p contenteditable>This is some content that could be any length. In fact, click on it to edit it in place.</p>
</div>
</div>
<p class='center'><b>Hover over the grey box.</b></p>

<p>So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.</p>
<h2>Simplified CSS</h2>
<pre class="prettyprint lang-css">
.our_content {
/* Initially we don't want any height, and we want the contents to be hidden */
max-height: 0;
overflow: hidden;

/* Set our transitions up. */
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
.outside_box:hover .our_content {
/* On hover, set the max-height to something large. In this case there's an obvious limit. */
max-height: 200px;
}
</body>
</html>

Web Design: Slicemaker Pure CSS Accordion Menu

• Friends
  • Cute Kittens
  • Strange “Stuff”
  • Automatic Fails
• Videos
  • Cute Kittens
  • Strange “Stuff”
  • Automatic Fails
  • Strange “Stuff”
  • Cute Kittens
  • Strange “Stuff”
• Galleries
  • Automatic Fails
• Robots
  • Cute Kittens
  • Strange “Stuff”
  • Automatic Fails

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>An Creative CSS3 Vertical Menu Created by SliceMaker Soft</title>
<meta name="keywords" content="css3 vertical menu, creative css3 vertical menu, css3 vertical menu free download">
<meta name="description" content="This is a free CSS3 vertival menu created by SliceMaker Soft. You can free download this CSS3 vertical menu and then edit it for your own use.">

<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<style type="text/css">
body {
background-color: #666;
}
.demo {
width: 200px;
height: 400px;
margin: 40px auto 0;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu > li > a:before,
.menu > li > a:after {
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}
.menu > li:nth-child(1) > a:before{
content:"friend";
}
.menu > li:nth-child(2) > a:before{
content:"video";
}
.menu > li:nth-child(3) > a:before{
content:"paint";
}
.menu > li:nth-child(4) > a:before{
content:"android";
}
.menu > li > a:after{
content:"plus";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "minus";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}
@font-face {
    font-family: 'LigatureSymbols';
    src: url('font/LigatureSymbols-2.05.eot');
    src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
         url('font/LigatureSymbols-2.05.woff') format('woff'),
         url('font/LigatureSymbols-2.05.ttf') format('truetype'),
         url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>

------------------------------------------

<!--SPECIAL VISUALS TAKEN OUT OF ORIGINAL CODE-->

<!DOCTYPE HTML>
<html lang="en-US">
<head>

<style>

.demo {
width: 100%; /*200px*/
height: 100%; /*400px*/
/*margin: 40px auto 0;*/
        background-color: #666;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
        list-style-type: none; /*added to remove bullets*/
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu ul li {list-style-type: none; /*added to remove bullets*/}

.menu > li > a:before,
.menu > li > a:after {
font-family: arial;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}

.menu > li > a:after{
content:"+";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "-";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}

</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens</a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>
---------------------------------------------------

TV: Sony Vizio Smart TV Troubleshoot

Sony Vizio Smart HDTV

Troubleshooting

Screen Size: 32"
Screen Type: LED
Model #:  E322AR
Serial #:  LWJAMMCN4007335

-----------------------------

Netflix App:

Issue 1: 
Complete TV freeze up after Netflix failing to launch

Solution:
www.support.vizio.com via Live Chat technical support.

Perform a Power Cycle to reset TV

1) Turn off TV
2) Unplug TV
3) Press and hold power button for 30 seconds
4) Release button
5) Plug in TV
6) Turn on TV
7) Launch Netflix App to test
8) Problem solved!

Notes: 
*Chat record saved in hotmail.
*Tech Support pulled up Product Registration info, although model # and serial # required before starting assistance.

*Fast, easy chat support from Vizio that solved the issue in minutes

-----------------------------

Wi-Fi: 

HOW TO STREAM IPOD TO TV????  DLNA????

Note: Using original Moto Droid deactivated smartphone to as wi-fi app players and serves as a bluetooth dongle to the Sony Receiver on the Onkyo Home Stereo System.

Impossible to stream iPod via bluetooth to Android to home stereo receiver via RCA jack connection. (of freaking course!). It seems the only alternartive is to try and stream iPod via wifi to smartTV to home stereo receiver via HDMI.

-----------------------------

Internet Video Speed Requirements:

VIZIO recommends high-speed Internet service with speeds of 1.5mbps or higher.

-----------------------------

DNLA:

DNLA MUSIC PLAYBACK ISSUE:

Extremely Loud strange sounding beep, then goes to blank black screen when selecting a music file to play from the DLNA screen via PC Server w/Windows Media Player playlist. Sometimes the screen will freeze up instead, and stalls for a length of time to power off. No ability to exit the DNLA screen. Have not tried video via DNLA because audio won't work.

Troubleshooting research currently in progress 9-22-14.

Player: Using Windows Media Player
Server: Toshiba PC, Custom Build Laptop
Intel Quad Core i7 Processor
Windows 7 Professional 64 bit
7,200 RPM HDD
RAM, HDD Capacity & Graphics Accelerator
is more than adequate for streaming and transferring.
It was built for superior multi-tasking capability.


DLNA needs a server and a player. Windows PC media player can work but due to numerous issues occuring, most people are using 3rd party options. Quite a few are using Serviio for windows and mac.

User Comments on the Net.......

Vizio Stock DLNA: Firmware update aug 2014?
 have the Vizio 50 inch M series and after the latest firmware update a month ago, both my phones (S5, M8) don't find my Tv to stream music or videos. Idk wtf is going on but I'm upset. Lol

Vizio Stock DLNA: Hard Drive too big?
I bought a 32" version of that tv last night and am having the same problems. What did tech support tell you? I was told that my HD was too big. Have you tried a fat32 partition for dlna?

Serviio:
an application called serviio can use on windows and mac and plays just about everything accept for flv files has been working well so far with my tv and its fairly easy to setup may require some port forwarding on your router but it was only app i found that already had a profile for Vizio tv have tried Plex as well as Vuze like i stated in my previous post

ROKU:
I am sick of trying DNLA on my Vizio. Plex / UMC etc.. nothing worked..  I just bought a Roku and stuck it on..

VUZE:
i have a new m series and have figured out a way to stream to my vizio tv using vuze download install and Vizio tv shows up as NFLC Media Renderer files can be dragged and dropped then u will choose to trancode generic mpeg2 1080p make sure u choose one thats on right hand side b/c generic mpeg2 1080p h264 does not work

AppleTV:
They would tell me to reboot the TV or some stuff. I got sick of trying to deal with them and just moved on - the main feature I bought the TV for doesn't work! I bought a $99 AppleTV and plugged it in and it does the job now.

Web Design: Build Options for Multi-Screen Users

Web Design for Multi-Screen Size Users

Google Build Recommendations 

Source:
https://www.google.com/think/multiscreen/whitepaper-multiscreenconsumer.html

3 choices to make websites mobile friendly:
Responsive Design
Dynamic Serving
Separate Mobile Site

-------------------------
section in progress............
responsive
http://cssmenumaker.com/blog/responsive-menu-tutorial

Tap/Hover
An important thing to keep in mind is that mobile devices don't really have a proper "hover" state. This is a desktop only concept, which needs a different approach for mobile devices. This is only a concern if your menu has submenus, as that is generally when menu's make use of the hover states to continue expanding the navigation.

When thinking responsive, we need to make sure hover states can be easily convert into "taps".
This means that top-level menu items can not be links and contain a submenu at the same time
 (unless you give them some sort of specific dropdown button to go along with them.
This also means you'll want each menu item to be around at least 26-40 pixels tall, to be easy tap targets for a finger.

Orientation
For the most part, if you have a vertical menu, you're already set. Vertical menus are the standard format for most mobile devices, as the portrait mode lends itself to that style. In the case of a long, horizontal menu, what you'll end up doing is styling it so that at lower resolutions it basically converts into a vertical menu instead.

Wrapping
Usually, a long horizontal menu will want to remain as horizontal as possible until necessary. However, once you get into tablet portrait resolutions, that may become difficult. You'll have to decide whether you're okay with the menu wrapping its items, or alternatively, you can add a class to specific menu items that you don't mind simply hiding for mobile users.
--------------------------

My website template notes: 

My RWD Layout
*My fluid template I designed would be considered a Responsive Website Design.

*Apply fluid widths to my pure CSS dropdown nav menu.

-liquid menu wrapper where menu will collapse and stack down upon screen size reduction.
-subMenu and multi-level containers fixed widths should not exceed a mobile screen size-mainMenu links should be short, not to exceed a mobile screen size
-Work on using em's and % widths, in the excel formulation associated with my menu.
-maybe use em on font size, line height so text will shrink

*use min-width and max-width (think there is an IE fix for usage)?

     -and/or check into Media Screen CSS Query for mobile compatibility, exp for menu
     -@media screen and (max-width: 800px){img.bg {left: 50%; margin-left: -512px; }}

*Width Considerations: Large TV screen, Tablets, Smartphones and Screen Readers. (display:none will hide elements on screen readers, as well as any device)

RWD Highlights:

- Moderate complexity. Should be built from the ground up, using fluid grids that change with screen size.
-Sophisticated RWD sites with added programming require more time to build.
-Databloat is most common mistake.
-High on build time, but Low maintenance afterwards since updates flow to all devices.
-Costs are high at first, lower later. Heavy resources are needed for initial planning and ensuring optimal performance. But maintenance costs are typically low.
-Devices: Consistent user experience on all devices. (Some device-specific options can be added with server-side programs.)
-Sharing: Fully optimized. The single URL renders in optimal layout for each screen size.
-Expandable to new platforms. Defined break points and fluid grids allow for easy expansion to new platforms and devices.

Search Engine Optimization: Don’t block your website assets like CSS and JS files for both Googlebot and Googlebot-Mobile. 

Highlights for Fixed width website with Separate Mobile Site:

-Simple to moderate complexity. A stand-alone site can be developed fairly quickly. Small businesses will find many automated options that generate mobile sites nearly instantly.
-Moderate performance. While images and other website content can be optimized easily for smaller screens, site redirects often lead to latency issues.
-Moderate to high maintenance. Updates to a main site also must be done separately on this site.
-Low to moderate costs. Options range from low-cost SMB solutions (such as SAAS) with monthly fees, to developer hours for building a stand-alone site.
-Devices: Site can be optimized specifically for customers on the go.
-Sharing: Error-prone. Requires you to redirect every URL from your desktop site to the mobile site, and vice-versa.
-Not Expandable. This is a separate mobile site for smartphones only. New platforms are not easily integrated into the existing structure.

---------------------------

The following reference sheet is taken entirely from the Google website. Link provided at the top of the page. 

---------------------------

LAYOUT, CONTENT AND SPEED
Beyond basic setup and configuration, a great mobile user experience has three basic parts: layout, content &amp; speed.
The best way to engage and keep your users is to make sure all three legs of this tripod are sturdy.

1) Layout. Be touch-friendly.
For the human finger, 48 dp (density independent pixels) is the  minimum recommended touch target, with at least 8 dp between targets. Too-small targets, and the click mistakes that result, are a fast way to turn off a mobile user.

2) Pick the right font.
Your minimum font size should be 12 pixels; anything smaller and users will be squinting. Be sure to choose a typeface that is clean and easy to read. If possible, avoid use of image-based text.

3) Set the right width.
Most web users are used to scrolling vertically up and down a page, but being forced to scroll sideways makes for a bad user experience. Your users will think your site wasn’t built to help them on the smaller screen.

4) Avoid mouse-overs.
 On a desktop screen, the mouse-over is a great way to uncover hidden content. But mouseovers require a mouse. On touch screens like tablets or smartphones, users’ fingers can’t hover like a mouse. So avoid the mouse-overs. Instead, use buttons that users can tap to display deeper menus.

5) Don’t use pop-ups.
 They’re irritating on desktop sites, and they’re just as irritating on mobile sites. Also, instead of using interstitials to drive app downloads, embed the prompt into your site.

6) Do use descriptive buttons.
Don’t make customers guess where a click will take them. Label your buttons clearly, then use bread crumbs and clear category names (such as “Step 2: Payment”) to help them as they navigate.

7) Don’t overload users.
On mobile, more isn’t necessarily better. Avoid the urge to squeeze in every last bit of your desktop page, only smaller. But...

8) Customize, don’t cut.
Mobile and tablet users expect the same core functionality you offer desktop users, whether that means being able to watch videos or buy office supplies. Instead of cutting core content, restructure it to fit the mobile screen.

9) Don’t hide key actions.
Be sure to give users quick access to all the key functions they’ll expect on your site. If you’re a retailer, that means things like product search and the shopping cart (and mobile-friendly tools like a store locator) should be front and center. Include a link to your full site for mobile users who simply prefer that experience.

10) Double-check media files.
Flash video, for instance, won’t play on many mobile devices. Make sure that the media files on your multi-screen sites will really work on the screens they’re meant for.

11) Simplify checkout.
It’s hard to fill out lengthy forms on mobile, thumb-typing full addresses and other data over multiple steps. To increase your conversion rates, simplify the payment process however you can. Enable Google Wallet Instant Buy or other services that allow customers to check out quickly with payment and shipping details auto-generated from the cloud.

12) Speed.
There’s really one thing to say here: speed it up. Optimizing your site speed is a sure way to improve user experience — especially on mobile, where users are on the go and data networks can be slow. Speed typically boosts visitor engagement, retention and conversions. Not only is it a ranking signal for Google Search, but many businesses who invested in page speed improvements saw a positive effect directly on their bottom line. Here are three common mistakes to avoid

13) Too many HTTP requests.
While mobile users may try to do the same things as desktop users, their processing power is limited. Their bandwidth may be unreliable. To help them go faster, cut down the on-page elements that drive extra HTTP requests.

14) Image overload.
As smartphone displays get better, it’s tempting to serve the largest possible image and let the device downsize it to fit. Bad choice! This wastes time and processing power. Serve the right image sizes to each device.

15) File overload.
Consider if the JavaScript snippets and CSS styles are helpful for mobile users. Too much JavaScript or CSS may cause the page to slow down. Minify / compress your code where possible and consider reorganizing your CSS altogether. Make sure assets are being cached by the browser so that the visitors don’t have to re-fetch them on every page load.

*For more details, and for tools that can help you optimize your site’s performance, visit Google’s “Make the Web Faster” page here: www.developers.google.com/speed
------------------------

RESPONSIVE WEB DESIGN

Responsive web design (RWD for short) is a clever design technique that uses a single HTML code base for all platforms.

That is, all viewing devices read from the same code on the same URL. The content resizes itself to fit the screen being used, based on pre-defined breakpoints and fluid grids. RWD requires solid up-front planning. Costs can be high at first, but once the device-specific strategy is set, maintenance can be less resource-intensive.

Pros:
• One URL for all content. Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content. It’s also easier for search engines to discover and index your content.
• A streamlined user experience. Presentation of all content is customized, and device-specific features can still be used.
• Flexible orientation. RWD naturally allows for landscape or portrait device orientation changes by users.
• No redirects. Load time is reduced and performance increased.

Cons:
• Careful planning required. Since all HTML is shared here, careful planning is a must to develop a truly custom and robust experience with optimal performance for each device and user.

Common mistakes:
• Data bloat. Don’t let mobile users download full-size images meant for big screens and fast speeds. Try to reduce HTTP requests and minimize CSS and JavaScript. Load visible content first and defer everything else.

SEO Tip for Responsive Design:
For search engines to fully understand the responsive structure of your site and how content is presented for desktop and mobile we need full access to your CSS, JS and images files. Don’t block your website assets for both Googlebot and Googlebot-Mobile.

Basic Principle:
Whatever configuration you choose, as an underlying principle we strongly recommend that you serve all your sites from a single domain, like example.com

--------------------------

DYNAMIC SERVING

Example of a Dynamic Serving site is www.CNN.com

In this method, the web server detects the type of device a visitor is using, then presents a custom page designed just for that device. Custom pages can be designed for any device type, from mobile phones &amp; tablets to smart TVs.

Pros:
• A custom user experience. Each user gets content and layout created just for their device.
• Easier changes. Adjust content or layout for one screen size without having to touch other versions.
• Faster loading. Your team can streamline content for optimal load times on each device.
• Single URL. As with Responsive Design, Dynamic Serving keeps all your users on a single URL.

Cons:
• Content forking. Multiple custom pages mean multiple sets of the same content. Unless you have a sophisticated CMS in place, keeping content up-to-date on all device-specific pages can be challenging.

Common mistakes:
• Faulty device detection. Your servers will need to run scripts to recognize all available devices. If these scripts fall out of date, it can result in problems like the server sending a mobile-optimized site to tablet users. Another common mistake is that the server assumes a device orientation, most commonly portrait, but the user may be holding the device in a different orientation(ie landscape).
• Changing experiences. Users will be confused if you have multiple sites and they appear radically different. While it’s important to customize for each screen size, your brand look and feel should be recognizable in all formats.


------------------------

SEPARATE MOBILE SITE

A third option is to simply create a mobile site that’s separate from your original desktop site. Your system detects mobile visitors and redirects them to your mobile-optimized site (often using a sub-domain like m.yourname.com). Only mobile users will see the separate mobile site. Users of tablets, Web-enabled TVs or other devices will still see your original desktop site.

Cons:
• Multiple URLs. Sharing a web page requires careful redirects and integration between your mobile and non-mobile sites. Redirects also lead to longer page load times.
• Content forking. Keeping two different sets of content can make data management more complex.

Common mistakes:
• Faulty redirects. When a mobile user lands on a deep desktop page, make sure they aren’t redirected to your generic mobile homepage. Also important: avoid smartphone only errors, where a desktop URL redirects to a non-existent mobile URL.
• Missing annotations. The two-way (“bidirectional”) annotation helps Googlebot discover your content and helps
our algorithms understand the relationship between your desktop and mobile pages and treat them correctly.
• Inconsistent user experience. People who look at your smartphone site should recognize it as the same business
they see on your desktop site. This prevents confusion and a bad overall user experience.

----------------------------