Category Archives: Web Design

Web design related posted. CSS, xhtml

Making Windows 7 Search Useful

By default Winodows 7 does not Index a whole lot of files that one could actually find to be useful. It also does not search by the content of those files which makes searching not useful.

This is  a short tutorial to enable indexing and search of all your favorite filetypes and locations with all  your programming code.

First thing to do is ensure that the Windows 7 search service is running

Search for Service (Note: there is a old version of Windows Indexing service.. That is not it. That is for legacy support older windows.)

Next, ensure the Windows Search service starts automatically.


I am not sure what the performance impact of pumping up the indexes on Windows 7 has on non-ssd drives, but so far it actually seems to be running pretty great.

Example search from start menu “mysql_close(”

Search for “Indexing Options”

This is the initial area where you set the folders to monitor for indexing.

Next, select the file types under “Advanced”

For each of your favorite programming extensions select “Index Properties and Content”

Switching Default Folder Search Behavior

Open the start menu search for “Folder”

Select

  • Always search file names and contents

Folder search option

That’s it. After a couple of hours everything should be indexed.

Varnish Rules WordPress Multi-Site

Getting your wordpress site to load fast can be a jaunting task. I have been testing out Varnish Cache for the last 2 weeks and found it to pretty effective and pushing our resource forward.

WordPress is crazy CPU and database intense. I have been playing Varnish and have found that there are several key areas that I need to have working.

First one would be our affiliate module at our site. It sets a cookie every time ends up on our network or on a affiliate link.

First rule looks for our affiliate cookie. If it doesn’t exist it passes the connection directly to Nginx. If it does exist it simply remove the cookie. The content at that point is cached so when the user visits the site again the page does not have to be reloaded.

sub vcl_recv {
# This checks to see if the client has the affiliate cookie if not the page is not cached.
if (req.http.Cookie !~ “affiliate”) {
return(pipe);
}

#This one fixs uploading issues I had with larger files.
if (req.request == “POST” && req.http.Cookie ~ “wordpress_logged_in_” )
{
return(pass);
}

#Clipping

remove req.http.cookie;
return (lookup);
}

sub vcl_fetch {
if (req.url ~ “wp-(login|admin)”) {

return (pass);
}

## This line I found to be critical to stop the user getting someone elses cached cookies. 🙂

if (!(req.url ~ “wp-(login|admin)”)) {
unset beresp.http.set-cookie;
}
set beresp.ttl = 24h;
return (deliver);
}

Uploading Giant GB Files with PHP regardless of limits

Attached is a java app that with a php script that will allow you setup a upload interface for very large files. Basically the java applets splits the file into many peices and submits them to a php file handler. At the end of the batch the php file just assembles them back together. No memory limit. No file upload limit.

javaupload

Specify the upload folder in the split-chunk.php file.

//    specify upload directory – storage
//    for reconstructed uploaded files
$upload_dir = “/uploads/”;
//
//    specify stage directory – temporary storage
//    for uploaded partitions
$stage_dir = “/uploads/stage/”;

//    specify upload directory – storage     //    for reconstructed uploaded files    $upload_dir = “/uploads/”;
//    //    specify stage directory – temporary storage     //    for uploaded partitions    $stage_dir = “/uploads/stage/”;

From there set the upload applet paramaters in the upload_java.php file

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco}

<param name=”uc_uploadUrl” value=”split_chunk.php”/>

<param name=”uc_partitionLength” value=”1048576″/>

<param name=”uc_maxFiles” value=”1″/>

<param name=”uc_fileNamePattern” value=”(?i)^.+.(cvs|txt|csv)$”>

<param name=”gc_loggingLevel” value=”DEBUG”/>

<param name=”ac_fireUploaderStatusChanged” value=”true”/>

uc_partitionLength = the max size your php server can handle or less.

Theme Roller quick and easy jquery tab navigation

I thought I would pass it on to you guys. It involves the use of a javascript library called Jquery. The tool will let you build a theme for your site. This includes color layouts, toolbars, navigation elements, tool tips, etc.. http://jqueryui.com/themeroller/ Once you design the layout it will let you download your custom .css layout I have only had a little while to play with it.

But here is a link to a page with a navigation bar installed on it.

http://dev.contacker.com/dev_tabbed.html

The effect is the navigation bar that is loading its contents from other html pages when you click on the tab.

The elements creating this effect in the html is as follows.

Include in your header to include the stylesheet and jquery elements.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.corner.js"></script>
<script type="text/javascript" src="javascript/jquery.dimensions.js"></script>

Include in your header to activate the jquery tabs effect

<script type="text/javascript">
$(function() {
$("#tabs").tabs({ remote: true });
});

</script>

HTML code for the tabs

<div id="tabs">
<l>
<li><a href="content_elements/contact.html" title="contact"><span>contact</span></a></li>
<li><a href="content_elements/blog.html" title="blog"><span>blog</span></a></li>
<li><a href="content_elements/register.html" title="register"><span>register</span></a></li>
</ul>

</div>

Note when you actually click on the links above jquery loads the external page under the tab. This can allow you to build navigation menus that do not require the page to be load just the single element that is changing.

There is of course a ton of different ways to do the same thing but this one was pretty quick and hardly any code..

Why accessibility guidelines are important.

Following accessibility guidelines are important for a bunch of reasons. By following the guide lines you save yourself a bunch of time in debugging sites on various browsers and different medium types.  I have found this to be extremely crucial coming from experience in having to relay out an entire older website to confirm with new HTML and CSS standards it can be a very tedious / nightmare of a job. It seems like the majority of accessibility guidelines can be achieved by properly separating your HTML layout from your cascading style sheets.

I have not done too many sites that need to be accessible by blind people but adding title tags and summaries to tables seem simple enough. You just need to be mindful of your audience and your guidelines for the project. Separating your layout from your styles can save make your code easier to read and easier to update. Not to mention you can totally change the looks and feel of your site by simply enabling a alternate style sheet, this can save you a absolute ton of time. One media scenario I have spent some time on it the print ability of web pages. It seems like very few website can be printed out and the printout actually looks like what you have the screen, or even is understandable at all for that matter. Here is an example below I used for my portfolio page so that it can be printed and actually look decent.

Example Alternate Style sheet

Here is a example of including an alternate style sheet just for printing purposes.  By added the tag (media=”print”) when you attempt to print the page it will load the alternate style sheet. I do this to remove navigation and other items that take up too much real estate when you are printing.

HTML Source

<link rel="stylesheet" type="text/css" href="css/main_layout.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/main_layout_print.css" />

CSS Source

/* Normal Nav View */
div#nav {
float: right;
color: white;
margin-top: -.7em;
}
/* Print Nav View */
div#nav {
display: none;
float: right;
color: white;
margin-top: -.7em;
}

For this example the navigation bar on the printed version of the page will not be displayed allowing more room for your actual content to be printed.

to see the effect live you can check out
http://portfolio.totallyworthless.com/course_outcome/cis_215.htm