html

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'}

Technology:

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:

Technology:

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.

Technology:

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 plugin
script 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 download
link 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:
  1. Create an HTML file with the desired layout (including all regions like, footer, header, ..., menu)
  2. Create one XML file per specific page, containing the elements <root><content></content></root> and put the content between the two content tags.
  3. Now create an XSLT file (with output method xml)
  4. Add one template rule which matches /root/content, and insert the layout defined in the HTML file above
  5. 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>  

Creating a Typo3 website from a prepared html or css template

 At first we create a html or css template by using an Html Editor or an IDE such as Dreamweaver . We must save this template in the filedmin Folder of the Typo3 installation. Then we open the typo3 backend site. In this section we create pages of our websites by using typo3 menus. and on the right side there is a menu named (Template).we click on it, its being opened the template section of our web site.  Below of this page there is a Setup section and  we click on the pencil icon. It will be opened a page . In this page we write this code:  

  • temp.mainTemplate = TEMPLATE
  • temp.mainTemplate{
  • template = FILE
  • template.file = fileadmin/template/ (your file name).html
  • }
  • page = PAGE
  • page.typeNum = 0
  • page.stylesheet = fileadmin/template/css/yourcssfilename.css
  • page.10 < temp.mainTemplate
  • page.10.workOnSubpart = BODY_CONTENT

    This code is actually not sufficient to create the web site. But at least the beginning... 

Finding the URL of KM Exercise english homepage

There exists no automatic direction button (similar to the one which can be found on top right corner of the KM lecture's homepage) and I handled the problem in this way (I know almost nothing about html, xml and many other IT related topics):

I thought both homepages (Lecture and Exercise) should be organized by the same person or at least in the same way. So I compared URLs of “english homepage” and “german homepage” of the “KM lecture” together. Their difference was just a simple “index.en.html” and I added it to the URL of german homepage of KM exercise.

Taggings:

Subscribe to html