HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

Share tech news, updates, or what's on your mind.

Sign up to Post

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
9
LVL 14

Expert Comment

by:Brandon Lyon
Thanks for the info
0
LVL 40

Expert Comment

by:evilrix
Nice article!

I'm one of those poor souls who has to write cross-platform C++ code and the headaches involved in getting Unicode encoding working in a cross platform way is a nightmare. In general, we stick to UTF8 right up until we hit the system functions. On *nix platforms UTF8 works fine, on Windows one has to convert to UTF16. It's a bit of a pain, because there is a little inefficiency in doing this but it's normally not enough to cause concern.

What doesn't help is the fact Microsoft continuously refer to UTF16 as Unicode and anything else as ANSI. This has confused a lot of Windows programmers into thinking if it's a 16 bit data type it must be Unicode and if it's an 8 bit data type it's not. Ironically, Windows has no native support for UTF8 at the API level, even though it does have a UTF8 code page! I wish someone would welcome Microsoft into the 21st Century :)

UTF8 is really the only portable encoding format and for my money it's the encoding format I'd go for every time. Anyone interested in Unicode transformation and encoding, either because they are an engineer or they are a masochist, should also find the following resource really very useful and a nice compliment to this well written article.

http://utf8everywhere.org/

Thanks, Gonzo.
0
SASS
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
4
SASS
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
2
SASS
Styling your websites can become very complex.
Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
3
LVL 31

Author Comment

by:Alexandre Simões
Thanks Marco,
let me know if after reading the three articles you still feel that something is missing.
It will sure come as a nice subject for a sequel on this series.

Cheers!
Alex
0
LVL 32

Expert Comment

by:Marco Gasi
I f I'll have some idea I'll tell you for sure :-)
Cheers
Marco
0
We will take a look at the d3.js library for visualizations.  I will provide a walkthrough of a short bar graph example as well as introduce you to the d3.js API.  We also will explore links of other examples and further information regarding SVG's.
3
In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
2

Expert Comment

by:dwarak besant
Would you have any recommendations on how to make this add/edit blog entries instead of pages? I'm trying to just add blog functionality to a single page on a website without converting the entire site into a CMS.
0
Introduction
If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entries by using the typographical error.  This is somewhat annoying, and if you're paying attention, you can visually identify the error.  You can usually get past this issue by telling the browser to forget your recent history.  But have you ever begun typing your password or passphrase into an online form and thought, "Did I get that right?"  You can't visually check your work because the browser is showing you a form input field with something like this: ········· The browser is "helpfully" hiding the password from prying eyes by masking the input control field.

This article teaches three ways to allow your clients to show or hide the password fields as they type them into your forms.  In my experience, the default behavior that hides the password input is only marginally useful.  Most of the time nobody is looking over your shoulder and the real risk of lost passwords does not rest with the human client or the client browser, but with the servers where passwords are stored.  We can't change the server's security, but we can choose to make life easier for our (human) clients!

How HTML <input type="password"> Works
HTML defines several different input types for different kinds of input controls
5
This article shows how a content item can be identified directly or through translation of a navigation type. It then shows how this information can be used to create a menu for further navigation.
1

Introduction


Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).  

The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least complicated way as possible.

There are also other frameworks that essentially do the same thing in their own way. Find what works for you. React is what Facebook is built on and is very popular. AngularJS has also gained a lot of momentum and worth checking out.

Knockout takes a basic HTML structure and applies logic (written by you) to control the insertion and removal of HTML elements. This keeps the markup simple and straightforward, especially when it comes to repetitive content.

It's incredibly easy with Knockout to create dynamic interactive web pages with simplified markup. I've seen markup get out of control when creating content both from the server side (e.g. using PHP) or via the client side (e.g. using jQuery), making it virtually impossible to troubleshoot issues with layout and styling. 

I come across many questions in the web dev topic areas that are related to issues with the asker's website. Invariably this starts with them being told to fix their markup and validate it through the The World Wide Web Consortium's (W3C) Validation service.  When a site doesn't validate, it is not guaranteed to work on all …
1
LVL 3

Expert Comment

by:mmoore
Really interesting stuff! So many technologies so little time.
A couple of typos you may wish to correct. "It incredibly easy" "know no only".
0
LVL 44

Author Comment

by:Rob
Thanks @mmoore :)
0
Looking for a way to create responsive images using only HTML? No fear! The < picture >  element is coming! The good people over at the Responsive Images Community Group of W3C have been working hard to champion the adoption of the < picture > element. If you're into geeky web history, I'd check out this article about the process; it's pretty interesting. At one point there was even an Indiegogo campaign that raised over $15,000 to help get the element implemented!

In this article, I will go over some of the current fixes to the responsive images problem, how to use the < picture > element, and the current level of support for < picture > in major browsers.

 

Current Fixes


Currently there are a few (flawed) fixes for the responsive images problem. I'll quickly go over a few of the most popular solutions and discuss some of the issues the current solutions present.

1. max-width: 100%;
A favorite fix for responsive images is to set the max-width of an image to 100%. This way, images will always be the size of the container. If the container is set to a percentage width, it will scale responsively with the container. Most current web browsers support this fix, and make sure that the aspect ratio of the image is maintained.

This problem with this fix is that if you are designing for all size screens, …
2
Introduction and Prerequisites
This article describes methods for detecting whether a client browser accepts and returns HTTP cookies and whether the client browser runs JavaScript.  Most client browsers will, by default, be configured to use cookies and JavaScript, but some may not do that, and it may be important to your application design to be aware of these client-side factors as you build your web documents.  For example, most shopping carts rely on cookies to store a pointer to the contents of the cart.  If your client has cookies disabled, the shopping cart would not work.  Rather than simply fail, it would be a better design to be able to tell the client about the dependency.  Or you might have a gallery that used jQuery to provide an attractive client experience.  If you knew that JavaScript was disabled you would be able to adjust the gallery behavior. 

These concepts seems like common sense in application design, but the client/server relationship has a structure that hinders this common sense approach.  The order of request and response events is an important principle.  All communication is initiated by the client.  The client makes a request, the server-side scripts run, and the server-side scripts are complete before the response is sent to the browser.  As a result, any of the characteristics of the client browser that are not part of the request
1
What's really the simplest Content Management System? No CMS at all, a static homepage, isn't it? This only needs a little HTML knowledge and even that can be minimzed by using an HTML editor.

There are several pros: static HTML has no additional costs in preloading server side code or javascript frameworks, there also is no security risk, the vulnerability of a static HTML site is the FTP server of the host, and things like that. If you use HTML forms that introduces new risks, but that's a separate topic.

The big minus with static HTML pages is that you repeat a lot. each HTML file will need to have the navigation menu for the typical site layout with navigation and page details. So if you introduce a new nav menu item you have to change all the HTML pages you already have. Cumbersome, if not impossible for a large site.

In the past (the 1990s) we had (i)frames to load separate HTML files and put them in a frame layout. That enabled you to have a menu.html for all pages and a detail.html for the page details, the core page. But iframes pose a security risk, mainly that a whole site is loaded into an iframe. But that's also the topic of a separate article, so simply trust me iframes are a bad idea.

We have another simple way to combine content of separate files into a single html page to avoid repeating yourself: SSI

The simplest structure a general HTML page of this simplest CMS can be as follows:
<!--#include file="header.html" -->
<!--#include 

Open in new window

0
LVL 58

Expert Comment

by:Gary
So basically this article has nothing to do with a CMS at all and should be called Simple Routing in PHP but even then it's creating more work than just using the page.php name to start with
0
LVL 32

Author Comment

by:Olaf Doschke
Well, Gary. The first sentence of my article says.

What's really the simplest Content Management System? No CMS at all, a static homepage, isn't it?
That already explains the title and if you are disappointed about that, still continue to read and don't want to understand the technique, then finally state how you dislike this article, it's your personal right.

Now what do you expect to happen?

Bye, Olaf.
0

Introduction

A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer is "You can't." This is a restriction of the HTTP client / server protocol. The only time the server can send information to the client is in response to a request.  So it follows that we need a way for the client to request a progress report and a way for the server to send the progress report.  This article sets up the two parts of the application and builds them step-by-step so you can see exactly how this can be done.  We use jQuery and AJAX in a way that allows the client script to call the server-side script and to get back an indicator of progress.


The Visual Effect in the Browser

When we first load the client web page, we will have an area reserved for the progress bar.  As progress occurs (as indicated by the signal from the server) our progress bar will become visible and move across from left to right until the process is completed.  At the end, it will say "All Done" then it will fade from view and collapse out of the web page.  Here are screen-capture examples of the visual effects.  We used very bright colors for this example; your choice of size and color would be made with your design goals in mind.  These are settable via CSS.


Before the process starts:

jquery-progress-bar-1.pngAfter the progress bar appears:

jquery-progress-bar-2.pngAs the progress bar continues to show greater and greater progress:

jquery-progress-bar-3.pngWhen the progress indicator exceeds 99%:

jquery-progress-bar-4.pngAfter "All Done!" the progress bar fades out and disappears from the page:

jquery-progress-bar-5.png

The Server-Side Script

First we will build a simulation of the server side of the two-part application.  The server will sense the progress of our long-running job and will return a single value to the client - an integer, representing the percentage of completion.  In order to simulate the progress, we will use a simple counter which we will keep in the PHP session.  By storing the counter in the session, we can add to it on each request to the server-side script, creating the same effect we might see if the server-side script were taking an actual measurement of our progress toward a goal.  Have a look at line 15.  It's only there to simulate some kind of variation in the reported progress.  In real life, this "counting" scenario would be replaced by some programmatic method of determining the percentage of progress toward our goal.  The determination, however it is made, would be set into a positive integer of range 1-99 which is echo'ed to the browser output stream (and therefore returned to the client-side jQuery script that called our progress monitor).

<?php // demo/jquery_progress_bar_server.php
                                        error_reporting(E_ALL);
                                        
                                        // SESSION ALLOWS US TO HAVE STATIC VARIABLES
                                        session_start();
                                        
                                        // IF THIS IS THE FIRST STEP, SET THE PROGRESS BAR TO ZERO
                                        if (empty($_SESSION['progress']))
                                        {
                                            $_SESSION['progress'] = 0;
                                        }
                                        
                                        // INCREMENT THE PROGRESS COUNTER
                                        $advance = 10;
                                        $advance = rand(5,10);
                                        $_SESSION['progress'] += $advance;
                                        
                                        
                                        // IF THIS IS THE LAST STEP, ELIMINATE THE SESSION VARIABLE
                                        if ($_SESSION['progress'] > 99)
                                        {
                                            unset($_SESSION['progress']);
                                            session_write_close();
                                            die('100');
                                        }
                                        
                                        // RETURN THE PROGRESS
                                        echo $_SESSION['progress'];

The Client-Side Script

Once we have the server side of the application running, it's time to build the client side (the part that runs in the client's browser).  For this we use a conventional HTML5 web page.  These notes apply to the snippet below.


Line 8: This loads the latest "minified" jQuery framework.


Line 11-13: This starts the progress bar when the document.ready event fires.  In a real-world example, this might be started by a browser event, such as a mouse click.  But for our tests, it is nice to be able to refresh the browser and see the progress bar started immediately.  The script here tells the browser to run the loadProgressBar() function, and to address it to the div named #progressBar.  In theory it would be possible to have multiple progress bars on the page, but for this demonstration, one will do.  Note that for this example to work, the document.ready event handler is not required.  I only put it into the script as a placeholder since some other event might be the initial trigger for the progress bar.


Line 16: Sets the interval value to 1,000 milliseconds (one second).  Each time the interval timer expires, the script will call the server-side script for an update on the progress.  There is no hard-and-fast rule about a one-second interval; you can choose any values that makes sense for your needs.  You might want to experiment with faster or slower values.


Line 17: Sets the interval timer to call the function loadProgressBar() every time the intval expires.


Line 22: Defines the loadProgressBar() function.  The function takes one argument called "element."  This is the name of the outer wrapper div that encapsulates the progress bar.


Line 23: Every time loadProgressBar() is run, it calls the server-side script and retrieves an integer representing the percentage of completion of the background task.  This value is assigned to the JavaScript variable percent.


Line 24-28: If the percentage indicates that the progress is not yet complete, we recompute the width of the progress bar and animate the movement of the dark green background across the bar from left to right.


Line 29-36: When the percentage indicates that progress is complete, we are finished with the progress bar.  We take the following steps.

1. We remove the interval timer -- there is no need to call this function again.

2. We remove the background color from the progress bar.

3. We set the alignment to "center" and write "All Done!" in the middle of the progress bar

4. We use jQuery fade() and hide() functionality to cause the progress bar to act like the Cheshire Cat, disappearing from view.


Line 43-47: Our CSS defines the size and color of #progressBar div.


Line 49-57: Our CSS defines the div inside the #progressBar div.  It starts with a width of zero (which grows with each call to the loadProgressBar() function) and a background-color of dark green.  With this styling and the jQuery .animate() function, we can produce the visual effect of a progress bar that slides more-or-less smoothly across the screen.

 

5

Expert Comment

by:Danillo Leão Lopes
Very good!
0
HTML 5 has a lot of nifty features like simplified tags for character set, scripts & document type. Converting to HTML 5 will help users and search engines alike parse your website.

Many add-ons to websites like the Facebook Like  button reference attributes that are not valid unless you use HTML 5.

Converting to HTML 5 is relatively easy using Dreamweaver using File | Convert | Html 5. You will need to validate your code and get rid of obsolete attributes & keywords like audience, align, hspace, vspace, width, summary, bgcolor, and border. Most of these you can replace with CSS. I have listed some of the common CSS replacements below. You may want to customize as needed.

Best practice is to use an external CSS style sheet so you should put your CSS in a file like basic.css and include it in your meta-tags. The following is my meta-tag that I used.
<link type="text/css" rel="stylesheet" href="../../basic.css">

Open in new window


Note the path is
../../
since my CSS is actually 2 levels above the web page I am adding it to. If your CSS & web page are in the same folder, you won't need the relative file path descriptors.

Now that you have the CSS in an external file you can just reference them via class or id. I like class since I can reference them multiple times. id can only be referenced once per page.



Use Validator to check your code & replace the obsolete code with CSS. It takes some patience but you will be glad you are not using obsolete attributes & keywords on your website.

0

1. Why are you using mailto?

I was prompted to write this as I'm still seeing people using the mailto protocol in their web forms and I'm going to explain why it's not necessary and could be doing you and your business more harm than good.

2. Background on why mailto has been used

The "mailto" protocol started out being an easy way for the visitors of your site to get in contact via email with the click of a button, reducing the margin of error with copy and paste as the user's default email client would automatically open.  The "To:" field and optionally the "subject" and "body" fields could also be set so all the user needed to do was add any personal message and click send.  The "mailto" protocol then started to be used in forms for capturing data and the resulting email would have all the relevant fields populated as well as including an attachment with all the form data.  This "feature" has since stopped working in Outlook 2010.  Other email clients I've seen put the contents of the form as an URL encoded string in the body of the email.

3. What's going wrong?

So this is where I see the process failing, especially from a business point of view wanting to capture the data for a better understanding of their client base.  As a user, seeing this kind of information confuses me.  I see an attachment POSTDATA.ATT …
8
LVL 15

Administrative Comment

by:Eric AKA Netminder
tagit,

Two Page Editors have agreed that this article is worthy of EE-Approved.

Congratulations!

ericpete
Page Editor
0
LVL 44

Author Comment

by:Rob
Thanks ericpete! :)
0
Using Quotation Marks in PHP
This question seems to come up a lot for developers who are new to PHP.  And it got me thinking, "How can we explain the rules for quotation marks?"  For better or worse, PHP has so many rules!  This article tries to answer the questions.

First, some mandatory reading.  You need to understand the terms "variable" and "string" as they are used in the context of computer programming.  Take a moment to read these pages.  If it doesn't all "click" at first, don't be too concerned.  We will show some examples and explanation below.
http://php.net/manual/en/language.variables.basics.php
http://php.net/manual/en/language.types.string.php
http://php.net/manual/en/language.operators.string.php

Quotation Marks Used With Strings
A string is nothing more than a few characters strung together.  The code snippet below has examples of perfectly valid strings.  The first string is the single capital letter "A" and it has a length of one character.  The second string is the empty string.  It has a length of zero.  You can probably figure out the lengths of the other two strings.
A

Alphabet Soup
@@@

Open in new window


If you want to assign these literal string values to PHP variables, you must put quotes around them in the assignment statement.  Both of these examples are acceptable.  Note that one uses single quotes and the other uses double quotes.

$x = 'Alphabet Soup';
$y = "Alphabet Soup";

Open in new window

8
Depending on what browser and what version you use, the dialog box will appear differently.  The message is still the same though: You're viewing a secure page (https://...) and a warning pops up that there is some insecure content mixed in, asking you what to do about it.  It happens on small sites, corporate sites, even banks, social networking and other very large sites that should have the technical know-how not to scare you like that.  (This can be especially scary when you get security messages from your bank's website!)

So what is it?  The security warning sounds like a hacker has modified the page and is trying to either infect your machine or intercept your data on the way to the website you're visiting.  While in some cases this actually may be true, most times it ends up being  just that there is some element of the secure page that is being retrieved from a non-secure method.  This doesn't necessarily mean dangerous, only not encrypted.  When you see this on somebody else's site, the safest bet is to view only the secure data first, and see what the result looks like.  The result can be anything from a missing image, javascript not working, or a very ugly page because the stylesheet didn't load.

If this error appears on your own site, which you know doesn't contain any malicious hacking code, what do you do about it? When a page is delivered over a secure connection (https) the browser expects everything on that page to come from the same …
2
LVL 2

Expert Comment

by:Robert Silver
Okay if the //serverxyz.com/myimage.jpg or  //serverxyz.com/xyz.js   works
what about a   <a href="//serverxyz.com/home.html">home page</a>  ????
0
LVL 10

Author Comment

by:WebDevEM
I don't have access to a secure server to test it with at the moment, but did some searching and found an article that says it does work (What's the Protocol?) although I suspect there would be few cases where that's necessary.  

If your link is to the same server (taking your example above literally) then you would just need to point to <a href="/home.html">home page</a> and skip the servername.  This would be the most common method, which would use the current protocol.

If you are indeed linking to an external server, and need to maintain the same protocol as your current page, then according to the article I referenced above, it should work as <a href="//someotherserver.com/home.html">home page</a>.

He does bring up some valid warnings in the article, as well... namely that some javascript libraries or content management systems may get confused by a URL without a protocol, and either add it back in or produce unpredictable results.  Also, IE7 and IE8 apparently will load 2 copies of a CSS file if you use this technique, which will not necessarily be harmful, but will increase load times slightly.
0
The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
3
LVL 37

Expert Comment

by:lherrou
An elegant solution, and I can think of other ways to use it as well.

I voted YES above :)
0
jQuery is a JavaScript library that greatly simplifies JavaScript programming.

AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a new page load.  An HTTP request occurs, but it occurs as a result of a JavaScript event, rather than an explicit page load or form submission.  As a result, the web page takes on an appearance much like a desktop application, with smooth transitions as data is added or removed from the viewport.  This is often referred to as the "Web 2.0" effect.

I found myself looking around for a jQuery/AJAX "Hello World" example (that simplest of scripts to prove that the essential moving parts are working correctly).  There are lots of partial examples in many different places all over the WWW, but nothing seemed complete and well-documented, so I decided to write my own.  Here is the result of that effort.

The Server-Side of the Exercise
To make my example, I decided the essential parts would be the ability to send some data to the server and get a response back, so the first part of the exercise is the server-side script that produces a response containing the data it received from the AJAX request.  AJAX provides a RESTful interface.  The data for the request is sent via GET or POST and the response from the server is sent in the form of browser output.  As a result, it is very easy to test the back-end script. …
19

Expert Comment

by:Nico2011
Thanks Ray - very helpful - hope you are well!
0
LVL 36

Expert Comment

by:Loganathan Natarajan
It is very helpful.
0
Protecting Your Images from Hotlinking
A recent question here at EE asked, "How can I watermark an image if it is 'hotlinked' from my server by another web site?"  This article shows how to store your images outside of the web root and serve the images via a PHP script.  The PHP script can use the session to detect whether the image has been requested by your web site or by another web site.  If the image has been requested by another web site, it can watermark the image.  Since the image is located outside of your web root, it has no URL and cannot be readily accessed over the internet.  The only method of access is through your PHP script.

Setting Up Our Test Scripts
Before we begin to write the anti-hotlinking script we want to set up a test environment so we can see if our script will successfully watermark the hotlinked images.  There need to be two tests - one from a foreign server and one from an authorized server.  Here is the test script when the image is pulled from the "foreign" server.  Note that the foreign server does not know the secret handshake!
 
<?php // FOREIGN/watermark_test_hotlink.php
error_reporting(E_ALL);

// ALWAYS START THE SESSION ON EVERY PAGE
session_start();

// THE FOREIGN SCRIPT DOES NOT KNOW THAT IT MUST DO THIS
// $_SESSION["noWaterMark"]   = array();
// $_SESSION["noWaterMark"][] = "r1.jpg";
// $_SESSION["noWaterMark"][] = "r2.jpg";

echo '<image 

Open in new window

10
LVL 87

Expert Comment

by:leakim971
Marvelous as usual!
0
LVL 111

Author Comment

by:Ray Paseur
@leakim971: Thank you.  The compliment means even more considering that you are the source!  Best always, ~Ray
0

Things That Drive Us Nuts

Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. An evil CAPTCHA imageInsanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is a far cry from a good user experience.


This article is about how to apply some sanity in the CAPTCHA process.  It does not have to cause eyestrain for your clients, and it will likely be nearly as secure as the agonizing and unreadable stuff that reCaptcha cranks out.  In the process of creating an image-based CAPTCHA test, we will learn something about PHP image manipulation.


Anti-Spam and Anti-'Bot Tools (Power to the People)

The term CAPTCHA is "sort of" an acronym.  It stands for Completely Automated Public Test (to tell) Computers and Humans Apart.  The theory is fairly simple.  Your server-side script gives the client a test that a human can pass easily but a computer cannot readily understand.  You can read more about the theory and implementations here, and in the Wikipedia.

http://en.wikipedia.org/wiki/CAPTCHA


Invisible CAPTCHA

A "honeypot" is a form element that should not be filled in when a human completes the form.  You can give a form input control a tempting name, like "email" and style the input with CSS to make it invisible on the browser.  If the form contains any data in the tempting input field, you can discard the request, since this would not have come from a human being.


 

<?php // RAY_honeypot.php
                                        error_reporting(E_ALL);
                                        
                                        // DEMONSTRATE A HONEYPOT CAPTCHA TEST
                                        
                                        // IF THE FORM HAS BEEN FILLED IN
                                        if (!empty($_POST))
                                        {
                                            // IF THE HONEYPOT HAS BEEN FILLED IN
                                            if (!empty($_POST['email'])) trigger_error("BE GONE, ATTACK BOT!", E_USER_ERROR);
                                        
                                            // PROCESS THE REST OF THE FORM DATA HERE
                                            var_dump($_POST);
                                        }
                                        
                                        // CREATE THE FORM
                                        $form = <<<EOD
                                        <style type="text/css">
                                        .honey {
                                            display:none;
                                        }
                                        </style>
                                        <form method="post">
                                        <input name="email" class="honey" />
                                        <input name="thing" />
                                        <input type="submit" />
                                        </form>
                                        EOD;
                                        
                                        echo $form;


Minimalist CAPTCHA

One step up from an invisible CAPTCHA might be a checkbox that says, "Check this box to prove you're a human."  Not very deep, but arguably effective in a limited way.  And there is this from the endearing "A Word a Day" site. A simple and effective CAPTCHA from WordSmith.orgAnother simple design pattern is a form field that has a value filled in.  The web page asks the human to clear the field before submitting the form. A simple and effective CAPTCHA testVisually Based CAPTCHA Test

To reduce the risk of automated registration, the Craftsy web site uses a simple visual CAPTCHA.  The client is asked what animal is shown.  Craftsy may find the 1:4 ratio of possibilities acceptable; statistically speaking, an attack 'bot could be right about the animal 25% of the time.  If Craftsy couples its CAPTCHA with some kind of email verification this is probably acceptable protection. Animal-based CAPTCHA imageAt a slightly higher level, when there is common knowledge in a community, you might ask the client to enter the name of, for example, the school mascot.  The server-side verification for these tests is very simple, usually only a single if() statement.


A CAPTCHA Test with Simple Arithmetic

You can copy this script, put it on your server and run it to see the effect.  The script chooses two numbers at random, then chooses among several possible arithmetic operations to produce a CAPTCHA test that writes out an English-language simple math problem.  The client experience in this structure is very similar to the CAPTCHA test on the comment feature of the PHP.net web site.  It is easy to implement and easy for the client to use, but for a 'bot to readily defeat it, there would be a lot of programming required.  The web site would use the getQuestion() method in the HTML form script, and would use the testAnswer() method in the action= script. Give it a try, and if it's good enough for your work, enjoy it.  And if you feel you need greater obscurity, read on below for the image-based CAPTCHA tests.

 

15
LVL 111

Author Comment

by:Ray Paseur
Found an interesting twist on the CAPTCHA problem:
http://areyouahuman.com/

Of course it suffers from the same risks of outsourcing noted above, "I could outsource to a low-wage country to have a group of people refresh your page for 2 days to gather a list of all the images you use."  The technique to defeat this animated test is slightly different from gathering a list of images, but the point of using people to defeat CAPTCHA begs the question, "If we want to avoid 'bots and allow humans, and we get humans, are we happy with the process and outcome?"
0
LVL 75

Expert Comment

by:Michel Plungjan
The new RECaptcha is available

https://www.google.com/recaptcha/intro/index.html
0
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple.

The most important thing to remember when implementing this is the order in which requests are processed and rendered on a web page. Server-side code is always processed first, a response is then sent down to the client and presented on the browser in this case. So the following code:

<%
    Response.write "<p>Hello World 1</p>"
%>
<p>Hello World 2</p>
<%
    Response.write "<p>Hello World 3</p>"
%>

Would indeed render as follows:

Hello World 1
Hello World 2
Hello World 3

The first thing to note is that the ASP code was processed first, and was then rendered as HTML. The same principles apply when attempting to hide/show a progress indicator for an iFrame.

Ok. Let's move on to an example. We have "parent.html" (will be referred to as the Parent Page) which is the page containing the iframe. And, we have "iframepage.html" (will be referred to as the Child Page) which is the page being loaded by the iframe. My proposed solution is to have your "Loading" div on the Parent, have it show by setting the style.display in the onload event of the body tag, or just simply show by default. And, at the very end of the Child page, you want to have some JavaScript which will hide this div. The reason you want the JavaScript at the end …
0
LVL 23

Author Comment

by:apresto
Thanks WaterStreet, and thanks for making those changes too :)
0

Showing your events from Google Calendar in Google Maps


Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thought it would be ideal to have google maps read my calendar.)

First off you need to get a public feed from Google Calendar

The Calendar Address is the public address for your calendar. With this address, others can subscribe to your public calendar, view your events via feed readers, and view a read-only version of your calendar directly in their browser.  Your calendar must be public in order for your friends to use your Calendar Address. To edit the amount of information available, click the Change sharing settings link. Your calendar must be public in order for others to use your Calendar Address. If you wish to keep your calendar private, it will only be accessible by those who have direct sharing privileges. You can change the amount of information available at your calendar's public address by clicking the Change sharing settings link in the Calendar Address section.

To obtain your calendar's address, please follow these steps:

In the calendar list on the left side of the page, click the down-arrow button next to the appropriate calendar, then select Calendar settings. In the Calendar Address section, click the XML or HTML button. A pop-up window with your calendar's public URL will appear.
Use …
3
Foreword (July, 2015)
Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing rate.  I expected that nascent trend would continue, and it has.  Everyone seems to recognize the trend.  Yet to my amazement, relatively few web sites serve their content in any language other than English.  Of course, why bother?  Isn't English the language of technology?

Well, yes, English is the language of technology, but this is not about technology; it's about human nature.  If you're in business to make money, a monoglot web site is a handicap and huge blind spot.  If you're wondering whether it's economically feasible to offer site translations, this Tech.Co article may help you make up your mind.  In its summary quote, we find this: "The good news is that the potential return on your investment is significant.  Studies suggest that for every $1 spent on localization you can expect to see a $25 return."

There aren't many places you can get ROI like that!  To learn how it's done, read on...

Introduction
This article describes the general design elements of a multilingual web site. The site will be very simple, but all the important parts of the design will be present. Here are two images that show what the site looks like.  By clicking on the flags at the bottom, our clients can change the languages. Two examples showing English and German
6
LVL 70

Expert Comment

by:Jason C. Levine
Very nice.
0
LVL 15

Expert Comment

by:Eric AKA Netminder
Ray_Paseur,

Congratulations; your article has been selected as EE-Approved.

ericpete
Page Editor
0
Do you want to insert HTML5 video into your site? This is the tutorial how to do so.

What are the main advantages of HTML5 video?

1) Have good compression, good image quality, and low decode processor use.
2) It is royalty-free
3) It is easier to understand than the old object tag and easy to customize
4) If the browser is not compatible with the video tag the user can still download the video to view it and also you can show a image if the video cannot be loaded
5) No need for specific codecs to be installed on the computer to see the video

--- HTML5 VIDEO TAGS

The following video tags are examples of code you will need to put in order to make it crossbrowswer compatible.

<video with="420" height="236" controls autobuffer autoplay >

<source src="whatver_file_name.mp4" type="video/mp4" />

<source src="whatver_file_name.webm" type="video/webm" />

<source src="whatver_file_name.ogv" type="video/ogg" />

</video>

Open in new window



autobuffer = Starts loading the content on the background for when the user clicks play theres no waiting

autoplay = Automaticllly plays the content without the user clicking play

controls = Shows the controls bar play, stop....

poster = display a frame of the video (as a .jpg, .png, whatever), in case the video doesn’t load for some reason. It can be a local image or elsewhere on the web

download = If the browser doesn’t know what to do with video tag, or if there is a display error, you can offer a download to the video instead

TIP:
0

HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.