Offline wordpress theme development - localhost map and virtualhostx

heres what worked today, and see older post for more links

to setup mamp etc
http://bitbob.com/mac-web-development-made-easy

how to install wordpress for localhost
note, I didnt use the 8888 mentioned, and just altered the settings slightly till they worked to bring up the mamp page for installing dbs
http://jayrobinson.org/2009/08/10/setting-up-your-mac-for-local-development-using-coda-wordpress-mamp/

Sidewinder theme - new sideways scroll theme from graphpaper press

new theme form graphpaper press

good for artist portfolio on the cheap.

also good because it incorportaes a blog template, apart from the gallery pages

and custom shortcodes, to make columns of text on content pages, so its really flexible...

i dont really like the thumbnails nav, id just make the scroll buttons bigger so people use them instead

Checklists for good HTML and efficient CSS

Efficient CSS

cascading reminder:
http://www.w3.org/TR/CSS21/propidx.html

Efficient CSS - for:
http://css-tricks.com/efficiently-rendering-css/

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942

Against:
http://clipperhouse.com/blog/post/Please-dont-write-efficient-CSS.aspx

GOOD HTML coding standards
http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png

http://faq.programmerworld.net/web_publishing/a-web-standards-checklist.html

http://www.peachpit.com/articles/article.aspx?p=24011&seqNum=3

Also:
Use widths and heights for images

Video for the web - 2011 updates - HTML 5 video etc

Quicktime Embed
-Nice easy export from the old Quciktime Pro 7 'Export for web' with iphone capable versions and a poster frame, and it makes some code for your site. Seems to work nice out of the box. Makes and m4v file...

Questions:
if iphone dosnt support flash, how come youtube works if that is flash video?? is it actually h.264 on the flash player, whcih iphone plays on quxiktime
http://www.apple.com/pr/library/2007/06/20youtube.html
To achieve higher video quality and longer battery life on mobile devices, YouTube has begun encoding their videos in the advanced H.264 format, and iPhone will be the first mobile device to use the H.264-encoded videos. Over 10,000 videos will be available on June 29, and YouTube will be adding more each week until their full catalog of videos is available in the H.264 format this fall.

ok so its not flv, its h.264... its flv on youtube desktop??

SKINS
A free QT skin that looks like JW player... free for non commercial use.
http://www.zenwebware.com/webware/zenqt-player/

HTML 5 Video!!!
http://en.wikipedia.org/wiki/HTML5_video
it dosnt seem ready

demos
http://www.html5video.org/demos/

!!! Definitive article on HTML5 and video formats for web 2011
http://diveintohtml5.org/video.html

Finally some instructions:

For maximum compatibility, here’s what your video workflow will look like:

1. Make one version that uses WebM (VP8 + Vorbis).

2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.

3. Make another version that uses Theora video and Vorbis audio in an Ogg container.

4. Link to all three video files from a single

Miro video encoder for all the latest formats:
http://www.mirovideoconverter.com/


go to the bottom of the above article for the full code to use for these formats, includes video tag and object tag for flash... yay!

Dummy images right size generator

makes those placeholder images
http://dummyimage.com/

TO do -write up a FAQ and make these assets for new web projects

COMPILE / WRITE FAQS AND ASSETS for new web projects, KNOWLEDGEBASE.
or collect online tutorials into an FAQ page instead of making ones from scratch

What size should I make it? 

show 960 x 600 page, and a grid. 

give a template/instrutions for setting up in photoshop and illustrator, in pixels... if they are a designer.

about text and fonts. 

about namehosting, hosting email. 

how to setup your email to come into applemail. (always a problem)

make a form with all your vital passwords etc on it... (with some encryption method thingy and instructions on how to keep it secure and FTP issues)

ftp and so on tutorials

briefing questionairre template

tutorials for mac and PC. 

Browser testing - new stuff

This is a really good rundown of browser testing and resources associated
http://harrikauhanen.posterous.com/an-ultimate-guide-to-browser-testing

Good point, has testsuite of legacy browsers, modern browsers, and future browsers, for the latest beta of next browser version. Id only go so far for IE though, other just get better really.

Heres a nice list of browser specific hacks
http://paulirish.com/2009/browser-specific-css-hacks/

Heres where I found a standalone Safari 3.2 and safari 4 beta(?useful)
http://tripledoubleyou.subtlegradient.com/stuff/Standalone%20Safari/
sadly the 2.0 versions link not working anymore.

Couldnt install IE9 beta on the windows vista virtual image, maybe it needs to go on my windows 10 machine.

By the way - the newest Macbook Pro has Bootcamp - really simple way to boot into Windows on your mac, no extra vm hardware required...

Drupal latest Zen theme css browser fixes for a sub theme

The latest Zen theme for Drupal 6 has been redone it seems, and I've had very little trouble with x-browser stuff this time, except for being due to trying to make a tricky liquid header with lots of floated blocks, causing the usual problems in IE7 and below with float bugs galore.

Not used nicemenus dropdowns this time, so thats probably saved some testing time.

Added into the zen themes 'html-reset.css' (v 1.6.2.2 2010/06/26) a few YUI2reset or Eric Meyer Reset styles, these were:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0; /*YUI2Reset*/
padding:0; /*YUI2Reset*/
}


table {
border-spacing:0;/*EMReset*/
}


td {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}


caption {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}

acronym {
border:0; /*YUI2Reset*/
}



fieldset {
border: 0;/*YUI2Reset*/
}


address, cite, code, dfn, var { /*YUI2Reset*/
font-style:normal;
font-weight:normal;
}

Then here are some other fixes I added to html-reset.css:

#content th, #content thead th, #content tbody th, #content thead{
word-wrap:normal;/*For benefit of Opera (10), not giving table headers proper width automatically, figure theres rarely going to be a long unbroken url or something that needs breaking in a table header...*/
}

/*Fixes for squashed body text tables in safari and opera when occur after floated image*/
#content .section #content-area .node .content table {
clear:both;
}

And some to ie.css

legend { 
color:#666666;/*IE makes it blue...*/
*margin-left:-9px; /*for IE7, Legend is indented otherwise, IE8 fine*/
}

And a zoom:1 to something containing floats

And for ie6.css
The usual double float margin bug fixes (display:inline) and transparency fixes, some zoom:1 for HasLayout, and this one I havn't come across before:

#block-menu-primary-links ul li a { 
display:inline-block; /*List white space bug [5]*/
}


#block-menu-primary-links ul li a { 
display:block; /*List white space bug [5]*/
}

And for print.css
In addition to zens pre setup print stylesheet I added these changes or additions


/* Un-float the content */
#content,
#content .section,
#content-area {
float: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide sidebars and nav elements */

#header,

#skip-link,

#navigation,

.region-sidebar-first,

.region-sidebar-second,

#footer,

.breadcrumb,

div.tabs,

.links,

.taxonomy,

.book-navigation,

.forum-topic-navigation,

.pager,

.feed-icons,

.warning,

.sticky-header {

  visibility: hidden;

  display: none;

}

/* Otherwise, Firefox clips the content after the first page. */
#page-wrapper, #page, #main-wrapper, #main, #content, #content .section, #content-area, .node, .node .content
{
overflow-y: visible;
display: inline; /*Important for Ffox content clipping after first page, and makes content full width of page*/
*display: inline-block;/*Fixes text clipping on right side in IE6, IE7*/
}

#page

{

font-size:12pt;

}

#content{

_textalign:left; /*Ie6 is centering text...*/

}

Clearing Floats... modern methods and explanations

Probably the best explanation of using clearfix by Suzy I have seen, including explaining errors and now obselete parts.
http://www.sitepoint.com/forums/showthread.php?t=567147&page=2

There is such confusion between 'clearing floats' and 'containing floats' and 'triggering HasLayout'. They are all called clear fixes but are different things really.
eg this comment from http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element

That is for pushing down the bottom edge of a container to wholly contain its floated children, which is a different problem altogether.

Totally! So much focus on 'containing floats' methods.

I've come across a situation where I actually need a float to just clear the one before it for layout purposes, because IE7 cant handle float and clear on the same element, it's actually not a float containment/hasLayout problem, but a serious limitation as it just cant do this layout it seems, its a real bug, no type of clearfixing/HasLayout is helping. It dont care if the float parent contains the children or not, I just need it to clear!
See demo, it is situation #3:
http://www.brunildo.org/test/IEWfc3.html

I actually think I need to use an empty clearing element in the markup... the author of that demo says elsewhere that there is no solution.
Cant even use the :after pseudo class for this weird purpose since IE7 dosn't read that...
only solution that keeps coming up
http://stackoverflow.com/questions/2614566/ie7-and-ie8-float-clearing-without-adding-empty-elements

Other good resources on modern clearfix use:
Good post explaining block formatting context, more indepth use of clearfix and how it can cause more problems if your not thinking about it.
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/

This is an evolved clearfix hack, using a space instead of a period. (see comments for using a unicode space, and line height etc to make it even more invisible.
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

eg see the hack at the end for clearfix on the 960 grid css. uses a unicode space  and zoom:1 for IEs. I prefer zoom:1, its simple, dosnt mess with overflow, and is clearly just for older IE, and goes just in IEs stylesheet. I like it since I always rememebr what its there for, whereas an overflow property might be there for a different reason and if you forget to comment it, you might not realise its a haslayout trigger.
http://960.gs/css/uncompressed/960.css

A nice roundup of IE6 specific fixes for HasLayout and a few specific things
http://www.onderhond.com/blog/work/ie6-core-bug-fixing

A JQuery plugin that shows you when your floats aren't cleared!!!! this is cool!
http://code.google.com/p/samaxesjs/wiki/CSSFloatPlugin

IE7 CSS float bug, Never put float and clear on same element

A day of IE hell worse than any I can remember... 

Nasty encounter with a bug that happens when float and clear is on the same element, which is floated in an opposite direction from a preceding float, nothing you can do will clear the preceding float, it seems, except adding an empty div or similar to clear, in between the 2... yuk...

Mental note: Never put float and clear on same element

I did, with the floats in opposite directions, and I got this bug, situation 3
http://www.brunildo.org/test/IEWfc3.html

So I restructured the PAGE TEMPLATE, so my elements could have the floats going in the same direction. But no dice, what I got then was this bug

http://www.brunildo.org/test/IEWfc.html

The culprit being that I still had float and clear on same element. IE7 just dosn't like this. The solution luckily for me, was to remove the clear:both from the 2nd last floated element. I realised I could do this by using firebug and checking out what I could do without, and low and behold, removing the clear didn't make any difference, because of the elements length, it was longer than the space available that I was trying to clear it from.

Thats not really a fix, but it works in this layout, it self clears because it simply wont fit alongside the previous floats, lucky me.

The only other option would have been to add an extra clearing wrapper and wrap the floats above in that, or put an empty clearer div preceding the floats I wanted cleared.

Things you can do with HTML but not XHTML

News to me...
http://www.sitepoint.com/forums/showthread.php?t=393445
Create parts of the page dynamically with JavaScript while the document is still loading (e.g., using document.write()).

but in XHTML you get CDATA, which is handy...

read this when time... kinda wtf I thought XHTML was just better... maybe its just too late at night and I've forgotten.

more from that article...

Is XHTML supported by all browsers?
No. Only a few mainstream browsers support XHTML, like Opera, Firefox and Safari.

Most importantly, Internet Explorer does not support XHTML at all.

If you follow certain guidelines you can serve XHTML documents as text/html (see below). That means the document will be seen as HTML, which all browsers can handle. Virtually all browsers have a parser bug that ignores the slash in self-closing tags.


Should I use XHTML or HTML?
That depends on who you ask. There are a number of technical issues with this question, which preclude a simple and short answer. In reality, the latest W3C recommendation with widespread support is HTML 4.01. Unless you actually need any of the features that XHTML offers over HTML, there is no technical reason to use XHTML.

In order to actually benefit from using XHTML, you really need to understand the fundamental differences between XHTML and HTML. Such a site will only be available to a small minority of the surfing population, however.

Some web designers and developers prefer XHTML's syntax rules over HTML's. By following certain guidelines, you can use this syntax without technically using XHTML at all (see below). There are a number of potential pitfalls with this approach, but it is a possible way forward for those who absolutely want to type
instead of
.

Cool HTML coding quality checklist / reminder

Good to read through before you start a job if its been awile or check through before you launch a template etc.
http://sweatte.wordpress.com/usability/html-tips/

css3 buttons

The technique described here is is my favourite its benefits are:
http://papermashup.com/pretty-css3-buttons/

Newer CSS3 browsers get rounded corners, text shadow and box shadow and gradient.

Non CSS3 capable browsers get a square coloured gradient button, which looks styled enough to suffice as a button.

I prefer not to have the gradient in CSS3 for two reasons
1/ I want non css3 browsers to get some love
2/ I want the button code to be adaptable to different coloured buttons easily, and simply use the background property for changing the button colour.

Uses a transparent .png for the gradient, which means it is adaptable for any colour button, AND can be seen in IE7, IE8, and IE6 with alpha image loader filter if you care.

see also:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
http://somadesign.ca/2010/realistic-looking-css3-buttons/

http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

Drupal Zen theme IE fixes

IE7

When using a background image as a bullet for a custom bullet list, IE7 was showing the default bullet AND the background image. Solution:

On ul:

list-style-image:none;

list-style-position:outside;

list-style-type:none;

and on li:

list-style-image:none;/*Benefit IE7 else double bullet*/

list-style-position:outside;/*Benefit IE7 else double bullet*/

list-style-type:none;/*Benefit IE7 else double bullet*/

this made the default bullet go away.

Background image bullet 'centering' vertically, a bit off on IE when text size is set to 'larger'.

....

floated block links like for navbar etc, if they show up in IE6 as stretching to the full width.

/*Fixes from above as suggested for .primary and .secondary used here for .nicemenus*/

ul.nice-menu-down li a

{

_display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */

_di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */

}

ul.nice-menu-down

{

_width: 100%; /* Otherwise IE5 treats the ul as floated */

_w\idth: auto; /* Reset to auto width for IE6 */

}

possible bugs

weird, ie6, 7, 8 all display the same...

http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/d03ccc6e-bd74-4ce1-af96-b4e496704d85

As you can see, div.floatleft should have a bottom margin of 10px but it doesn't appear in any of the IE versions. It only happens to left-floated items, and the margin is correctly applied to right-floated items in the "clearfixed" container. There are work-arounds like using padding instead of margins but this is a bug and I was disappointed that it didn't get fixed in IE8.

this seems to be happening to me, using padding on the bottom altered layout across IEs which seemed to be ignoring the margin., except im using 1.0 strict doctype... all validates fine.

a- doctype isnt written correctly

b- IE8 is in quirks mode or emulating IE7

test with padding that will show it up. also might mean the doctype is not correctly written.

wtf ex http://www.webmasterworld.com/css/4041519.htm

Which makes me wonder if your site isn't listed in the blacklist MSFT keeps of sites that get IE7 mode forced onto them, and hence IE8 will continue to act up like IE7 does till you manage to get out of that list.
IE8 shows that list on this pseudo URL: res://iecompat.dll/iecompatdata.xml
Or if you managed to turn on the "display all sites in compatibility mode switch".
Brings us to establishing you do to have IE8 in that dreaded compatibility mode.

good learning php resource

short simple lessons explained well

http://www.homeandlearn.co.uk/php/php3p6.html

cool site - paid forum for hep with wordpress and bounties

wordpress community is pretty helpful anyway, but this is a cool site that lets people pay others to help them. i know everyone helps people for free, buts its great if you have an urgent question or if you need some extra beer money.

cool if your down with wordpress, you could earn some quick cash replying on these forums when your stuck on public transport or something. or slow on work... or waiting for your client to show up to a meeting, or whatever. wp has a pretty steep learning curve for people not used to php and trying to do special things, so i think itll really take off.

http://wpquestions.com/question/show/id/206

Interesting CSS split a UL into 3 equal columns and keep top heights aligned

use negative margins. i might be using this soon, for a 2 or 3 column menu list

http://www.wpconfig.com/2009/07/28/the-definitive-guide-to-using-negative-margins-2/

referance:

ul {list-style:none;}

li {line-height:1.3em;}

.col2 {margin-left:100px;}

.col3 {margin-left:200px;}

.top {margin-top:-2.6em;} /* the clincher */

Website Pre-lauch checklist

http://www.gatopanda.com/index.php?option=com_content&view=article&id=54:pre-launch-checklist&catid=36:management&Itemid=59

cool list to go through, i love checklists!

random wordpress and seo links

about meta descriptions

http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with-meta-description.html

about meta tags generally

http://www.google.com/support/webmasters/bin/answer.py?answer=79812

seo plugins for wordpress

also theres all in one seo but gregs sounds good right now

http://wordpress.org/extend/plugins/gregs-high-performance-seo/screenshots/

http://wordpress.org/extend/plugins/404-plugin/installation/

http://wordpress.org/extend/plugins/light-seo/ evolution of all in one apparently.

http://yoast.com/wordpress/meta-robots-wordpress-plugin/

random 101

http://www.pandia.com/marketing101/3-html-code.html

funny article about photo websites having poor seo.

http://blog.photoshelter.com/2009/04/is-your-web-designer-full-of-c.html

i would counter all this by saying that one client actually didnt WANT to be found on google, because they didn't want 'randoms' contacting them. (such as work experience students, clients with no budget, people after 3 quotes etc etc.)

i sort of agree, theres something premium about not NEEDING web traffic, even not NEEDING a website. it says, im so good, im not desperate for work, etc etc. it communicates exclusivity or something. also, i think it looks a bit desperate and spammy to have proper seo title tags with all those keywords your targeting and so on. for certain industries and services, i dont think its always appropriate, and the correct branding and tone of voice implied by all those little details of content needs to be considered. seoers forget that not everyone NEEDS to be found, they already have loyalty and credibility and their site is sometimes just a portfolio to easily present to clients, an exact replacement for the old heavy book ones, that they personally showcase to clients and agents, but not the entire world. who wants to pay for all that bandwidth anyway for some students too browse or something?

yes designers should be learning seo implications of their work, but web designers shouldnt be over pedantic and forget the brand message of their client, which might include not needing to rank highly, as good 'customers' never come from an online channel, or there is nothing online to 'convert' anyway.

All about Wordpress permissions and security

Im finding it hard to get a straight answer on what is the step by step best ever settings for wordpress install folder and files permissions.

Whe i try and use the wordpress media uploader i get this error message:

"The uploaded file could not be moved to /xx/xx/xx/wp-content/uploads."

Im running into problems on a new host where even though everything seems to be 755, its not letting me upload images, and is asking for the ftp password everytime i install or delete a plugin. Im guessing this is a host specific permissions problem.

While I'm solving this problem, I also want to set all the files and folders to the best most secure permissions so its ready to go when launched.

permissions info generally

http://codex.wordpress.org/Changing_File_Permissions

I tried to change permissions from dws ftp and it dosnt do anything. so now i have to find out how to cmod

http://www.washington.edu/computing/unix/permissions.html

brief look and my files seem to be 644, and folders 755... config is 644, so is ht access. i notice it dosnt have execute access which is probably why wp couldnt write to it??

(whats weird is, the exact same wp installation worked on the old server, has this new server changes the folder permissions??? i dont get it... how? it is the exact same files...

weird uploads in 766, which makes me think i changed it to that, but i try and change it again and it dosnt seem to work, does it take a day to implement?? i change it back to 755, but it not work...

ok so i look in hosts control panel, and the permissions changes i made in dws ftp HAVE taken effect, just dosnt show in dw for some reason!!

Steps I have taken:

1/ I tried making a new folder and ftping it called media and uploading to that rather than uploads. dosnt work right away, i check the permissions and it is 0. even if i make the folder in the ftp program, it is still 0. so, i doubt it should work, need to figure out this chmod thing since dw dosnt seem to change the permissons.

2/going into the hosts cpanel and seeing if i can do any permissions stuff there. yes, and actually, i see that permissions HAVE been changed from dreamweaver, but dreamweaver dosnt show it.

3/ so, i try and upload images to my new media folder which have 777 permisssions. it works. but 777 bad, so i remove and test. 755 - dosnt work. 766, dosnt work.

wordpress forums:

very helpful read reply by SanchoPancho http://wordpress.org/support/topic/253778?replies=39

Directories should have, at most, permissions of 755. If you have a directory that is 777 then that can be written to.

Files should be, at most, 664. If you use the WP editor, you might need these files to be 666 but you really should revert them back to 664 after making any changes. You must never ever have ANY file at permissions greater than 666 unless you are directed specifically to do so.

777
Some hosts will only allow you to upload images (using WP) if the images folder is 777. That leaves your site at a certain level of risk. Email them and check what the minimum permissions are. Despite what they first say, this is NOT a WP issue - it's a security issue.
If your host insists that 777 is the only number, start looking for another host. 755 can be done by hosts (my directories are all 755) that take security seriously.

from wordpress forums:

http://wordpress.org/support/topic/362098

set the wp-content and folders below it to 777 just for the upload, then change them back to 755

should try this first, just to get past this probelm so can at least get photos in.

also if it turns out only 777 works... see

http://wordpress.org/support/topic/361512

Host is ok. They changed php rules for this account so that group can write as 775.

Basic links -use these to compile my own summary to go through

http://www.noupe.com/how-tos/wordpress-security-tips-and-hacks.html

http://blog.taragana.com/index.php/archive/20-wordpress-security-plug-ins-and-tips-to-keep-hackers-away/

http://socializedsoftware.com/2009/07/13/securing-wordpress/

http://www.antezeta.com/blog/top-wordpress-security-tips

From here changing the table prefix to something obscure
http://semperfiwebdesign.com/documentation/wp-security-scan/change-wordpress-database-table-name-prefix/

For some people the database table name prefix changing functionality of WP Security Scan doesn’t work. In that case you may use the following instructions to change it manually.

1. backup your wordpress database to a sql file (you can use phpmyadmin)
2. open that *.sql file (make another copy first) using text editor, then find and replace all “wp_” prefix to “something_”.
3. now, drop all tables of your wordpress databases (don’t drop the database)
4. import the *.sql file which has been edited before into your wordpress databases.
5. and lastly, edit your wp-config.php file and change the $table_prefix = ‘wp_’; to $table_prefix = ‘something_’;
6. you may find that your plugins are deactivated automatically when this happens, so you’ll want to activate them again if that’s the case… I’d recommend deactivating them prior to doing this anyway as a precaution.