De-mystifying full screen fluid designs with fixed width sidebars.


Layering of content has been available for years. Using CSS non default positioning it is possible to place a layer of content on top of another layer of content. The top left position for a absolute element would be the first parent that has its position set to absolute or relative. So a quick and simple method of creating a fixed sidebar would be to create a parent with a margin or border with its position set to relative and layer the absolute block into the left or right padding or margin space.

One aspect of absolute positioned content is that it does not create scroll bars when it is positioned off of the used area of the screen. An absolute positioned sidebar in a relative positioned parent only works if the parent will always be taller than the sidebar. In many situations that can easily be created. Relative positioned content works a bit differently in that is uses screen space but can be moved out of its screen space causing it to layer or overlay content next to it. Content can spill over the side of a relative positioned element on top of other content as well.

If one must design a page where the sidebar is the longest element than a wrapper can be used with a relative positioned block. Create a parent with padding for the sidebar. Float a wrapper block to the side with a width on 1 pixel, (note this 1 pixel element will become a 1 pixel border next to the padding declared. A relative positioned block can now be dropped into the wrapper with the width of the padding relocated on top of the padding. 

Another alternative to layer content is to adjust the left margin of the content. This method is most common because it does not require the use of a wrapper block.

With CSS3 fluid and fixed with elements become easier to work with. The width of an element can be set to 100%-300px leaving 300 pixels for material that can be placed on the side. Until it is implemented the secret mixing fluid with fixed with is layering of one sort or another.

 

<div style=”width:auto #default for most blocks;padding-left:150px;background:silver”>
<div style=”float:left;width:1px;height:auto”>
<div style=”position:relative;width:145px;left:-150px”>
This sidebar will activate the scrollbar
</div> <!– end sidebar –>
</div> <!– end sidebar wrapper –>
This is textbook layering but adjusted to take horizontal screen space.
<div style=”clear:left”> <!– this pulls down the background of the parent divide to the end of the sidebar divide –></div>
</div>

 

 

 

<div style=”width:auto;padding-left:150px;background:silver”>
<div style=”float:left;margin-left:-150px;width:145px;”>
This sidebar layers on top of the padding of the parent,
but does not use the CSS position property.
</div> <!– end sidebar –>
This is a layering method that does not use the CSS position. While it is rarely used
for layering it is the most common for sidebars.
<div style=”clear:left”> <!– this pulls down the background of the parent divide to the end of the sidebar divide –></div>
</div>

 

 

 

<div style=”width:auto;padding-left:150px;position:relative;”>
<div style=”position:absolute;top:0px;left:0px;width:145px;”>
This sidebar may fail to activate scroll bars, does not pull down parent backgrounds, can also
overlay on top of footers. Because it does not cause the parent element to expand.
</div> <!– end sidebar –>
This is textbook layering using position relative and absolute css, but it is problematic
if used to create sidebars. The secret of fluid designs
with fixed sidebars is a layering method of one form or another.

</div>

Advertisements

Using simpleXML instead of MySQL for applications that don’t use SQL


There is a large number of online applications which get data from the web and dynamically place it on a web page. One method to do this is PHP and MySQL but it is not the only method. Web developers should be able to offer more than one solution to a problem. For Dynamic web sites there are many methods and solutions all with pros and cons.

The advantages for MySQL is that one can search a large table of data. But for say client records themselves where the record is identified in the URL, there is no need to search and in fact searching would cost performance.  If these records contain a mix of data such as videos it is best that these records have a directory on the server instead of a record in a MySQL database. A simple CMS system for example does not benefit by calling a mySQL database to open the files on a server then search those files until it matches the record identified by the URL. Using the URL to directly identify the location of the record on the server reduces the work done by the server.

There are A few things PHP simplexml should have such as the ability to delete a node and to move a node from one XML file to another, just for starters. However, you can import SimpleXML files into dom and do all of the more complicated XML data manipulations … Here is an example code snipplet from a backend contact management program being developed. The number of records should not be more than one person can go through and respond to in a day. No sorting is required the records are maintained in FIFO, and the hope is that the leads become clients.

if ($makehot) {
foreach ($hotLeadsXML->request as $request) {
if( $request[‘id’] == $makehot) {

// get child + children to move.
$node = $request->asXML();
$nodeXML = simplexml_load_string($node);
$nodeDom = dom_import_simplexml($nodeXML);

// place the leads XML file with children.
$leadsDom = dom_import_simplexml($leadsXML);
$leadsDom->appendChild($leadsDom->ownerDocument->importNode($nodeDom, true));

// remove from the hot XML file
$dom=dom_import_simplexml($request);
$dom->parentNode->removeChild($dom);
}
}
$leadsXML->asXML(‘leads.xml’);
$hotLeadsXML->asXML(“hot.xml”);
}

So most XML based data sets programmed using simpleXML actually become a mix which still maintains the benefits of using XML data on a site.

MLK speeches, fair use and SOPA/PIPA … how SOPA Censors history.


As somebody who builds websites and web content for other people I’ve needed to educate myself on what is and what is not a copyright violation, or what is fair use and what is not. I’ve also worked with people who have created documentaries, so my statement that “SOPA” censors history is a bit of hyperbole … current copyright laws censor it. All of the interviews done by the company I worked for they hold the copyright. However, the problem is not limited to recent history. Many of the people who were interviewed are now dead, as is Martin Luther King. These interviews can not legally be used without expressed written permission.

Fair use is a topic I have always avoided posting about because what is fair use is what the judge says is fair use. You can check with attorney after attorney, the law is open very open to interruption by a judge on a case by case basis.  So much so that many films avoid having any product that is trade marked appear in their movies. A cease and desist order means the movie would need to be pulled have that part of the film changed.

However under current law the person who wants to claim fair use can present his case to the judge.  There must be a legal basis for a fair use defence, not merely that you wanted to use it. A defence can be to comment on the work, Criticism of the work, or parody. http://fairuse.stanford.edu/Copyright_and_Fair_Use_Overview/chapter9/index.html There is also a fair use for education.

I would ask an attorney, about the education usage of fair use, before attempting to use an interview in a new documentary under fair use, and because the only video or tape of the speech is copyrighted, (can not be recreated because person is dead). If you get an attorney to represent you then follow his direction.

What will change under SOPA/PIPA is you don’t get your day in court unless you take the person who filed a claim to court after your site was taken down. You don’t get re-compensated if the claim is completely bogus or if your usage is fair use.

 

SOPA/PIPA and MPAA DNS Hacking does not stop piracy.


How do you know that the website you are on is really the web site you believe you are on? If the DNS record were hacked or changed by a record from another source … SOPA/PIPA bills require the local IP to block or change these records. Then you would not be on the correct site. SSL connections and encryption depend on correct records. These are important issues because considerable amount of money transactions flow through the internet as well as private information.

DNS blocking or denial of service is not a technology built into the internet. In order for local IP to block a site which is hosted outside of the US they must hack the DNS record. This makes DNS hacking a none security threat, or main streams broken DNS records.

This policy is essentially putting MPAA interests above the interests of people who want to have DNS security to insure that they send their information to the correct destination. It effectively gives those who would violate copyrights and hack sites a new tool.

Does DNS blocking prevent piracy. No, all windows systems provide for a local on machine DNS lookup (via hosts file) so they can support an office intranet without needing any new software. The piracy sites can be accessed directly or by adding the DNS lookup to the local operating system.

DNS hacking fails to fix the problem of piracy and makes determining if you are really on the correct site more difficult.

SOPA/PIPA and due process …


Modern civilization believes in due process that is the person who is accused has the right to a defense before being punished as a guilty party. Copyright law is filled with grey lines; Sopa punishes web site owners who are now required to be judge and jury on if user submitted content is a copyright violation, and he may be punished even if a federal judge would agrees with him in court.

The majority of copyright issues are not as black and white as “he or she copied a song and made a music video and posted it on you tube.” Clearly a case of copyright violation, but if the video is not a music video but music was playing on a nearby radio then we start to get into the grey. One question that a court would look at under current law is does the newly created material, the video, cause the older created material harm? A music video playing the song could take sales away from the official music video, mp3, or CD. A few seconds of a song, in the background audio, of a video of a dog barking at the mail, does not cause the song to lose sales … in fact it could cause more people to get the whole song because they like it.

Under current law if somebody harms the value of a copyrighted product by copying it they pay a fee. In other words they become purchasers even if nobody else would of purchased the original product. A judge hears both parties side to determine if a copyright violation has taken place.

Under Sopa papers are filed by the copyright holder or enforcer, MPAA, to take down the site and to block it. These are fast tracked through the legal system with merely a judge approval the same as he would approve of a search warrant, but the results are that in all cases where the website owner is making money on his site – his income is shut off, even if he did not know because a user posted a humorous image of a super hero that could be mistaken as a Disney character.

Sopa/Pipa go to an extreme that will cause harm to jobs and innovation on the web. It is not a measured response. It is like beating a child with a stick because he was late, even when the facts say he did not know what time it was because the clock had stopped and he could not of determined what time it was.

Google announces major freshness update.


Freshness vs Evergreen Content

Google has announced (11/03/2011 08:19:00 AM) a major change to its freshness algo, which they say will effect 35% of search engine traffic. The freshness algo has been pointed out as a method of SEO in “SEO and Headline Chasing.”

Specifically Google says “Recent events or hot topics. For recent events or hot topics that begin trending on the web,” Will be what they are looking at to trigger a Query Deserves Freshness.

Mischief being reported with Google Places.


nytimes.com

In mid-August, Jason Rule learned some surprising news about the coffee shop that he owns and operates in Hays, Kan.: the place had closed for good.



Facebook and email forms.


Nothing prevents posting forms on facebook that call up a PHP application that sends the user request to the site owner. These forms are a good way to get leads.

Web 2.0 for facebook pages.


By using iframes on Facebook one can assemble information from multiple sources to present useful content to visitors. Such as in this case Border Wait Times

Morilla’s 6 month timeline for WEB API for portable apps.


Ipad, Iphone, Android, to drop a few names have changed the landscape on accessing the web. Crossing boundaries, if you will, from browser to applications. People want applications and people want to make applications for mobile devices. However like in the early days of web animation, video and audio across the internet; Standard foundations for programming these applications needs to be created.

Adobe air has a significant lead in a programming foundation that works across devices and operating systems. Another one coming will be WebAPI. http://hacks.mozilla.org/2011/08/introducing-webapi/