public class Display {
 
    public void printTime(int hour, int minute, int second) {
        String fullHour = "";
 
        fullHour += (hour > 9) ? ":" + hour : "0" + hour;
        fullHour += (minute > 9) ? ":" + minute : ":0" + minute;
        fullHour += (second > 9) ? ":" + second : ":0" + second;
 
        System.out.println(fullHour);
    }
}

import java.util.Timer;
import java.util.TimerTask;
 
public class Timeout {
 
    private int hour = 0;
    private int minute = 0;
    private int second = 11;
    private Timer timer;
    private boolean isTimerRunning;
    private Display display;
 
    public Timeout() {
        timer = new Timer();
        display = new Display();
    }
 
    TimerTask task = new TimerTask() {
        @Override
        public void run() {
            isTimerRunning = true;
            if(second > 0) {
                second--;
            } else {
                second = 59;
                if(minute > 0) minute--;
                else {
                    minute = 59;
                    if(hour > 0) hour--;
                    // si segundo = 0, minuto = 0 y hora = 0,
                    // cancelamos el timer
                    else {
                        isTimerRunning = false;
                        timer.cancel();
                        timer.purge();
                    }
                }
            }
            if(isTimerRunning)
                display.printTime(hour, minute, second);
        }
    }; // fin timertask
 
    public void start(int timeout, int interval) {
        timer.schedule(task, timeout, interval);
    }
 
} // fin clase

• Un objeto TimerTask
• Un timeout (tiempo de espera para que empiece a ejecutarse)
• Un intervalo (la tarea se ejecutará cada X tiempo)

public class TimerTest {
 
    public static void main(String[] args) {
        Timeout timeout = new Timeout();
        timeout.start(0, 1000);
    }
}

javac Display.java
javac Timeout.java
javac TimerTest.java
 
java TimerTest

• @PostConstruct: un método anotado con esta anotación es llamado inmediatamente después que el contenedor haya inyectado el bean (instanciado).
• @PreDestroy: un método anotado con esta anotación es llamado justo antes que el recolector de basura elimine el bean.

public class BankLoan {
    @Inject
    private AccountChecker accountChecker;
    private Date dateOfLoan;
 
    @PostConstruct
    private void initializeDate() {
        dateOfLoan = new Date();
    }
}

• No debe ser una interna no estática.
• Tiene un constructor por defecto sin parámetros o debe declarar un constructor anotando @Inject.
• Es una clase concreta (no debe extender) o  es anotada con @Decorator

public class CDStore {
    private CreditCard creditCard;
 
    public CDStore() {
        creditCard = new Visa();
    }
    public void buyItems() {
        // pagar con la tarjeta
	  creditCard.pay();
    }
}

public class CDStore {
    private CreditCard creditCard;
 
    public CDStore(CreditCard creditCard) {
        this.creditCard = creditCard;
    }
    ...
}

CDStore cdStore = new CDStore(new MasterCard());

public class CDStore {
    @Inject
    private CreditCard creditCard;
 
    public void buyItems() {
        creditCard.pay();
    }
    ...
}

public class Visa implements CreditCard {
    @Override
    public void pay() {
         // logica de negocio
    }
}

• Por propiedad:

@Inject
	private CreditCard creditCard;

• Por constructor:

@Inject
         private CDStore (CreditCard creditCard) {
             this.creditCard = creditCard;
        }

• Por setter:

@Inject
        public void setCreditCard(CreditCard creditCard) {
            this.creditCard = creditCard;
        }

@Inject
private CreditCard creditCard;

@Inject @Default
private CreditCard creditCard;

@Qualifier
@Retention(RUNTIME)
@Target({FIELD, TYPE, PARAMETER, METHOD})
public @interface MasterCardPay {}

@MasterCardPay
public class MasterCard implements CreditCard {
    private Logger logger = Logger.getLogger(MasterCard.class.getName());
 
    @Override
    public void pay() {
        logger.log(Level.INFO, "Pagando con MasterCard");
    }
}

• SOURCE: la anotación será visible en el código fuente, una vez que se compila la aplicación, es descartada. La anotación no será escrita en bytecode. Por ejemplo, @Override.
• CLASS: La anotación se descarta durante la carga de la clase por parte del ClassLoader. Sí se escribe en bytecode.
• RUTNIME: No se descarta. Ésta anotación estará siempre disponible por reflection en tiempo de ejecución.

• ElementType.ANNOTATION_TYPE
• ElementType.CONSTRUCTOR
• ElementType.FIELD
• ElementType.LOCAL_VARIABLE
• ElementType.METHOD
• ElementType.PACKAGE
• ElementType.PARAMETER
• ElementType.TYPE

public class CDStoreWithQualifier {
    @Inject @MasterCardPay
    private CreditCard masterCard;
 
    public void buyItems() {
        masterCard.pay();
    }
}

@Inject @Visa @Gold
private CreditCard creditCard;

• @Produces: utilizada para producir un bean listo para inyección.
• @CDSerialPrefix: anotación propia.
• @RandomNumber: anotación propia.

@Retention(RUNTIME)
@Target({FIELD, TYPE, PARAMETER, METHOD})
public @interface CDSerialPrefix { }

@Retention(RUNTIME)
@Target({FIELD, TYPE, PARAMETER, METHOD})
public @interface RandomNumber { }

public class CDSerialProducer {
    @Produces @CDSerialPrefix
    private final String prefix = "T9-SK534";
 
    @Produces @RandomNumber
    public int generateNumber() {
        return new Random().nextInt(10000);
    }
}

public class CDService {
    @Inject @CDSerialPrefix
    private String prefix;
    @Inject @RandomNumber
    private int number;
    private Logger logger = Logger.getLogger(getClass().getName());
 
    public void createCD() {
        logger.log(Level.INFO, "Creando CD con serial: {0}", (prefix + number));
    }
}

Logger logger = Logger.getLogger(TuClase.class.getName());

public class LoggerProducer {
    @Produces
    private Logger createLogger(InyectionPoint ip) {
        return Logger.getLogger(ip.getMember().getDeclaringClass().getName());
    }
}

@Inject Logger log;

public class DerbyJdbcProducer {
    private final static String DRIVER = "org.apache.derby.jdbc.EmbeddedDriver";
    private final static String URL = "jdbc:derby://localhost:1527/CDI";
    private final static String USER = "duke";
    private final static String PASS = "1234";
    @Inject
    private Logger logger;
 
    @Produces
    public Connection createConnection() {
        Connection con = null;
        try {
            Class.forName(DRIVER).newInstance();
            con = DriverManager.getConnection(URL, USER, PASS);
            logger.log(Level.INFO, "Creando conexión JDBC con Derby");
        } catch(InstantiationException | IllegalAccessException |
                ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }
        return con;
    }
    public void closeConnection(@Disposes Connection con) {
        try {
            con.close();
            logger.log(Level.INFO, "Cerrando conexión JDBC con Derby");
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

• Application scope(@ApplicationScoped): Se extiende por la duración entera de una aplicación. El bean es creado solo una vez por duración de la aplicación y es descartado cuando la aplicación se apaga. Este alcance es util para cases utilitarias o helpers, u objetos que guardan datos compartidos por la aplicación entera (pero deberías ser cuidadoso con los problemas de concurrencia cuando los datos tienen que ser accesados por muchos threads).
• Session scope(@SessionScoped): Se extiene a través de muchas peticiones HTTP o muchas invocaciones de métodos por una sola sesión de usuario. El bean es creado por la duración de una sesión HTTP y es descartado cuando la sesión termina. Este ámbito es para objectos que son necesarios a lo largo de la sesión como preferencias de usuario o credenciales de login.
• Request scope(@RequestScoped): Corresponde a una simple petición HTTP o a una invocación de un método. El bean es creado para la duración de una invocación a un métod y es descartado cuando el método termina. Esto es usado para clases de servicio o beans JSF que son solo necesitados durante la duración de una petición HTTP.
• Conversation scope(@ConversationScoped): Se extiende entre múltiples invocaciones dentro de los límites de una sesión con puntos de inicio y fin determinados por la aplicación. Este alcance es usado a través de múltiples páginas como parte de un flujo de trabajo de múltiplos pasos.
• Dependent pseudo-scope(@Dependent): El ciclo de vida es el mismo que del cliente. Un bean @Dependent es creado cada vez que este es injectado y la referencia es eliminada cuando el objetivo de la inyección es eliminado. Éste es el alcance por defecto para CDI.

@Named
@ConversationScoped
public class UserRegistrationWizard implements Serializable {
    @Inject
    private Conversation conversation;
    @Inject
    private User user;
    @Inject
    private transient Logger logger;
 
    @PostConstruct
    public void init() {
        conversation.begin();
    }
    public User getUser() {
        return user;
    }
    public void register() {
        conversation.end();
        logger.log(Level.INFO, "Usuario registrado:");
        logger.log(Level.INFO, "Email: {0}", user.getEmail());
        logger.log(Level.INFO, "Password: {0}", user.getPassword());
        logger.log(Level.INFO, "Fecha Nacimiento: {0}", user.getBirthDate());
    }
}

<h3>Inicio de registro</h3>
        <h:form>
            <h:outputLabel for="email" value="Email:"/>
            <h:inputText id="email" value="#{userRegistrationWizard.user.email}"/>
            <h:commandButton value="Siguiente" action="step2"/>
        </h:form>

<h3>Paso 2</h3>
        <h:form>
            <h:outputLabel for="password" value="Contraseña"/>
            <h:inputSecret id="password" value="#{userRegistrationWizard.user.password}"/>
            <h:commandButton value="Siguiente" action="end"/>
        </h:form>

<h3>Paso 3</h3>
        <h:form>
            <h:outputLabel for="birthDate" value="F. Nacimiento:"/>
            <h:inputText id="birthDate" value="#{userRegistrationWizard.user.birthDate}">
                <f:convertDateTime pattern="dd-MM-yyyy"/>
            </h:inputText>
            <h:commandButton value="Registrar" action="#{userRegistrationWizard.register()}">
                <f:ajax execute="@form" />
            </h:commandButton>
        </h:form>

• Interceptores a nivel de constructor: el interceptor es asociado con un constructor de la clase objetivo (@AroundConstruct)
• Interceptores a nivel  de método: el interceptor es asociado con un método de negocio específico (@AroundInovke)
• Interceptores por tiempo límite: el interceptor se interpone en el tiempo límite de los métodos (@AroundTimeout (usado solo con EJB timer)
• Interceptores de ciclo de vida: el interceptor se interpone en las llamadas de eventos del ciclo de vida del objetivo (@PostConstruct y @PreDestroy).

@AroundInvoke
Object <Método> (InvocationContext ic) throws Exception;

• El método puede tener cualquier modificador de visibilidad pero no debe ser static o final.
• El método debe tener un parámeto InvocationContext y debe retornar Object, el cual es el resultado del método objetivo invocado.
• El método debe lanzar una excepción comprobada.
• El objeto InvocationContext permite a los interceptores controlar el comportamiento de la cadena de invocaciones. Si muchos interceptores son encadenados, la misma instancia de InvocationContext es pasada a cada interceptor, quien puede agregar datos contextuales para ser procesador por otros interceptores.

@Interceptors(MisInterceptores.class)
public class MiClase { ... }

@Interceptors(MisInterceptores.class)
public void doSomething() { ... }

public class LoginInterceptor {
    private @Inject Logger logger;
 
    @AroundConstruct
    private Object init(InvocationContext ic) throws Exception {
        logger.log(Level.INFO, "--- ConstructInterceptor ---");
        logger.log(Level.INFO, "Entrando al constructor");
        try {
            return ic.proceed();
        } finally {
            logger.log(Level.INFO, "Saliendo del constructor");
        }
    }
    @AroundInvoke
    private Object interceptMethod(InvocationContext ic) throws Exception {
        logger.entering(ic.getTarget().toString(), ic.getMethod().getName());
        try {
            logger.log(Level.INFO, "método interceptado");
            return ic.proceed();
        } finally {
            logger.exiting(ic.getTarget().toString(), ic.getMethod().getName());
        }
    }   
}

@Interceptors(LoginInterceptor.class)
public class LoginService {
    private @Inject Logger logger;
 
    public void login() {
        logger.log(Level.INFO, "Haciendo login");
    }
}

@Interceptors(LoginInterceptor.class, AccountcheckerInterceptor.class)
public class LoginService { ... }

@InterceptorBinding
@Retention(RUNTIME)
@Target({METHOD, TYPE})
public @interface Loggable { }

@Interceptor
@Loggable
public class LoginInterceptorBinding { ... }

public class LoginServiceBinding {
    @Loggable
    public void Login() {
        ...
    }
}

<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
       http://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"
       bean-discovery-mode="all">
    <interceptors>
        <class>com.acme.interceptors.binding.LoginInterceptorBinding</class>
    </interceptors>
</beans>

@Interceptor
@CdDisponibility
@Priority(200)
public class CdDisponibilityInterceptor {
    @Inject
    private Logger logger;
 
    @AroundInvoke
    public Object checkCdDisponibility(InvocationContext ic) throws Exception {
        try {
            logger.log(Level.INFO, "Ejecuando método interceptor checkCdDisponibility");
            return ic.proceed();
        } finally {
            logger.log(Level.INFO, "Terminando ejecución método interceptor checkCdDisponibility");
        }
    }
}

@Interceptor
@DvdDisponibility
@Priority(300)
public class DvdDisponibilityInterceptor {
    @Inject
    private Logger logger;
 
    @AroundInvoke
    public Object checkDvdDisponibility(InvocationContext ic) throws Exception {
        try {
            logger.log(Level.INFO, "Ejecutando método interceptor checkDvdDisponibility");
            return ic.proceed();
        } finally {
            logger.log(Level.INFO, "Terminando ejecución del método interceptor checkDvdDisponibility");
        }
    }
}

@CdDisponibility @DvdDisponibility
public class SellService {
    public void checkDisponibility() {
        ...
    }
}

Información:   Ejecuando método interceptor checkCdDisponibility
Información:   Ejecutando método interceptor checkDvdDisponibility
Información:   Terminando ejecución del método interceptor checkDvdDisponibility
Información:   Terminando ejecución método interceptor checkCdDisponibility

public interface Membership {
    public int freeCDs();
}

@Basic
public class BasicMembership implements Membership {
    @Inject
    private Logger logger;
 
    @Override
    public int freeCDs() {
        logger.log(Level.INFO, "[+] Clase BasicMembership");
        logger.log(Level.INFO, "Gratis 15 CDs");
        return 15;
    }
}

@Qualifier
@Retention(RUNTIME)
@Target({FIELD, TYPE, METHOD, PARAMETER})
public @interface Basic { }

@Decorator
public class MembershipGiftDecorator implements Membership {
    @Inject @Delegate @Basic
    private Membership membership;
    @Inject
    private Logger logger;
 
    public int orderGift() {
        logger.log(Level.INFO, "[+] Clase decoradora para Membership");
        logger.log(Level.INFO, "Regalo momentáneo de 25 CDs");
        return membership.freeCDs() + 25;
    }
    @Override
    public int freeCDs() {
        return orderGift();
    }
}

@Named
public class MembershipBean {
    @Inject @Basic
    private Membership gift;
 
    public void orderGift() {
        gift.freeCDs();
    }
}

Información:   [+] Clase decoradora para Membership
Información:   Regalo momentáneo de 25 CDs
Información:   [+] Clase BasicMembership
Información:   Gratis 15 CDs

<decorators>
        <class>com.acme.decorator.MembershipGiftDecorator</class>
</decorators>

@Named("cdShopCart")
@RequestScoped
public class CDShopCart {
    @Inject
    private Event<CD> cdAddedEvent;
 
    public void addItem2cart() {
        List<String> songs = new ArrayList<>();
        Collections.addAll(songs,
                "The day that never comes",
                "Enter Sandman",
                "The fourth horseman",
                "Whiskey in the jar");
        CD cd = new CD("Metallica", songs);
        cdAddedEvent.fire(cd);
    }
}

@SessionScoped
public class Cart implements Serializable {
    @Inject
    private transient Logger logger;
    private List<CD> items;
 
    @PostConstruct
    public void init() {
        items = new ArrayList<>();
    }
 
    public void addItem(@Observes CD cd) {
        logger.log(Level.INFO, "Nuevo CD añadido al carro");
        logger.log(Level.INFO, "Autor: {0}", cd.getAuthor());
        logger.log(Level.INFO, "Canciones:");
        for(String song : cd.getSongs()) {
            logger.log(Level.INFO, song);
        }
    }
}

<h:form>
            <h:commandButton value="Agregar CD al carro" actionListener="#{cdShopCart.addItem2cart()}">
                <f:ajax execute="@form"/>
            </h:commandButton>
        </h:form>

Información:   Nuevo CD añadido al carro
Información:   Autor: Metallica
Información:   Canciones:
Información:   The day that never comes
Información:   Enter Sandman
Información:   The fourth horseman
Información:   Whiskey in the jar

@Named("cdShopCart")
@SessionScoped
public class CDShopCart implements Serializable {
    @Inject @Added
    private Event<CD> cdAddedEvent;
    @Inject @Removed
    private Event<CD> cdRemovedEvent;
    @Inject
    private CD cd;
 
    public void addItem2cart() {
        List<String> songs = new ArrayList<>();
        Collections.addAll(songs,
                "The day that never comes",
                "Enter Sandman",
                "The fourth horseman",
                "Whiskey in the jar");
        cd.setAuthor("Metallica");
        cd.setSongs(songs);
        cdAddedEvent.fire(cd);
    }
    public void removeItemFromCart() {
        cdRemovedEvent.fire(cd);
    }
}

public void addItem(@Observes @Added CD cd) {
        logger.log(Level.INFO, "Nuevo CD añadido al carro");
        logger.log(Level.INFO, "Autor: {0}", cd.getAuthor());
        logger.log(Level.INFO, "Canciones:");
        for(String song : cd.getSongs()) {
            logger.log(Level.INFO, song);
        }
    }
    public void removeItem(@Observes @Removed CD cd) {
        logger.log(Level.INFO, "CD Removido");
        logger.log(Level.INFO, "Autor: {0}", cd.getAuthor());
    }

<h:form>
            <h:commandButton value="Agregar CD al carro" action="#{cdShopCart.addItem2cart()}">
                <f:ajax execute="@form"/>
            </h:commandButton>
            <h:commandButton value="Eliminar CD del carro" action="#{cdShopCart.removeItemFromCart()}">
                <f:ajax execute="@form"/>
            </h:commandButton>
        </h:form>

<h1>Subir archivos</h1>
    <form method="post" action="upload" enctype="multipart/form-data">
    <fieldset>
    	<legend>Formulario de subida</legend>
    	<input type="file" name="files" id="files" multiple/>
        <button type="submit">Subir</button>	
    </fieldset>
</form>

@WebServlet(name = "UploadServlet", urlPatterns = {"/upload"})
@MultipartConfig(location="D:/uploads")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        Collection<Part> parts = request.getParts();
        for(Part part : parts) {
        	part.write(getFileName(part));
        }
    }
 
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
 
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
 
    public String getFileName(Part part) {
        String contentHeader = part.getHeader("content-disposition");
        String[] subHeaders = contentHeader.split(";");
        for(String current : subHeaders) {
            if(current.trim().startsWith("filename")) {
            	int pos = current.indexOf('=');
                String fileName = current.substring(pos+1);
                return fileName.replace("\"", "");
            }
        }
        return null;
    }
}

------WebKitFormBoundaryKZUc66kZeBth3nDc
Content-Disposition: form-data; name="files"; filename="jsf-scopes.png"
Content-Type: image/png
 
 
------WebKitFormBoundaryKZUc66kZeBth3nDc
Content-Disposition: form-data; name="files"; filename="navbar.png"
Content-Type: image/png

public String getFileName(Part part) {
        String contentHeader = part.getHeader("content-disposition");
        String[] subHeaders = contentHeader.split(";");
        for(String current : subHeaders) {
            if(current.trim().startsWith("filename")) {
            	int pos = current.indexOf('=');
                String fileName = current.substring(pos+1);
                return fileName.replace("\"", "");
            }
        }
        return null;
    }

• form-data
• name
• filename

part.write(getFileName(part));

• Necesitaremos importar fontawesome y nornalize.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/vendor/normalize.css"/>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="css/main.css"/>
	<title>Login</title>
</head>
<body>
	<section class="main">
		<form id="loginFrm" class="form">
			<figure class="tooltip"></figure>
			<section class="form-head">
				<span>Login</span>
				<figure class="logo"></figure>
			</section>
			<section class="form-body">
				<div class="group">
					<label for="user">Email:</label>
					<input type="text" id="user" class="txt">
				</div>
				<div class="group">
					<label for="pass">Password:</label>
					<input type="password" id="pass" class="txt">
				</div>
				<div class="group flex-end">
					<button type="submit" id="login" class="btn btn-radical">login</button>
				</div>	
			</section>
		</form>
	</section>
	<script>
		'use strict';
		window.addEventListener('load', function() {
			let main = document.querySelector('.main');
			main.classList.add('visible');
		});
	</script>
	<script src="js/auth.js"></script>
</body>
</html>

• form-head: Aquí tendremos el título del form y el pin (el círculo con el ícono de un usuario).
• form-body: Aquí tendremos todos los grupos (label/inputs) y botones.

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

.main {
	align-items: center;
	background: rgba(136,211,124,1);
	background: linear-gradient(to bottom, rgba(136,211,124,1) 0%,
		rgba(136,211,124,1) 50%,
		rgba(190,144,212,1) 51%,
		rgba(190,144,212,1) 71%,
		rgba(190,144,212,1) 100%);
	background-repeat: repeat;
	display: flex;
	height: 100vh;
	justify-content: center;
	opacity: 0;
	transition: all .2s linear;
	visibility: hidden;
}
.main.visible {
	opacity: 1;
	visibility: visible;
}

.form {
	background-color: #f7f7f7;
	border: none;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0,0,0,.25),
	0 -1px 5px rgba(0,0,0,.1);
	position: relative;
	width: 350px;
}

.form-head {
	align-items: center;
	border-radius: 2px 2px 0 0;
	border-bottom: 2px solid #9B59B6;
	display: flex;
	height: 45px;
}
.form-head > span {
	color: #555;
	font-family: 'segoe ui';
	font-size: 17pt;
	font-weight: lighter;
	margin-left: 12px;
}

.form-head .logo {
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('http://urbita.com/img/default/default_user_256.png');
	background-size: cover;
	border-radius: 100%;
	box-shadow: 0px 2px 5px rgba(0,0,0,.25);
	height: 85px;
	left: calc(50% - 38.5px);
	margin: 0px;
	position: absolute;
	top: calc(0% - 38.5px);
	width: 85px;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(1800deg); }
}

.form-head .logo.auth {
	animation-name: spin;
	animation-duration: 3000ms;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-play-state: running;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}

.form-body {
	padding: 40px 25px 10px 25px;
}
.group {
	align-items: center;
	display: flex;
	margin-bottom: 10px;
}
.group > label {
	color: #777;
	display: block;
	flex-grow: 1;
	font-family: 'segoe ui';
}

.flex-end {
	justify-content: flex-end;
}
.flex-abs-center {
	align-items: center;
	justify-content: center;
}

.txt {
	border: 1px solid #ddd;
	border-radius: 2px;
	color: #777;
	font-family: 'segoe ui';
	font-size: .9rem;
	outline: none;
	padding: .35rem .5rem;
	transition: all .2s ease;
}
.txt.invalid {
	border-color: rgba(231,76,60,.7);
}
.txt:hover {
	border-color: #ccc;
}
.txt:focus {
	border-color: #bbb;
}
 

.btn {
	border: none;
	border-radius: 2px;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
	font-family: 'segoe ui';
	font-size: .9rem;
	outline: none;
	padding: .45rem 1.25rem;
	text-transform: uppercase;
	transition: all .3s ease;
}
.btn-radical {
	background-color: #F62459;
	color: rgba(255,255,255,.9);
	margin-top: 15px;
}
.btn-radical:hover {
	background-color: #DC1F4E;
}

.form .tooltip {
	background-color: rgba(0,0,0,.5);
	border-radius: 5px;
	box-shadow: 0px 2px 5px rgba(0,0,0,.25);
	color: rgba(255,255,255,.8);
	font-family: 'segoe ui';
	font-size: .9rem;
	height: 100px;
	left: calc(100% - 35px);
	margin: 0;
	padding: .7rem .6rem;
	opacity: 0;
	position: absolute;
	text-align: center;
	top: -140%;
	transition: all .4s ease-in;
	visibility: hidden;
	width: 200px;
}

.form .tooltip:before {
	border-color: rgba(0,0,0,.5) transparent;
	border-style: solid;
	border-width: 10px 10px 0px 10px;
	content: "";
	left: 10px;
	position: absolute;
	bottom: -10px;
}[/coder]
 
Por último, para hacerlo visible, aplicaremos una clase:
 
[code=css]
.form .tooltip.visible {
	opacity: 1;
	top: -50%;
	visibility: visible;
}

'use strict';
document.addEventListener('DOMContentLoaded', function() {
	let loginFrm = document.querySelector('#loginFrm');
 
	loginFrm.addEventListener('submit', function(e) {
		e.preventDefault();
 
		const ANIMATION_TIMEOUT = 3000; // duration of logo animation
		let logo = document.querySelector('.logo');
		let user = document.querySelector('#user').value.toLowerCase();
		let pass = document.querySelector('#pass').value;
 
		// if logo already is animated, the info is already processing
		if(logo.classList.contains('auth')) {
			return false;
		}
 
		logo.classList.add('auth'); // start animation
 
		// check credentials
		if(user == 'john.doe@gmail.com' && pass == 'abc123') {
			window.setTimeout(function() {
				sessionStorage.setItem('full_access', false);
				window.location.href = 'views/home.html';
			}, ANIMATION_TIMEOUT);
		} else {
			window.setTimeout(function() {
				logo.classList.remove('auth'); // remove animation of logo
				showTooltip();	
			}, ANIMATION_TIMEOUT);
		}
	});
 
	// show and hide tooltip
	function showTooltip() {
		let tooltip = loginFrm.querySelector('.tooltip');
		tooltip.textContent = 'El email o contraseña ingresados no son correctos. Verifique e inténtelo nuevamente.';
		tooltip.classList.add('visible');
		// after 4 seconds, the tooltip disappear
		window.setTimeout(function() {
			tooltip.classList.remove('visible');
		}, 4000);
	}
}); // end script

'use strict';
window.addEventListener('load', function() {
	let main = document.querySelector('.main');
	main.classList.add('visible');
});

• Normalize.css requerido
• Prefixfree requerido

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../css/vendor/normalize.css"/>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="../css/home.css"/>
	<script src="js/vendor/prefixfree.min.js"></script>
	<title>Home page</title>
</head>
<body>
	<section class="preload"><i class="fa fa-4x fa-circle-o-notch fa-spin"></i></section>
	<section class="main">
		<header>
			<nav class="navbar">
				<!-- brand -->
				<a href="#" class="brand">Oh yeah!<i class="fa fa-2x fa-hand-o-right"></i></a>
				<!-- menu -->
				<ul class="menu">
					<li><a href="#">Messages<i class="fa fa-envelope"></i></a></li>
					<li>
						<a href="#">John doe<i class="fa fa-caret-down"></i></a>
						<ul>
								<li><a href="#" id="profile-img">
									<img src="http://i.imgur.com/IxWfQy2.jpg"/></a>
								</li>
								<li><a href="#">Profile<i class="fa fa-user"></i></a></li>
								<li><a href="#">Settings<i class="fa fa-cog"></i></a></li>
								<li><a href="#" id="logout">Logout<i class="fa fa-sign-out"></i></a></li>
							</ul>
					</li>
				</ul>
			</nav>
		</header>
	</section>
	<script src="js/homeui.js"></script>
</body>
</html>

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.preload {
	align-items: center;
	background-color: #F22613;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: all .5s ease;
	visibility: hidden;
	width: 100%;
	z-index: 1;
}
.preload.visible {
	opacity: 1;
	visibility: visible;
}
.preload i {
	color: rgba(255,255,255,.9);
}

.main {
	opacity: 0;
	transition: all .6s ease;
	visibility: hidden;
}
.main.visible {
	opacity: 1;
	visibility: visible;
}

header {
	background-color: #22A7F0;
	color: rgba(255,255,255,.9);
	display: block;
}
.navbar {
	align-items: center;
	color: inherit;
	display: flex;
	justify-content: space-between;
	margin: 0px;
	padding: 0 .5rem;
	width: 100%;
}

.brand {
	align-self: stretch;
	align-items: center;
	color: inherit;
	display: flex;
	font-family: 'segoe ui';
	margin: 0px;
	padding: 0 .25rem;
}
.brand > i {
	margin-left: .8rem;
}

.navbar ul {
	display: block;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.navbar > .menu {
	display: block;
}
.menu > li {
	display: inline-block;
	transition: all .1s ease-in;
}
.menu > li:hover {
	background-color: #1C99DD;
}

.menu > li > a {
	display: block;
	padding: 1rem .5rem;
}
.menu > li > a > i {
	margin-left: 10px;
}
.menu > li:not(:last-of-type) {
	margin: 0 55px 0 0;
}

/* last li (profile dropdown) */
.menu > li:last-of-type {
	position: relative;
}
/* dropdown */
.menu > li:last-of-type > ul {
	background-color: #22A7F0;
	border-radius: .1725rem;
	left: -50%;
	opcity: 0;
	padding: .5rem 0;
	position: absolute;
	top: 170%;
	visibility: hidden;
	transition: all .14s ease-in;
}
/* arrow of menu */
.menu > li:last-of-type > ul:after {
	border-color: #22A7F0 transparent;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	content: "";
	position: absolute;
	right: 8px;
	top: -7px;
}
.menu > li:last-of-type:hover > ul {
	opacity: 1;
	top: 130%;
	visibility: visible;
}
 

/* dropdown list items*/
.menu > li:last-of-type > ul > li, .menu > li:last-of-type > ul a {
	display: block;
	font-size: .9rem;
	transition: transform .1s ease-in;
}
/* dropdown options */
.menu > li:last-of-type > ul a {
	padding: .5rem .9rem;
	width: 8rem;
}
/* a elements of dropdown options */
.menu > li:last-of-type > ul li:hover {
	background-color: #1998DC;
}
/* margin left to dropdown icon */
.menu > li:last-of-type > a > i {
	margin-left: .8rem;
}
/* dropdown options icons */
.menu li:last-of-type > ul a > i {
	float: right;
	margin-top: .3125rem;
}

/* profile image */
#profile-img {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
	pointer-events: none;
	width: 100%;
}
#profile-img > img {
	background-position: center;
	background-size: cover;
	border-radius: 50%;
	display: block;
	height: 5rem;
	width: 5rem;
}

'use strict';
window.addEventListener('load', function() {
	let full_access = sessionStorage.getItem('full_access');
	let preload = document.querySelector('.preload');
	let main = document.querySelector('.main');
	// full_access is gived when user enter for first time
	if(full_access == "false") {
		// show preload animation
		preload.classList.add('visible');
		// animation delay 3s. After that, the main content appear
		window.setTimeout(function() {
			preload.classList.remove('visible');
			main.classList.add('visible');
		},3000);
		// change the flag. Now, the user has full access
		sessionStorage.setItem('full_access', true);
	}
	// if user has full_access, just show the page
	else {
		main.classList.add('visible');
	}
});
document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('#logout').addEventListener('click', function(e) {
		e.preventDefault();
		// remove user's session
		sessionStorage.removeItem('full_access');
		// redirect to login
		window.location.href = '/PreloadCSS';
	});
});

• Diversidad de colores.
• Grosor del pincel entre 1 y 30.
• Borrador.
• Limpiador de lienzo (full clean).
• Responsivo.

• JAXB
• JAX-RS (implementación corre por servidor)
• Jersey client (para el cliente REST)
• JPA 2.1 (persistencia de datos)
• Hibernate 4.x (implementación de JPA 2.1)
• PostgreSQL 9.4.1 como SGBD
• WildFly 8.2.0

<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-core</artifactId>
    <version>4.3.5.Final</version>
</dependency>
 
<dependency>
    <groupId>org.hibernate</groupId>
    <artifactId>hibernate-entitymanager</artifactId>
    <version>4.3.5.Final</version>
</dependency>

• Un párrafo en la parte superior donde se informe que antes de publicar un nuevo tema, es recomendable buscar en el foro temas iguales o parecidos que puedan ayudar con su problema para así, evitar redundancia.
• Abajo del párrafo un buscador con autocompletado de búsqueda para que el usuario pueda ver los resultados de la búsqueda en tiempo real y no tener que salir de la página de confirmación. Bastante sencillo de hacer con AJAX.
• Abajo un texto que diga: He buscado y no he encontrado temas parecidos junto con un checkbox para confirmar y que se active un botón llamado Proceder, el cual lo llevará a el formulario de pregunta normal.
  
  
  Creo que así se evitarían muchos temas duplicados y preguntas rompe cojones como "¿Cómo ser hacker?" o "¿Qué lenguaje de programación aprender?"
  
  En caso el usuario no busque y cree adrede un tema duplicado creo que los mods no tendrán ningún inconveniente para pedir un ban temporal para el usuario.
  
  
  Un saludo.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8"/>
	<title>Identfíquese</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="assets/css/login.css"/>
</head>
<body>
	<div id="flogin" class="flogin">
        <section class="left-side">
            <section class="head">
                LOGIN
            </section>
            <section class="body">
                <section class="data">
                    <section class="form-group">
                        <span>Usuario:</span>
                        <section class="input-wrapper">
                            <input type="text" id="txt-username" class="txt"/>
                            <i class="fa fa-user"></i>
                        </section>
                    </section>
                    <section class="form-group">
                        <span>Contraseña:</span>
                        <section class="input-wrapper">
                            <input type="password" id="txt-password" class="txt"/>
                            <i class="fa fa-key"></i>
                        </section>
                    </section>
                </section>
                <section class="help">
                    <a href="">¿Olvidaste tu usuario o contraseña?</a>
                </section>
            </section>
        </section>
        <section id="btn-login" class="right-side">
            <i class="fa-4x fa fa-arrow-right"></i>
            <span>IR</span>
        </section>
    </div>
 
</body>
</html>

.flogin {
    display: flex;
    justify-content: space-between;
    width: 400px;
}
.flogin > .left-side {
    background-color: #363636;
    /*background: radial-gradient(#555, #363636, #363636);*/
    box-shadow: 0px 0px 20px 20px #2e2e2e inset;
    border: 9px solid #dedede;
    border-right: none;
    border-radius: 20px 0px 0px 20px;
    width: 80%;
}
.flogin  > .right-side {
    align-items: center;
    background-color: #34B5D5;
    border: 9px solid #dedede;
    border-left: none;
    border-radius: 0px 20px 20px 0px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 1.3rem .2rem;
    width: calc(20% - 2*.2rem - 9px);
}
.flogin > .right-side:hover {
    cursor: pointer;
}
 
/*********************
      LEFT SIDE
*********************/
.left-side > .head {
    border-bottom: 2px dashed #ddd;
    color: #eee;
    font-family: "segoe ui";
    margin-bottom: 20px;
    padding: .75rem 1rem;
}
.left-side > .body {
    padding: .8rem 1.35rem;
    width: calc(100% * 2*1.35rem);
}
.body > .data {
    display: flex;
    justify-content: space-between;
}
.form-group {
    width: 45%;
}
.form-group > span {
    color: #ddd;
    display: block;
    font-family: "segoe ui";
    font-size: 10pt;
    margin-bottom: 7px;
}
.form-group > .input-wrapper {
    align-items: center;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 2px 5px 1px rgba(0,0,0,.4) inset,
        0px -1px 2px 1px rgba(0,0,0,.25) inset;
    display: flex;
    justify-content: space-between;
}
.input-wrapper > .txt {
    width: 80%;
}
.input-wrapper > i {
    color: gold;
    width: 20%;
}
.txt {
    background-color: transparent;
    border: none;
    border-radius: 5px;
    padding: .4rem .25rem;
    width: calc(80% - 2*.35rem - 2*1px);
}
.txt:focus {
    outline: none;
}
.help {
    display: flex;
    justify-content: flex-end;
}
 
a {
    color: #ddd;
    display: block;
    font-family: "segoe ui";
    font-size: 10pt;
    font-style: italic;
    margin-top: 20px;
    text-align: right;
    text-decoration: none;
}
 
/*****************
    RIGHT SIDE
*****************/
.right-side > i {
    color: #fff;
    display: block;
}
.right-side > span {
    color: #fff;
    display: block;
    font-family: "segoe ui";
    font-size: 16pt;
}