html
The Mason approach is based on MVC, therefore you need to define the database connection within your Base.mc as follows:
<%init>
my $conn = DATABASE_NAME::DBI->conn();
my $sconn = DATABASE_NAME::DBI->session_conn();
Afterwards e.g. in your index.mi you need to define another init section in which you can execute your actual query to gather informations from your Database:
<%init>
my $dbh = Ws21::DBI->dbh();
my $sth;
my @articles;
if (!defined $.search) {
$sth = $dbh->prepare("SELECT SOME QUERY FROM DATABASE_NAME");
$sth->execute();
}
Then you are able to call this information with perl from within your html code section like this:
% for my $article (@articles) {
...
% }
For this call it is very important that you start the perl section with % at the very beginning of the line. If it will be started with leading spaces or tabs, it will throw an exception.
Taggings:
There are many different possibilities to answer this question. We will go top down beginning with the browser.
Most of the browsers support the html input tag of type "email" and most of them would automatically warn the user about a wrong format of the address. However there are many standards of email address pattern. Furthermore the user might disable the browser validation, so we should not rely on this.
The second station is the javascript of the browser. Probably the easiest way to validate the email address is to use a regular expression an match the input against this expression. However the user may disable the javascript or send a request in other way than browser. Therefore it's absolutely necessary to validate the email address on the server side. This might be done by a regular expression, but some more sophisticated systems would check the MX record of the domain given in the email address, to be sure it might be a real address of a real mail server.
Apparently in Rails you need to manually set the MIME-Type of attachments, otherwise their filesize, filetype and other Metadata are not properly recognized by the E-Mail client and images will not be displayed within the html e-mail.
In this case using the hash :mime_type and the corresponding value 'image/png' in the rails controller solved this problem:
attachments.inline["img.png"] = {:data => File.read('img.png'), :mime_type => 'image/png'}
Taggings:
There is a HTML 5 File API which you can use to read files without uploading: https://www.html5rocks.com/en/tutorials/file/dndfiles/
Taggings:
Using Html/Javascript you can only select files using the file upload html component (I think Flash / Silverlight wrap this to make things easier but its still sandboxed)
You can however use Java Applets (orwhatever they are called these days), Native ActiveX controls or .Net Controls to provide additional functionality (this hase security implications and required VM/Runtimes Frameworks etc)
Adobe Air or other client side technology might work, but looks like you want to do this in JavaScript. In this case, uploading the file to the server and manipulating from there is the best bet.
Taggings:
The problem can be solved by using a Nginx reverse proxy. Each application will be exposed through a corresponding sub-domain.
Dockerfile:
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY proxy.conf /etc/nginx/includes/proxy.conf
proxy.conf:
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
proxy_request_buffering off;
proxy_http_version 1.1;
proxy_intercept_errors off;
nginx.conf:
# pm config.
server {
listen 80;
server_name site1.myproject.com;
location / {
include /etc/nginx/includes/proxy.conf;
proxy_pass http://site1_webserver_1;
}
access_log off;
error_log /var/log/nginx/error.log error;
}
# api config.
server {
listen 80;
server_name site1.myproject.com;
location / {
include /etc/nginx/includes/proxy.conf;
proxy_pass http://site2_webserver_1;
}
access_log off;
error_log /var/log/nginx/error.log error;
}
# Default
server {
listen 80 default_server;
server_name _;
root /var/www/html;
charset UTF-8;
access_log off;
log_not_found off;
error_log /var/log/nginx/error.log error;
}
The proxy_pass is the name of the application's docker container.
Taggings:
Full screen random background images using Supersized (javaScript)
In order to have full screen background images on a website you may consider using a jQuery plug in named Supersized. Supersized is available from http://buildinternet.com/project/supersized/ under the GPL and MIT License.
To get supersized to work properly on a website you have to include some JavaScript and CSS in the head section of your html site.
1. the jQuery pluginscript type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>
2. the supersized plugin (which you downloaded from the website shown in the first paragraph)script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"/>
3. the CSS file that comes with the supersized zip from the downloadlink rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
After including these script and CSS files you can either make a separate javaScript file and include it as well or just use the fallowing code within the head tags of the site you want to use supersized on.
script type="text/javascript">
jQuery(function($){
$.supersized({
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 0, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : 6000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 2000, //Speed of transition
new_window : 0, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 0, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 0, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 0, //Slideshow controls on/off
thumbnail_navigation : 0, //Thumbnail navigation
slide_counter : 0, //Display slide numbers
slide_captions : 0, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'pics/001.jpg', title : 'Day 3 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/002.jpg', title : 'Film by Emily Tebbetts', url : 'about.html'},
{image : 'pics/003.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/004.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'},
{image : 'pics/005.jpg', title : 'Day 2 by Emily Tebbetts', url : 'about.html'}
]
});
});
/script>
Looking at the javaScript we can see that there is the possibility to set the start slide variable to "0". As a result the fullscreen background slideshow starts with a random image.
As we can see at the variables above there is a great number of possibilities to tweak the appearance of the background slideshow.
Generating html pages with xslt template
Regions and parts all pages have in common should be separated from page-specific information (We will refer to the latter simply as content).
The idea is to split them up as follows:
- create an XSL template with the basic layout of the pages,
- and for each page a file containing only the content.
So common elements and page specific content can be maintained separatly.
Every time changes have been applied, the final HTML files can be generated via xsl transformation.
-
Step by Step:
- Create an HTML file with the desired layout (including all regions like, footer, header, ..., menu)
- Create one XML file per specific page, containing the elements
<root><content></content></root>and put the content between the two content tags. - Now create an XSLT file (with output method xml)
- Add one template rule which matches /root/content, and insert the layout defined in the HTML file above
- Finally the content has to be inserted into the output. Add the following rule to the desired location:
<xsl:copy-of select="/root/content/*"/>
Xalan could be used to transform the pages. Then the invokation would look like:java -cp ./xalan/xalan.jar org.apache.xalan.xslt.Process -in content/index.xml -xsl templates/template.xslt -out index.html
Hint: Time saver: Put these calls into a makefile, so only modified pages get transformed.
Use the hCard microformat
hCard is a simple, open microformat standard, suitable for embedding in HTML. Technically it's a 1:1 representation of the popular vCard format for electronic business cards. It resembles the properties and values of the vCard format through elements of HTML.
An address, which has the following markup using the HTML address tag
<address>
Max Mustermann
Musterstraße 10
1010 Wien
0664/333666
</address>
would have the following markup in hCard
<div id="hcard-max-mustermann" class="vcard">
<span class="fn">max mustermann</span>
<div class="adr">
<div class="street-address">Musterstraße 10</div>
<span class="postal-code">1010</span> <span class="locality">Wien</span>
</div>
<div class="tel">0664/666333</div>
</div>
This still is plain old HTML, but provides much more semantic details through all the class annotations. hCard pretty much looks like the way to go for now, this is also supported by the fact that Google Maps is using it for the annotation of addresses.
Much more details on hCard can be found at http://microformats.org/wiki/hcard.
Embedding of Google Maps
Before you do anything, as with most API-based web services, you will need to attain an API key before you are able to use the service. Head over to this Google Maps page to sign up for an API key. Signing up is pain free and you get the API-key right after you click on Generate API Key.You then need to download the gmapez.js file from this website and host it somewhere on your website. The actual code necessary to make the map appear on your blog entry or website relies on using an iframe, so you will need to make another html file that the iframe will read from.Below is the code you will need to put in that html file; a few things will need to be changed so keep on reading. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script src="http://maps.google.com/maps?file=api&v=1&key=YOUR_GOOGLE_MAPS_API_KEY_HERE" type="text/javascript"></script><script src="http://www.YOURDOMAIN.com/path/to/gmapez.js"type="text/javascript"></script></head><body><div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl"style="width: 400px; height: 400px;"><a href="YOURGOOGLELINK"></a></div></body></html>This is the basic skeleton of code needed to get a Google Map running on your site. You will have to give it your Google API key as well as a valid url to your gmapez.js file. One more thing is the actual Google Maps link for the area you want shown on the map. Go to maps.google.com and find the location you want to be shown, double click on it and then copy the link via the Link to this page at the top right of the Google Maps site. Paste that url in the code above where it says YOURGOOGLELINK. This will automatically center the map on a marker of that location. You can create new markers my creating more and more <a href></a> type tags. Placing a capital letter between those tags will display that letter as the marker instead of the default dot. You can find out more about various configurations at the GMap EZ site.Now to actually placing the code on your site. The piece below goes on the actual blog post or website page. Make sure to feed it the proper URL to your html containing the code above. <iframe src="http://www.YOURDOMAIN.com/pathto/YOURCODE.html" width="500" height="500"></iframe>
Pages
