Welcome to my blog :)

This is a site comprised of a personal collection of notes and information serving as a single reference place for examples, tips, codes, testing, instructions, workarounds and troubleshooting with a record of external links to help during web design or managing and maintaining mobile devices and PC. I'm not a novice nor an expert...just a LittleBitGeeky here on blogspot.com

Saturday, September 20, 2014

Web Design: Search Engine Optimization SEO


SEO-Search Engine Optimization for High Ranking
Methods and Important Development Factors to Optimize Website

It is known that users typically don't look past the 2nd page on search results, if not just the 1st page alone. Page one is the top 10 ranking sites and page two is the top 20 raking sites. The importance of correctly developing the right type of website is of great value in respect to your sites ability to move up the ranking ladder.  Structure of the layout design, accessibility and validity to web robots are key ingredients for a successful top ranked website.

Author: Karen Grady

Sources:
Google SEO Optimization Recommendations Guide
     Download PDF
Google Webmasters Guide
     -https://www.google.com/webmasters/tools/home?hl=en
     -Submit Website to use Webmaster Tools:
     -Submit Canonical Domain & Submit XML Sitemap for crawlers


Table of Contents: 
About Search Engine Ranking
Factors of Search Result Ranking
Outline of Individual Factors


About Search Engine Ranking: 


There is no guarantee that your site will automatically rank first for queries in Google, but with certain methods implemented into the web design itself (SEO-Search Engine Optimization) will allow the search engines (SE) to crawl, index and understand your content in the best way possible. Thus this will increase your chances of being at the top portion of the search result list. "Organic" search results are ones that occur "naturally". SEO in the web design affects only organic search results, not paid or "sponsored" results, so that's what I focus on.  Technical details are listed below in the SEO Area's of Concentration section.

Moreover, companies or sites that claim to guarantee high ranking typically employ deceptive tactics to fool the search engine bots, and if your domain (website name) is affiliated with such site, your site could be banned from the Google index permanently. One example is comment spammers, like when an advertisement for Viagra is added to the comment box with a link to that site. This can actually hurt your sites reputation, thus is the reason behind using image Captcha's when public comments are allowed or why most sites require users to sign up for an account in order to comment.

Factors of Search Result Ranking:


Listed in chronological development order, are the main factors that directly effect search engine ranking, which if done correctly will promote your website to a higher rank or inadvertently hurt your website if the web robots read the wrong type of data and/or is corrupted by external entities.

1) First and foremost, is optimizing the website design to specifically target search engines in order to validate your site to gain the proper reputation status for your site. Important design features are applying the correct data values to HTML [via tags like <title>, <meta descriptions> and <!DOCTYPE>], organizing and naming the file structure itself to produce "friendly" URL page addresses, site map  hierarchy order, accessibility from any device or user settings and correctly configuring the layout to making sure that mobile search engine robots recognize the site as valid and trustworthy.

2) Submitting the site (and specific siteMap.txt document) to each search engine initially lets the site presence be known, thus minimizing the initial wait time for search engines to "find" your site.

3) Actual site traffic,  the more hits the higher the value.

4) Links to and from the site, to/from other reputable websites promotes your own site's reputation.


Outline of Individual Factors:


1) HTML HEAD: TITLE AND DESCRIPTION META TAG 

<title> 
-The contents of the title tag will usually appear in the first line of the results, words appear in bold that match search sting.
-Use a short to the point title and apply a unique title to each page.
-Place in the head section of a HTML document.
<meta name="description=" content="....">
-Add one or two sentences or a short paragraph fully describing the page and apply a unique description to each individual page. This is the default display that's positioned below the title. Or alternatively, the display will return be a more relevant section of the page that more correctly matches the search sting query.
-Place in the head section of a HTML document.
Example of Both:<html>
<head>
<title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
              UNDERLINED SEARCH RESULT TITLE<meta name="description=" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events in">
              DISPLAYS UNDER THE TITLE</head>
<body>


2) HTML HEAD:  KEYWORDS
-DO NOT USE KEYWORDS ANY MORE!
-Google and Bing crawlers could deem your site as SPAM and be omitted from search results.


3) FILE STRUCTURE FOR URL PAGE ADDRESSES:  
-Allows web crawlers like Googlebot to index URL'S efficiently.
-Friendly Folder and File Names create user friendly URL's .
-Google suggests using hypens vs underscores.

File: The Site Map Inclusion Protocol = "sitemap.txt"
-https://support.google.com/webmasters/answer/183668?hl=en
-A special file created to submit your website and get your web pages indexed by search engines
-Build a sitemap in a standard XML file and submit to Google
XML Example:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
</url>
</urlset>
-or use 3rd party tools to generate the file. Here's a list https://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
-Break up a large sitemap into a set of smaller sitemaps to prevent server overload. A sitemap file has 50,000 URLs limit and 50 MB uncompressed size.
-Use a sitemap index file to list all your sitemaps and submit this single file to Google rather than submitting individual sitemaps.


File: The Robots Exclusion Protocol="/robots.txt"
-Meaning a "suggestion" for bots to Do Not Crawl this page
-Example: User-agent: * Disallow: / tells All Robots that it should not visit any pages on the site.
-Example: Disallow: /tmp/ or Disallow: /junk/ excludes all robots from only these parts of the server
-Use other methods to secure sensitive information as this robots.txt file is a public file.
-It is not to be used to try and hide information.
-Should be placed in the top-level directory of your web server so the URL is http://www.websitename.com/robots.txt.

4) URL ACCESSIBILITY STRUCTURE: 

*All pages have a min of one static access link
-Note that Dynamic generation of documents can result in small changes because of counters, timestamps, or advertisements.
*Test Spider Accessibility on the Site
-using Lynx Screen Browser.
-Web crawlers basically see what screen readers see.
-Ensures site will display without JavaScript or other coding.
*Canonical Domain Page Structure for Multiple URLs
-The preferred domain is the version that you want used for your site in the search results.
-Sets www or http:// as the preferred version for Search Engines to use, no matter what version is accessed.
-Sets one page as main from its IDENTICAL content twin
-i.e. text only or printer friendly versions.
-(does mobile sites apply?)
-Do not link to same page from root directory and from subdomain, i.e. "domain.com/page.htm" and "sub.domain.com/page.htm"
-Warning about using this wrong! Mainly use rel=canonical for dynamic urls, eCommerce with filtered lists, syndicated content like someone else using your content on their page, which they would all the rel link.
-<topHead link rel="canonical"> is merely a hint, not an actual redirect.
-Preferred method vs rel link is to set up a 301 redirect from dup pages to dominant page
*Mobile Searches: are a separate entity and must be submitted to SE Separately
-Submit its own sitemap to let its presence be known
-A mobile <!DOCTYPE> must be declared.

*Dual SiteMaps: One for user, One XML to submit to Google for Crawlers
-Note that a 3rd one needs to be created and submitted separately to Google if using a separate mobile site
*Mobile Sites: 2 different sites with 2 separate URL's
- /m/ for mobile added to URL address
-Means 2 sites to build, maintain, update and submit to search engines
-My New Responsive Website Design omits the need for separate mobile site.

*Single Site for all Devices: 1 site with 1 URL
MY NEW HTML5 + PURE CSS3 RESPONSIVE LIQUID LAYOUT w/ VERTICAL FLOW AND PURE CSS MULTI LEVEL RESPONSIVE DROPDOWN MENU
Using the new HTML5 with CSS3 media queries to build an automatic adjustable layout for all screen sizes and types of devices.
Pure CSS
-Means that the main functions of the website rely soley on CSS specifications.
-Website requires no JavaScript (or any other scrips) to function properly.
-The layout will stack, stretch and contract upon user font size alterations and screen zoom levels.
-The horizontal menu will drop down vertically on hover, keyboard, click or touch.
-Both the responsive layout and menu automatically conforms to all sizes of mobile devices.
Responsive
-Means it will adapt its size and content to fit any screen size (w/Mobile 1st Theory)
-Incorporating a responsive drop down navigation menu, for mobile specific menu
-No JavaScript. Instead use CSS3 Media Query
@media only screen and (min-width : 000px) {...the css...}
Liquid
-Means width will expand and grow upon any screen size change.
-Method: Using relative % and em unit of measure, VS absolute PX values
Vertical Flow
-Means all element groups have the same height and line up equally on the baseline
-Typography Method: Using the Golden Ratio 1.618 equations to calculate heights & widths
-Flow ratio results in a 16px default font with a 1.618em/26 unitless Line Height to use as the Magic Number Multiplier
Single URL Address
-Means no separate (m) mobile site, thus no Googlebot-Mobile SE web crawler
-WARNING: Googlebot may can recognize site as "Cloaked" if not configured correctly, which could cause SE to drop the site from search result completely. Relevant content MUST BE THE SAME thats served to both Googlebot and Googlebot-Mobile. Read in Google Webmasters SEO PDF Guide.
5) LINKING TO AND FROM OTHER WEBSITES:
The more other sites link to your site, the greater the visibility for crawlers in search results. Each website's reputation is passed to one another by any links to and from other each others websites.
Add link to your site to other reputable sites
-Submit or try to add your site to BBB, PhoneBooks, Chambers, Any Local Sites as well any national and global sites with related products or services.
-Maybe even social sites like blogs (esp Google Blogger I would think), facebook, G+, twitter etc. plus sharing would spread the links around globally
Other website links posted on your site: Works Both Ways
-Bad sites: like spammers who put a link on your site like in a public user comment will pass along their bad reputation to your site.
-Use Captcha's, add restrictions or other measures.
-apply to specific link:
<a href="http://www.shadyseo.com" rel="nofollow">Comment spammer</a>
-apply to all links on entire page
<meta name="robots" content="nofollow">
-Good Sites: pass along their good reputation
-Using individual photo hosting sites for images VS on the server itself would also apply more valid linking.
-Create a "LINK PAGE" and add any and websites that could be related in any way to your website, as well as information about the physical location area.

6) CONTENT: 
-Write information rich, quality content on home page vs Keyword List.
-Google may determine a list of keywords or cloaked page deceptive and ignore the site entirely.
-This may be keywords listed in html, as it refereed to text that users cannot see?

7) NAVIGATION:
-Besides user's ability to navigate through the sites pages, it also helps SE's know what is important. Although it doesn't return the navigational values, it still help the engine see the big picture of the sites structure and contents.
-See the Website Linking section above to add a new page or menu link


-Webmaster Guide states that 100% nav via dropmenu should be avoided. Hmmmm?
-My Opinion: I am assuming this is in regards to screen readers and devices that don't use or allow scripts. I would think my new responsive design would be OK since my responsive dropmenu doesn't rely on JavaScript to function, it is Pure CSS. The only issue would be people that HAS NOT updated browsers AND doesn't support the new media querries AND doesn't allow scripts.
-IMO adding alternative nav links would be a backup if the main drop down multi level menu may not be accessible. Alternative Methods could be a Breadcrumb Trail under header and/or a Site Map Page link in the Footer.






Thursday, September 4, 2014

Web Designer Resource List

Resource List 
For Web Designer


Table of Contents
* Main Web Design Elements
* Browser Support
* HTML5, CSS3, JS
* Styling Charts & Values

MAIN WEB DESIGN ELEMENTS

Desktop Program-HTML/CSS Editor: Notepad++
DreamWeaver Basic Alternative: Open Source. No Fee. No Trial. No Demo.
Developer Site: http://notepad-plus-plus.org/
cNet: http://download.cnet.com/Notepad/3000-2352_4-10327521.html
List of Best Editors

Desktop Program-Graphic Manipulation: Gimp2.8
PhotoShop Alternative: Open Source. No Fee. No Trial. No Demo.
Developer Site: http://www.gimp.org/
   -Plug In's
   -Help Documentation
   -User Manual Download
cNet: http://download.cnet.com/GIMP/3000-2192_4-10073935.html

HTML Markup Code Validator: W3C
http://validator.w3.org/

CSS Code Validator: W3C
http://jigsaw.w3.org/css-validator/

HTML WYSIWYG Editor: W3schools
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_style



BROWSER SUPPORT

CSS3 Browser Support Reference Chart
http://www.w3schools.com/cssref/css3_browsersupport.asp

Browser Type Usage Yearly Statistics and Trends Chart
http://www.w3schools.com/browsers/browsers_stats.asp



HTML, CSS, JS REFERENCE

HTML5 Reference
http://www.w3schools.com/html/html5_intro.asp
New Elements: http://www.w3schools.com/html/html5_new_elements.asp
New Page Semantics: http://www.w3schools.com/html/html5_semantic_elements.asp

CSS3 Reference
http://www.w3schools.com/cssref/

CSS3 Selectors Quick Chart 
(~ + > ::before,  first child, last of type hover target focus)
http://www.w3schools.com/cssref/css_selectors.asp

JavaScript Reference
Full Tutorial: http://www.w3schools.com/js/default.asp




STYLING CHARTS & VALUES

Color Names & HEX Value Chart
http://www.w3schools.com/cssref/css_colorsfull.asp

Standard Web Safe Fonts-Viewable Examples
http://cssfontstack.com/

Linked Web Fonts: 
Google Web Fonts-Viewable Expamples & Link Codes
https://www.google.com/fonts
-Google Fonts are powered by the Google Fonts API
-Choose from, list, add to your collection, choose size
-HTML code given:
<link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
-CSS code given:
font-family: 'Rock Salt', cursive;
Online Code Generator (prob HTML4?)
http://www.html.am/html-editors/online-html-editor.cfm


Domain Hosting & Name Registration


**********************************
Current Domain Parking Only:

My Domain Name: www.ozarkmountainsonline.com:
Who Is....http://who.is/whois/ozarkmountainsonline.com
History.....http://who.is/domain-history/ozarkmountainsonline.com
Registrar Info September 04, 2014
Name: TUCOWS DOMAINS INC.
Whois Server: whois.tucows.com
Referral URL: http://domainhelp.opensrs.net
Status: OK
Important Dates:
Registered On: October 31, 2005 (Hostica)
Updated On: October 31, 2011 (Cirtex)
Expires On: October 31, 2016

Name Servers:
ns7.cirtexhosting.com 108.165.20.118
ns8.cirtexhosting.com 50.22.172.19

Website
http://www.cirtexhosting.com/


Past domain parking & hosting

Hostica
http://www.hostica.com/
Registered On October 31, 2005
Updated On October 27, 2009
Expires On October 31, 2011
Name Servers:
ns1.hostica.com 208.43.98.100
ns2.hostica.com 50.23.212.113
ns3.hostica.com 67.228.114.233

****************************************

Top Hosting Companies: Consumer Rankings Top 10

1&1
https://www.1and1.com/web-hosting?linkId=hd.mainnav.hosting#top

Powerful Unlimited Space with the performance you need with the ability to expand as you grow.Hosting without limits. Affordable, reliable hosting without limits for endless potential. 

*Price: $0.99 mo
*Free domain for the life of your package…not just the first year
*Daily Backups Including Webspace Recovery in case you need it
*Daily Backups Including Webspace Recovery in case you need it
*Unlimited Webspace Endless space for your growing business
*Unlimited Websites One place for all your web projects
*Unlimited Bandwidth. RELIABLE Always on, Secure.
*Hundreds of AppsEasy and fast installations of open source apps and widgets, with security updates available
*Easy 1-Click Install, Intuitive Control Panel.

1&1 Unlimited Plan includes 1 domain or transfer or DNS point to new 1&1

Web Design: JavaScript

JavaScript
Explained


NOTE: TUTORIAL NOTES NOT COMPLETE

Source: 
http://www.w3schools.com/js/default.asp

Table of Contents:
* Highlights
* JS Functions
  -getElementById
  -document.write
* Script Tag
* Body or Head Placement
* External JS Files


HIGHLIGHTS

3 languages all web developers MUST learn:
1) HTML to define the content of web pages
2) CSS to specify the layout of web pages
3) JavaScript to program the behavior of web pages

HTML5 SCRIPT TYPE DEPRECIATED:
*Old examples may have type="text/javascript" in the <script> tag. This is no longer required. *JavaScript is the default scripting language in all modern browsers and in HTML5.

Body Placement for faster page load: 
*It is a good idea to place scripts at the bottom of the <body> element vs in the <head>.
*This improves page load, because HTML loading is not blocked by scripts loading.

External Scripts:
*External scripts cannot contain <script> tags.
*You can place an external script reference in <head> or <body> as you like.
*To use an external script, put the name of the script file in the source (src) attribute of the <script> tag:

No Print Functions:
*JavaScript does not have any print or output functions.
*In HTML, JavaScript can only be used to manipulate HTML elements.

JvaScript Functions & Events:
*Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button.
*JavaScript code inside a function, can be invoked later, when an event occurs.
*Invoke a function = Call upon a function (ask for the code in the function to be executed).


JavaScript Functions

JavaScript Can Change HTML Elements
-The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
-JavaScript can manipulate the DOM (change HTML contents).
-The method document.getElementById() is one of many methods in the HTML DOM.
-The following example changes the content (innerHTML) of an HTML element identified with id="demo":

document.getElementById("demo").innerHTML = "Hello JavaScript";

You can use JavaScript to:
-Change HTML elements
-Delete HTML elements
-Create new HTML elements
-Copy and clone HTML elements
-And much more ...

JavaScript Can Change HTML Attributes
-Change the value of the source attribute (src) of an HTML <image> element
-JavaScript Can Change HTML Styles (CSS)
document.getElementById("demo").style.fontSize = "25px";
-JavaScript Can Validate Data


Manipulating HTML Elements-getElementById
*To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
*The JavaScript statement (inside the <script> tag) is executed by the web browser:
-document.getElementById("demo") is JavaScript code for finding an HTML element using the id attribute.
-innerHTML = "Paragraph changed." is JavaScript code for changing an element's HTML content (innerHTML).
*Use the "id" attribute to identify the HTML element, and innerHTML to refer to the element content:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>
Writing to The HTML Document-document.write
*For testing purposes, you can use JavaScript to write directly to the HTML document.
*Warning: use document.write for testing only. If you execute it, on a loaded HTML document, all HTML elements will be overwritten.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(Date());
</script>
</body>
</html>
The <script> Tag

*To insert a JavaScript into an HTML page, use the <script> tag.
*The <script> and </script> tells where the JavaScript starts and ends.
*The lines between <script> and </script> contain the JavaScript code:
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
</script>

JavaScript in <head> or <body>

*You can place any number of scripts in an HTML document.
*Scripts can be placed in the <body> or in the <head> section of HTML, and/or in both.
*Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time.
*Sometimes you will see all JavaScript functions in the <head> section.
*Anyway, separating HTML and JavaScript, by putting all the code in one place, is always a good habit.

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body> 
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>


External JavaScripts

*Scripts can also be placed in external files.
*External scripts are practical when the same code is used in many different web pages.
*JavaScript files have the file extension .js.
*You can place an external script reference in <head> or <body> as you like.
*The script will behave as if it was located exactly where you put the reference in the HTML document.
*Note: External scripts cannot contain <script> tags.
*To use an external script, put the name of the script file in the source (src) attribute of the <script> tag:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

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

STOPPED AT JavaScript Syntax Tutorial

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

JAVASCRIPT HTML PLACEMENT - Forum Reading
If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go?

-Just before the closing </body> tag is emerging as the best practice barring a specific requirement for it to be elsewhere (which there can sometimes be). It's the recommendation of the YUI folks, for instance, but it's not just them.

What order do things happen in - the order they are in the page or does HTML all happen before (non-) JS is run?

-When a script tag is encountered, unless you use the defer or async attribute (and the browser supports them), all HTML parsing comes to a screeching halt and the script is downloaded and handed to the JavaScript interpreter. When the JavaScript interpreter finishes processing the script, the HTML parser can continue. It has to do this because the JavaScript can insert tokens into the HTML stream via document.write. This is also why you can load a script file and then load a second script file that relies on the first, and know that they'll get loaded in the right order. It's also why you can't access elements that are further down in the HTML stream from a script higher up in it unless you defer your code somehow (window.onload or the "DOM loaded" events many libraries support, such as jQuery's ready or Prototype's dom:loaded).

An upshot of this is that the typical practice of putting script tags in the head actually slows down the apparent load time of the page, unless those script tags need to be there for some reason. Hence the recommendation to put them just before the closing </body> tag.

There's a "gotcha" you have to watch for, though: If you have parts of the page that you want to respond to with JavaScript if the user has it enabled, loading your script at the very end leaves a brief but real race condition lying around: The user can interact with the page while your script is being downloaded. There are a variety of ways of handling that. My favorite is to detect whether JavaScript is enabled with inline script (not a separate file) in the head element and, if so, to put in a document-level handler for things where possible (you can do this with click events, for instance) which basically queues up or disables the click during that very brief period of time. That way, if JavaScript is enabled, you'll avoid the race condition, but if it isn't, any unobtrusive fallback you have in place will work.

Wednesday, September 3, 2014

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: &#107;&#97;&#121;&#97;&#107;&#99;&#104;&#105;&#99;&#52;&#51;&#50;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;

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>

Tuesday, September 2, 2014

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>

Monday, September 1, 2014

Web Design: Slicemaker Pure CSS Accordion Menu


<!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.

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