Archive

Archive for the ‘html’ Category

Viewport meta tag for better page rank in mobile Google search

April 25, 2015 Leave a comment

Algorithm changes are rolled out to Google’s data centres to let mobile-friendly web pages get higher ranking on Google Search. Some sensationalist news outlets call this “mobilegeddon“. I think it is much ado about very little.

Google provides a mobile-friendly test and at first oliver.doepner.net did not pass.

So I learned about the viewport meta tag and after adding the following to the head section of my html pages they now pass the test:

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

About the viewport meta tag

180x130_viewport-meta-tag

The “viewport” meta tag is not part of the official HTML standard, but the validator at the W3C will still accept your pages as valid.

The tag was initially introduced by Apple Safari, but is now widely supported by most mobile web browser. As of spring 2015 Microsoft IE for Windows Mobile is the main exception: It requires some vendor-specific CSS.

Non-mobile web browsers typically just ignore the tag, which is fine because the whole “viewport” concept only makes sense for the relatively small screens of mobile devices.

Lacking a standard definition, for now the best specs are the respective web developer pages at Apple, Mozilla and Google.

Responsive accessible web design

Please note: Passing the Google test is nice for your page ratings, but truly “responsive” web design that works well on all browsing devices requires more effort, as this article on html5rocks.com explains quite well.

And of course, all supporters of an open, inclusive web should always ensure the accessibility of their site, for everyone regardless of disability.

Categories: coding, css, doepner.net, html Tags: , , ,

JQuery: Button to cycle through select options

November 9, 2014 Leave a comment

I wanted an html drop-down list to automatically appear as a simple button that changes color on every click as it cycles through the option values of the (hidden) select element.

The code sample is in this jsfiddle. It uses JQuery.

For each relevant select element, it styles the associated label so it looks like a button, hides the select element and handles clicks on the label button by cycling through the select options.

The display text of each option is used as a tooltip (‘title’ attribute) of the button which also serves as a css selector to color the button according to currently selected option.

The beauty of this is that the selected values of the hidden drop-downs can be submitted by regular form submit and that the form is fully functional if JavaScript is turned off.

The button styling requires CSS3, so IE8 is not suitable. I have tested this successfully in Firefox 33 and IE11.

Categories: css, html, jquery Tags: , ,

Direct Google image search URLs

April 8, 2013 Leave a comment

Problem: This URL does not actually execute an image search:
http://images.google.com/?q=oliver+doepner

For direct links to a Google image search, I have successfully used this URL pattern:
http://google.com/search?tbm=isch&q=oliver+doepner

The “+” sign is just a URL encoded space character.

Categories: doepner.net, html

HTML / JSP / Servlets / JavaMail / Oracle / CSV / Excel: UTF-8 to Unicode them all

March 28, 2013 1 comment

Recently I wrote a web app that

  • Lets user enter a greeting message with subject and body
  • Sends an HTML email (“ecard”) to recipients
  • Stores info about sent messages in Oracle
  • Reports on recently sent messages on an admin page (HTML table)
  • Provides the report as downloadable CSV files (often opened in M$ Excel)
  • Provides an RSS feed about recently sent messages

One goal was to allow any Unicode characters for subject and body text and make sure that web form, servlets, JSP pages, emails, database records and CSV files all support that (no garbled characters anywhere, no data loss through charset conversions).

So here is what I did:

JSP and HTML pages

At the top of the JSP pages:

<!DOCTYPE html>

<%@ page contentType="text/html;charset=UTF-8" %>

In every HTML and JSP page, within the <head> section:

    <meta charset="UTF-8"/>

Servlet filter

In WEB-INF/web.xml:

    <filter>
        <filter-name>UTF8Filter</filter-name>
        <filter-class>net.doepner.servlet.Utf8Filter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>UTF8Filter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

In net/doepner/servlet/Utf8Filter.java:

package net.doepner.servlet;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import java.io.IOException;

/**
 * Makes sure that we use UTF-8 for all requests and response
 */
public class Utf8Filter implements Filter {

    @Override
    public void init(FilterConfig fc) throws ServletException {
        // nothing to do
    }

    @Override
    public final void doFilter(ServletRequest request,
                               ServletResponse response,
                               FilterChain chain)
            throws IOException, ServletException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        // nothing to do
    }
}

Sending Email

In the code that sends the email (using javax.mail API):

        final MimeBodyPart htmlPart = new MimeBodyPart();
        htmlPart.setContent(template.getHtml(msg), "text/html;charset=utf-8");

        final Multipart multiPart = new MimeMultipart("alternative");
        multiPart.addBodyPart(htmlPart);

        final MimeMessage email =
                new MimeMessage(Session.getDefaultInstance(properties));

        // setting the sender and recipient is omitted here for brevity

        email.setSubject(msg.getSubject(), "UTF-8");
        email.setContent(multiPart);

        Transport.send(email);

Oracle database

For Unicode support in Oracle, make sure that

  1. Use NLS_CHARACTERSET = AL32UTF8 and regular VARCHAR2 columns
  2. Or use NVARCHAR2 column types.

I used approach A. I haven’t actually tried approach B myself.

Here is a useful query to see current charset settings:

SELECT * FROM nls_database_parameters nls 
         WHERE nls.parameter LIKE '%CHAR%SET%';

CSV generation

See my earlier blog post about CSV generation in a Servlet using my CsvWriter utility class.

The important bits are:

private static final char BYTE_ORDER_MARK = (char) 0xfeff;

Put that byte sequence (the so-called “BOM“) at the very beginning of the response content. Some applications (like M$ Excel) will otherwise not detect the UTF-8 encoding correctly.

Do this on the writer object from the getWriter() method on the servlet response:

// The BOM is required so that Excel will recognize UTF-8
// characters properly, i.e. all non-ASCII letters, etc.
writer.print(BYTE_ORDER_MARK);

RSS feed

I generate the RSS feed with an JSP page. Just make sure you have this on the top of the page:

<?xml version="1.0" encoding="UTF-8"?>
<%@ page contentType="text/xml;charset=UTF-8" %>
Categories: html, java Tags: , , , , , , ,

Simple accordion using CSS3 :target selector (no JavaScript)

March 14, 2013 7 comments

I made a simple “accordion” style UI that consists of several collapsed sections with only the “current” one expanded, using the CSS3 :target selector. I wanted the basic functionality of the JQuery UI accordion, but in a minimalistic way, without any JavaScript.

The :target selector is supported in all modern browsers, including IE9 and IE10, but not in IE8 and earlier.

In a real application with a variable number of accordion sections you would probably generate the HTML for the sections with some sort of iteration. You need to make sure that each section id is a valid unique id on the page and that the href of the link in the section header points to the section id, prefixed by ‘#’.

The minimal sample code is in jsfiddle 1, a version with some more visual style is in jsfiddle 2. For illustration, I am also posting the sample code here (see below).

I used a <div> for the whole accordion, a <fieldset> for each section, a <legend> for the section header and nested <div>…</div> for the section content.

Please note that you can use other HTML tags, as long as you use the CSS classes used in the stylesheet and the same kind of nesting.

HTML code:

<div class="accordion">
  <fieldset class="section" id="id1">
    <legend class="section-header">
      <a href="#id1">Section 1</a>
    </legend>
    <div class="section-content">
      Section 1 content
    </div>
  </fieldset>
  <fieldset class="section" id="id2">
    <legend class="section-header">
      <a href="#id2">Section 2</a>
    </legend>
    <div class="section-content">
      Section 2 content
    </div>
  </fieldset>
</div>

CSS stylesheet code:

.accordion .section {
    margin: 1em;
}
.accordion .section-header a {
    text-decoration: none;
    color: gray;
}
.accordion .section:hover .section-header a {
    color: red;
}
.accordion .section .section-content {
    display: none;
}
.accordion .section:target .section-content {
    display: block;
}
.accordion .section:target {
    border: 2px solid navy;
}
.accordion .section:target .section-header a {
    color: navy;
    cursor: default;
}
.accordion .section-header a:before {
    content:"\25BA\0000a0"
    /* unicode triangle pointing right */
}
.accordion .section:target .section-header a:before {
    content:"\25BC\0000a0"
    /* unicode triangle pointing down */
}
Categories: css, html

Extremely simple one-level drop-down menu using CSS

November 15, 2012 Leave a comment

The CSS below styles an unordered list with nested sub-lists as a horizontal menu with drop-down sub-menus (only one level). I tried to keep the code minimal with no effort for good looks. You can add your own styling as you like.

I have tested this successfully in IE8, IE9 and recent versions of Firefox, Chrome, Safari and Opera. I consider IE6 and IE7 broken beyond repair and basically ignore them.

Please test it in your browser at http://jsfiddle.net/Yk6MS/4/, and let me know about any problems you might find.

Style sheet:

.menu,
.menu ul {
  background-color: tan;
}
.menu > li {
  display: inline-block;
  white-space: nowrap;
}
.menu ul {
  position: absolute;
  display: none;  
}
.menu > li:hover {
  position: relative;
}
.menu > li:hover ul {
  display: block;
}

Example HTML:

<ul class="menu">
  <li>Abra
     <ul>
      <li>Amfdf rt</li>
      <li>Brr zz</li>
     </ul>
  </li>
  <li>Kadabra
     <ul>
      <li>Kala mala</li>
      <li>Hauki dauki</li>
     </ul>
  </li>
  <li>Simsalabim
    <ul>
      <li>Dudel didel</li>
      <li>Dudel döh</li>
      <li>Labedi bap</li>
    </ul>
  </li>
</ul>
Categories: css, html

A visual history of HTML5

July 19, 2012 Leave a comment

I like this visual history of HTML5

Categories: firefox, html