CrankBerry Blog » HTML http://www.crankberryblog.com Sharing ideas on web design, development and the internet economy Thu, 24 Nov 2011 19:37:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Why do I get "page includes resources which are not secure" http://www.crankberryblog.com/2011/why-do-i-get-page-includes-resources-which-are-not-secure http://www.crankberryblog.com/2011/why-do-i-get-page-includes-resources-which-are-not-secure#comments Thu, 03 Mar 2011 23:51:11 +0000 Jerry Low http://www.crankberryblog.com/?p=454 SSL, but when you go to test it you get "page includes resources which are not secure". This is annoying but you need to fix it.]]> You just built a site, and have implemented SSL, but when you go to test it you get "page includes resources which are not secure". This is annoying but you need to fix it.

You can choose to ignore it as for most browser this message is not obtrusive but for some this may generate constant popups that will bug the hell out of your users.

There is only one reason why this message shows up but maybe multiple elements that contributes to this. The reason why this message appears is that on the page you're trying to load through SSL you have links to elements that are not secured through the layer. The warning is letting the user know that although the page maybe secure some elements could put the user at risk. It is essential to have this message. Image you're on a payment website about to type in your credit card and "BAM" this message pops up. What if it is the credit card module that is not secure? Wouldn't you worry? Let's see some of the elements that causes this.

Your Own Content

Depending on the way you apply SSL to your user there maybe a leakage in the elements that are secure. You can use HTACCESS to force SSL on a folder by placing this in .htaccess within that folder:

# Turn On for This Folder
RewriteCond %{SERVER_PORT} 80
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

This is assuming you have the rewrite engine and everything enabled. If you have a single file within the directory put into SSL this might be trickier. Look at the page and the elements it links to. Although the page maybe forced into SSL the images, scripts and CSS may not be (don't worry about included PHP scripts they don't count for this). The method that could work is to force those directory into SSL as well. Now this code is not perfect but it has worked:

RewriteCond %{SERVER_PORT} ^443$
RewriteCond %{REQUEST_URI} ^/(image|css|javascripts)/?
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1/$2 [R,L]

Basically image, css and javascripts are locations (folders) where those files are located. Change these based on your files. Add more directories with | in between each name.

Analytics

If you use a third party analytics tracker you may have pasted some sort of code at the bottom of your page. Depending on who you use they may not support SSL. If that's the case you can code it into your file to exclude the script from running. Here's a PHP example:

<?php if (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] != "on") { ?>
        //Analytics Script
<?php } ?>

Advertisement and Third Party Codes

Just like the analytics code above, third party codes may not have an SSL option for you. If you use a third party code on your site such as advertisements, widgets and feeds you may have to turn it off with the same code as above:

<?php if (!isset($_SERVER['HTTPS']) || $_SERVER['HTTPS'] != "on") { ?>
        //Ads, Widgets and Feeds
<?php } ?>

The downside is that on these pages you can't use the third party codes. Depending on the page, you may not want to anyways. For example, if you were using analytics on a checkout page, you may just want to check your database for actual analytics rather than hits and bounce rates.

]]> http://www.crankberryblog.com/2011/why-do-i-get-page-includes-resources-which-are-not-secure/feed 6 The ultimate newb's guide to learning web development (Pt. 1: The Basic) http://www.crankberryblog.com/2010/the-ultimate-newbs-guide-to-learning-web-development-pt-1-the-basic http://www.crankberryblog.com/2010/the-ultimate-newbs-guide-to-learning-web-development-pt-1-the-basic#comments Fri, 24 Sep 2010 22:22:21 +0000 Jerry Low http://www.crankberryblog.com/?p=406 If you are just discovering the world of web development but know nothing about HTML code, css and mumble-jumble, here's a good place to start. In this article I will outline in general where to find resources and some good skills to pick up on to becoming a minor expert in the field.

To be honest, web development is all about practice and understanding, of course creativity as well (I'll get to this later). Here's a little scope about how I picked up on web development. I started making websites through FrontPage when I was 13, using only a bit of HTML and mainly the WYSIWYG (what you see is what you get) editor. It wasn't until I was 15 that I started developing with HTML and using CSS. When I was 18 I felt the need for more power in my websites which is when I picked up PHP and MySQL. About a year ago was finally when I started picking up on Javascript.

Basically, I learned everything through every resource except taking classes. I would search through the web, read books from the library or just pure trial and error. It wasn't insanely hard to gather all the information but the only times when I really learn was through projects and experiments. Web development is definitely a hands-on type of thing. Point is, if you want to learn web development you'll have to spend 30% reading and 70% doing.

The Program/Software

Web development can be accomplished through a few languages and most of them don't require any special software to write. The basic notepad that came with your Windows is capable of completing the task. I prefer to use a software that color codes coding to mitigate headaches. Here's a list of software that you could choose from.

I personally use Dreamweaver on my computer as I have been using it since I was young so I have a nostalgic feeling to it. When I'm on the go I have notepad++ on my USB.

Learning HTML

Before you learn anything else, you have to be really good at HTML (hyper text markup language). The basic of websites all boils down to this language. HTML is the markup language containing markup tags that creates the webpage document. Every website requires HTML to make it work, yes even Flash websites.

Your basic website is wrapped in an opening and closing HTML tag. Opening tags are surrounded by arrow brackets while closing tags are the same but there's a front slash immediately after the first arrow bracket like such

<html></html>

Within the HTML tags there will be a HEAD and BODY tag. The head tags will describe items related to the website but will not be produced in the content. Items such as site title, meta tags, CSS, and Javascripts can be defined in the HEAD tag. The BODY tag will describe content that will be outputted to the user. A code like this:

<html>
<head>
        <title>Test Page</title>
</head>

<body>
        Hello world!
</body>
</html>

Will output "Hello world!" on the browser with the title Test Page in the browser title bar. Once you get this down you're ready to start building the website. The goal following this is to output the content you wish to show, it could be paragraphed text, images or tables. Everything you wished to use requires a markup tag to make it work. It'll be redundant for me to give you a tutorial on all the tags but here are two resources that are great.

w3school is great, as they are short writeups but concise so you can digest all of the content quickly. HTML.net is more detailed and a great read too but they incorporate a bit of CSS so its better to read it after w3school to cross-reference some of the ideas and undestanding. Once you've got this down you're ready for some CSS.

Learning CSS

CSS (Cascading Style Sheet) is a language that focuses on the style and layout of your markup language. Its a common standard now generate the accurate aesthetic results of many websites. There are a few ways to include CSS in your website.

//Link to a CSS file – Goes in the <head></head> tag
<link href="css/styles.css" rel="stylesheet" type="text/css" />

//Have the CSS in the <head></head> tag
<style type="text/css">
        .css { font-weight: bold; }
</style>

//Inline with content markup tags – in <body></body> tag
<p style="font-size: 22px;">this is a paragraph</p>
 

Once you have your website linked with some CSS you can start controlling your website. Here are some example of CSS controlling a webpage.

//All paragraph content will be bold and have a line height of 22 pixels
p { font-weight: bold; line-height: 22px; }

//The following code will modify all markup tags with the class "change" to have a background color of black
.change { background: #000; }

//The following code will modify the element with ID "element_1" to have a background color of white
#element_1 { background: #FFF; }

Here are the resources to read to learn all about CSS.

Again its good to go over the basics with w3school first then head to HTML.net.

At this point you should practice making a few websites with HTML and CSS. Try to envision something and then build it. The best practice is to try to design something in Photoshop then try to build a web site from it. As I always tell developers, just design it and I'll make it into a template, because I don't believe there's many design limitations that can't be built with HTML and CSS. By doing this exercise it'll help you learn different methods of building different elements.

Notes and Reminders

There are some things you should keep in mind when building with HTML and CSS though.

Using tables for design

This is a no and not recommended. A lot of people argue over this topic. Some believe that tables are good for design because its easier to control and it holds the shape of the original design better. The problem is tables are clunky, heavy in coding and not very flexible. Tables have specific standards to them so if you have two rows and two columns, the columns have to be equal width while rows have to be equal height. In order to work around that you'll have to nest your tables, imagine dealing with that. Its also less flexible for future expansions. You should use a table for tabular data though. Extreme non-table believers will argue that you don't, they can produce the same effect with other elements. They sure can but when it comes down to the user extracting your data (copying to word or excel), copying for a table is much easier than anything else. It just makes sense.

Avoid absolute positioning of everything

Many developers when they start will notice the amount of control with absolute positioning. It is not until their design gets more complicated that it all falls apart. Absolute position provides more flexibility but will sometimes diminish your control, use wisely.

Test in multiple browsers

There are various browsers on the web. It sometimes depends on who your website caters to but mind as well cover the major users. Test on desktop machines with Internet Explorer 6, 7, 8, 9, Chrome, Firefox, Safari. On mobile devices with Android, Opera Mini, iOS. Just make sure everything's consistent. This is a good chance to test how good your skills are too.

]]> http://www.crankberryblog.com/2010/the-ultimate-newbs-guide-to-learning-web-development-pt-1-the-basic/feed 0 In page popup with faded background – in PHP http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php#comments Tue, 20 Oct 2009 23:12:52 +0000 Jerry Low http://www.crankberryblog.com/?p=232 Sometimes you may be required to have popup windows on your website. They're obtrusive and hard to style with your site, in summary – nasty. What I've seen is other websites fade out their background and have an in page popup. I came up with a script that does the same thing in PHP.

Now the code involves multiple parts so bare with me here. Either way your end product will look like the image below.

Lets start with the CSS here. Just copy and paste this into your CSS file or HTML.

<style type="text/css">
        html {
                height: 100%;
        }
       
        .fade_container {
                width: 100%;
                height: 100%;
                min-height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100000;
                overflow: hidden;
        }
       
        .fade {
                width: 100%;
                height: 100%;
                min-height: 100%;
                background: #000;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 110000;
                overflow: hidden;
        }
       
        .popup {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 10px;
                padding: 4px;
                position: absolute;
                left: 50%;
                top: 100px;
                z-index: 150000;       
        }
       
        .popup_close {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 9px;
                padding: 2px;
                margin-bottom: 5px;
                background: #CCC;
                text-align: right;
        }
       
        .popup_close a:link, .popup_close a:visited, .popup_close a:hover, .popup_close a:active {
                color: #333;   
                text-decoration: none;
        }
</style>

There's really no need to edit anything unless you want to change the font and stuff, the colors will be modified later. The next part you have to add this code right after your <body> tag.

<?php

//In Page Popup Box with Faded Background by Jerry Low @crankberryblog.com
//Find other useful scripts at the Crankberry Blog

//SETTINGS
$fade_amount = 60;                              //In Percentage
$box_width = 400;
$box_background = 'FFFFFF';             //Hex Color
$box_border_width = 1;
$box_border_color = '999999';   //Hex Color
$close_box = 1;                 //Do You Want The Close Bar on Top 1 = Yes, 0 = No
$extension = "";                // Other Variables that maybe needed, page number etc.

//Begin Popup Box
$left_margin = 0 – ($box_width/2);
$page_url = basename($_SERVER['PHP_SELF']);
if ($extension!="") $page_url .= '?' . $extension;

if (isset($_GET['popup'])) {
        echo '<div class="popup" style="width:'.$box_width.'px; background: #'.$box_background.';  margin-left:'.$left_margin.'px;';
        if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';';
        echo '">';
       
        //Close Box
        if ($close_box===1) echo '<div class="popup_close"><a href="'.$page_url.'">Close (x)</a></div>';
       
        ?>
        <!– START YOUR POPUP CONTENT HERE –>
       
    Popup content goes in here!
       
        <!– END OF YOUR POPUP CONTENT HERE –>
        <?php
       
        echo '</div>
    <div class="fade" onclick="location.replace(\''.$page_url.'\');" style="opacity: 0.'.$fade_amount.';  -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div>
    <div class="fade_container">';

}

?>

Looking at the top part of what you just added, the setting are at the top. Just configure it to what ever you like.

The Content

The content of your popup box goes in between the HTML comment tag in the code above. Exactly where I wrote: Popup content goes in here!

<!– START YOUR POPUP CONTENT HERE –>
       
Popup content goes in here!
       
<!– END OF YOUR POPUP CONTENT HERE –>
 

Next you need the trigger to activate the popup. Something like this:

<a href="?popup=1<?php if ($extension!=") echo '&' . $extension; ?>">Activated Box</a>

To finish off the code you will need to add a </div> tag just before the </body> closing tag. Like so:

</div></body>

That's it and all you need to have your own in page with faded background popup window. Wasn't that just simple?

Advance Configuration

Now if your pages require other variables to be passed through the URL I noticed that the popup will intrude on that. So I have an extension variable where you can attach other variables to and they will be kept. The variable is in the setting part of the code. Example of attaching some variables.

$extension = "";                // Other Variables that maybe needed, page number etc.
$extension = 'p=3&sort=2&id=214423';
 
]]> http://www.crankberryblog.com/2009/in-page-popup-with-faded-background-in-php/feed 4