- add the PHP Bin folder to the PATH. ie: C:\wamp\bin\php\php5.3.13
- edit the php.ini file in the PHP folder to uncomment the extension=php_curl.dll line.
- also edit the php.ini file in Apache's /bin folder to uncomment the same line.
Monday, August 20, 2012
MODx: enabling cURL in WAMP on Win 7 64bit
MODx requires that cURL be running, and to enable it on a Win 7 64bit platform:
Friday, August 17, 2012
air: injecting jQuery
After you load a web page into an HTML component you may want to select, modify, add and remove DOM elements in reponse to events within the AIR application and/or gather data from the web page for use in the AIR app. jQuery ( http://jquery.com/ ) is a robust and feature filled JavaScript library which provides methods which can make it much easier to select and modify DOM elements, however not every web page includes this library and you may not have the option to modify the web page manually to add the jQuery library before loading it into your AIR application.
To work around this you can inject the library after the page has loaded, and then make calls to it's methods from within the AIR application. First you need to load the jQuery libary as a String. You can do this either from an online resource or from a copy of the JavaScript file on the hard drive, for example if you have included it as an asset within the application directory of the AIR app.
Here's an example of loading jQuery from a remote source:
And here's an example which loads jQuery from a JavaScript file saved as an asset in the application directory:
NOTE : To use these examples you will need to replace the dummy website URL and dummy class with real ones. They were developed in Flash Builder 4.5 but should be adaptable to Flex 3. This solution was inspired by an article by Brandon Martinez: http://www.brandonmartinez.com/2011/04/23/inject-jquery-onto-any-site/.
To work around this you can inject the library after the page has loaded, and then make calls to it's methods from within the AIR application. First you need to load the jQuery libary as a String. You can do this either from an online resource or from a copy of the JavaScript file on the hard drive, for example if you have included it as an asset within the application directory of the AIR app.
Here's an example of loading jQuery from a remote source:
And here's an example which loads jQuery from a JavaScript file saved as an asset in the application directory:
NOTE : To use these examples you will need to replace the dummy website URL and dummy class with real ones. They were developed in Flash Builder 4.5 but should be adaptable to Flex 3. This solution was inspired by an article by Brandon Martinez: http://www.brandonmartinez.com/2011/04/23/inject-jquery-onto-any-site/.
Friday, August 10, 2012
email dev tips
This post will be one that gets edited frequently for a while. It's going to be my repository - and your's as well if you find it useful - of tips, tricks, work-arounds, kludges, etc. for HTML email development.
Doctype, <html>, <meta> and <title> boilerplate:
Notes: Set to 'xhtml1-strict' as this is what GMail automatically uses so we'll have better results if we restrict out HTML development to it.. with a few exceptions.
Using meta tags to set the 'content type' doesn't really have any effect, as clients use the content type that is set in the email's header by the email server. Best bet is to replace any special characters with the HTML entity.
The 'format-detection' meta tag turns off iOS devices automatically detecting phone numbers and turning them into URLs. This is preferable as it will keep the text in the desired style, rather than turning it bright blue with an underline. iOS will also do this with 'dates' and with 'postal addresses', but there is no meta tag to switch off this feature. Instead you must turn them into a non-functional link:
<body>
Should not have any styles applied to it directly, as styles on this tag are technically not allowed in xhtml1-strict, they are ignored by some clients and other clients remove this tag all together. Use embedded CSS (see below) to apply styles to the <body>.
CSS
Other than this use Inline CSS, no External Stylesheets. You can develop and email using Internal Styles and then run it through http://premailer.dialect.ca/ to convert them to Inline. Copy any Embedded CSS to the bottom of the email as well, inserting it before the </body> tag so that Yahoo in IE7/IE8 will pick them up.
Avoid using CSS shorthand.
CSS support of email clients that we support:
* iOS devices will auto-resize copy to a minimum size of 13px. To stop this:
** Outlook may not support; add 'mso-line-height-rule:exactly' before 'line-height'. For Outlook '07 the line-height must be no smaller than the font-size, or the text will not render at all!
*** Hotmail doesn't support 'margin' or 'margin-top'
**** Outlook '07/'10 doesn't support padding in <p> or <div>
Use web safe fonts.
If there is copy in the email layout which does not use web safe fonts, it will have to be displayed in the email using image files or require a design revision.
Is there a web-safe Helvetica Neue CSS font-family stack?
JavaScript
No.
Use tables for layout, not styled divs or spans. Usually you'll want to set the padding, spacing and borders of the table to zero and collapse the borders of the table and it's td.
Use a table to set a colour 'behind' the email's content.
The content table should be set to 600px wide and centered.
Set widths within <td>, rather than an overall width for the <table>. Specify as much of the layout's characteristics as you can, only use absolute pixel values, this helps get everything lined up as required by the design. Use 'spacer.gif' images within the td, to ensure sizes are pushed out to where you want them. Overkill on coding the positions and sizes of elements within the layout is better than not getting things where you want them. "spacer.gif" is a 1px x 1px transparent GIF that you specify whatever width and height you require, and it stretches to fill it.
Nest tables to achieve left and right padding. This is more reliable than using CSS margins or padding.
Avoid unnecessary whitespace in <td>. Some email clients add additional padding above or below the <td>'s content, breaking the design.
When using Photoshop "Slice" to create tables, [ I'll be rewriting this section ]
<img> styles boilerplate:
Always spec the 'alt' and 'title' for any images - including the spacers, which should have it set as a 'null' value.
Using 'display:block' to avoid unwanted white space around images means that if you want side-by-side images - for example buttons in a menu - you will have to use a table to position them.
Don't use background images. Except perhaps for subtle gradients behind text inside of <td>'s, in which case you need to also specify a solid colour which is a near enough substitution that it won't cause a drastic change in the visual impact of the email for clients which do not render bg images.
Don't use shorthand hex for colours. Use #ffffff instead of #fff.
Use as much text, rather than images, as possible. While your alt & title tags help, they are less acceptable to spam detection than actual text. An email that is mostly or entirely images will have a much higher spam score than one which relies on text for it's content.
Not using bg images and using as much text as possible may require co-ordination between developer and designer.
Android's auto word-wrap can be avoided by using "white-space:nowrap"
Yahoo's online email app likes to apply it's own styles to links in an email. To avoid this put a <span></span> inside of the <a></a> tags and use inline styles. You can't style the mouse interaction states of a link, the best you can do is define a static colour and if there is an underline or not.
iOS devices have a sub-pixel rendering issue which can cause borders to appear around images which are inside of tables. You can 'fix' this by setting the initial zoom of the viewport, but if the user zooms the page at all the lines will appear. The only other fix is to nest the table inside of another table with a colour that will conceal the lines set as it's background colour.. though this may not always be possible.
Super & Subscript
sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom: -0.25em;}
Web Page Version
Remove "view online as a webpage", "add this email address to your spam filter" and "unsubscribe" links. Maybe change the "unsubscribe" to a "subscribe" link.
Send to a Friend Version
Remove any "unsubscribe" links - maybe change them to a "subscribe" link. Make sure none of the lines in the code are crazy long! This can cause code issues when the PHP email script sends the email out.. strange characters inserted into the code = broken code. >.<
>
Don't use this inside of the alt and title tags of an image, as it will break in Yahoo Mail.
Office 365 Outlook
There is a stylesheet added on the server-side which adds a 5px gap between table rows. Currently there is no fix.
Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010
If using align=right or align=left in the tables, wrap the content of the first <td> in a paragraph tag. Style that paragraph tag using the following: mso-table-lspace:0;mso-table-rspace:0;margin:0
This fix will also work for fixing vertical gaps in <td> in Outlook Web App but it causes a wide variety of other clients (Apple, Gmail, etc.) to break by adding in a 3 px width margin to the image. To fix this <img src="img.jpg" style="margin:0" />
Useful Online Resources
http://www.campaignmonitor.com
http://htmlemailboilerplate.com/
http://www.emailology.org
http://premailer.dialect.ca/
http://validator.w3.org/
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.emailonacid.com/
Doctype, <html>, <meta> and <title> boilerplate:
Notes: Set to 'xhtml1-strict' as this is what GMail automatically uses so we'll have better results if we restrict out HTML development to it.. with a few exceptions.
Using meta tags to set the 'content type' doesn't really have any effect, as clients use the content type that is set in the email's header by the email server. Best bet is to replace any special characters with the HTML entity.
The 'format-detection' meta tag turns off iOS devices automatically detecting phone numbers and turning them into URLs. This is preferable as it will keep the text in the desired style, rather than turning it bright blue with an underline. iOS will also do this with 'dates' and with 'postal addresses', but there is no meta tag to switch off this feature. Instead you must turn them into a non-functional link:
<body>
Should not have any styles applied to it directly, as styles on this tag are technically not allowed in xhtml1-strict, they are ignored by some clients and other clients remove this tag all together. Use embedded CSS (see below) to apply styles to the <body>.
CSS
Other than this use Inline CSS, no External Stylesheets. You can develop and email using Internal Styles and then run it through http://premailer.dialect.ca/ to convert them to Inline. Copy any Embedded CSS to the bottom of the email as well, inserting it before the </body> tag so that Yahoo in IE7/IE8 will pick them up.
Avoid using CSS shorthand.
CSS support of email clients that we support:
| Text & Fonts | font font-family font-style font-variant font-size* font-weight letter-spacing line-height** text-align text-decoration text-indent text-transform |
| Color & Background | color background-color HSL Colors (CSS3) |
| Box Model | border margin*** padding**** width**** |
| Tables | border-collapse table-layout |
* iOS devices will auto-resize copy to a minimum size of 13px. To stop this:
** Outlook may not support; add 'mso-line-height-rule:exactly' before 'line-height'. For Outlook '07 the line-height must be no smaller than the font-size, or the text will not render at all!
*** Hotmail doesn't support 'margin' or 'margin-top'
**** Outlook '07/'10 doesn't support padding in <p> or <div>
Use web safe fonts.
If there is copy in the email layout which does not use web safe fonts, it will have to be displayed in the email using image files or require a design revision.
Is there a web-safe Helvetica Neue CSS font-family stack?
JavaScript
No.
Use tables for layout, not styled divs or spans. Usually you'll want to set the padding, spacing and borders of the table to zero and collapse the borders of the table and it's td.
Use a table to set a colour 'behind' the email's content.
The content table should be set to 600px wide and centered.
Set widths within <td>, rather than an overall width for the <table>. Specify as much of the layout's characteristics as you can, only use absolute pixel values, this helps get everything lined up as required by the design. Use 'spacer.gif' images within the td, to ensure sizes are pushed out to where you want them. Overkill on coding the positions and sizes of elements within the layout is better than not getting things where you want them. "spacer.gif" is a 1px x 1px transparent GIF that you specify whatever width and height you require, and it stretches to fill it.
Nest tables to achieve left and right padding. This is more reliable than using CSS margins or padding.
Avoid unnecessary whitespace in <td>. Some email clients add additional padding above or below the <td>'s content, breaking the design.
When using Photoshop "Slice" to create tables, [ I'll be rewriting this section ]
<img> styles boilerplate:
Always spec the 'alt' and 'title' for any images - including the spacers, which should have it set as a 'null' value.
Using 'display:block' to avoid unwanted white space around images means that if you want side-by-side images - for example buttons in a menu - you will have to use a table to position them.
Don't use background images. Except perhaps for subtle gradients behind text inside of <td>'s, in which case you need to also specify a solid colour which is a near enough substitution that it won't cause a drastic change in the visual impact of the email for clients which do not render bg images.
Don't use shorthand hex for colours. Use #ffffff instead of #fff.
Use as much text, rather than images, as possible. While your alt & title tags help, they are less acceptable to spam detection than actual text. An email that is mostly or entirely images will have a much higher spam score than one which relies on text for it's content.
Not using bg images and using as much text as possible may require co-ordination between developer and designer.
Android's auto word-wrap can be avoided by using "white-space:nowrap"
Yahoo's online email app likes to apply it's own styles to links in an email. To avoid this put a <span></span> inside of the <a></a> tags and use inline styles. You can't style the mouse interaction states of a link, the best you can do is define a static colour and if there is an underline or not.
iOS devices have a sub-pixel rendering issue which can cause borders to appear around images which are inside of tables. You can 'fix' this by setting the initial zoom of the viewport, but if the user zooms the page at all the lines will appear. The only other fix is to nest the table inside of another table with a colour that will conceal the lines set as it's background colour.. though this may not always be possible.
Super & Subscript
sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom: -0.25em;}
Web Page Version
Remove "view online as a webpage", "add this email address to your spam filter" and "unsubscribe" links. Maybe change the "unsubscribe" to a "subscribe" link.
Send to a Friend Version
Remove any "unsubscribe" links - maybe change them to a "subscribe" link. Make sure none of the lines in the code are crazy long! This can cause code issues when the PHP email script sends the email out.. strange characters inserted into the code = broken code. >.<
>
Don't use this inside of the alt and title tags of an image, as it will break in Yahoo Mail.
Office 365 Outlook
There is a stylesheet added on the server-side which adds a 5px gap between table rows. Currently there is no fix.
Remove Unwanted Gaps Between Tables in Outlook 2007 and 2010
If using align=right or align=left in the tables, wrap the content of the first <td> in a paragraph tag. Style that paragraph tag using the following: mso-table-lspace:0;mso-table-rspace:0;margin:0
This fix will also work for fixing vertical gaps in <td> in Outlook Web App but it causes a wide variety of other clients (Apple, Gmail, etc.) to break by adding in a 3 px width margin to the image. To fix this <img src="img.jpg" style="margin:0" />
Useful Online Resources
http://www.campaignmonitor.com
http://htmlemailboilerplate.com/
http://www.emailology.org
http://premailer.dialect.ca/
http://validator.w3.org/
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
http://www.emailonacid.com/
Subscribe to:
Posts (Atom)