vick

html5 video+css (chrome)

Berikut adalah bentuk video yang tak biasa @.@. Silahkan mencoba ?..

• tag video

  <video id="video-css">
      <source src="video.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
    </video>

• css style

  #video-css {
    -moz-transition: all 0.3s ease-out;  /* FF3.7+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5 */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */ 
  }
  #video-css.enhanced {
    border: 1px solid white;
    
    -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
    -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
    -moz-transform: translate(0, -10px);  /* FF3.5+ */
    -o-transform: translate(0, -10px);  /* Opera 10.5 */
    -webkit-transform: translate(0, -10px);  /* Saf3.1+, Chrome */ 
  }

• javascript / eventlistener

  <script>
      (function() {
        var video_css = document.querySelector('#video-css');
        video_css.addEventListener('mouseover', function() {
          this.className = 'enhanced';
          this.play();
        }, false);
        video_css.addEventListener('mouseout', function() {
      this.pause();
          this.className = '';
        }, false);
      }
    )();    
    </script>

 

Good Luck :)

create webapp spring maven

1. Langkah pertama create new maven project
2. ubah pom.xml sehingga menjadi seperti ini:

   <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.mervpolis.vick</groupId>
     <artifactId>springmaven</artifactId>
     <packaging>war</packaging>
     <version>1.0-SNAPSHOT</version>
     <name>springmaven Maven Webapp</name>
     <url>http://maven.apache.org</url>
     <dependencies>
     
     <!-- Servlet -->
       <dependency>
         <groupId>javax.servlet</groupId>
           <artifactId>servlet-api</artifactId>
           <version>2.5</version>
           <scope>provided</scope>
       </dependency>
       <dependency>
       <groupId>javax.servlet.jsp</groupId>
       <artifactId>jsp-api</artifactId>
       <version>2.1</version>
       <scope>provided</scope>
     </dependency>
     <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>jstl</artifactId>
       <version>1.2</version>
       </dependency>
     
       <dependency>
           <groupId>junit</groupId>
           <artifactId>junit</artifactId>
           <version>3.8.1</version>
           <scope>test</scope>
       </dependency>
       
       <!-- Spring dependencies -->
       <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-beans</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-core</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-web</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context-support</artifactId>
         <version>3.0.2.RELEASE</version>
     </dependency>
   <!--  Velocity viewer -->
     <dependency>
       <groupId>org.apache.velocity</groupId>
       <artifactId>velocity</artifactId>
       <version>1.6.3</version>
     </dependency>
     <dependency>
         <groupId>taglibs</groupId>
         <artifactId>standard</artifactId>
         <version>1.1.2</version>
     </dependency> 
     </dependencies>
     <build>
     
       <finalName>springmaven</finalName>
     </build>
   </project>
   

3. ubah web.xml sehinggal seperti berikut:

   <?xml version="1.0" encoding="UTF-8"?>
   <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xmlns="http://java.sun.com/xml/ns/javaee" 
        xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
     <display-name>Archetype Created Web Application</display-name>
     <context-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>WEB-INF/applicationContext.xml</param-value>
     </context-param>
     <listener>
       <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
     </listener>
     <servlet>
       <servlet-name>dispatcher</servlet-name>
       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
       <load-on-startup>1</load-on-startup>
     </servlet>
     <servlet-mapping>
       <servlet-name>dispatcher</servlet-name>
       <url-pattern>/*</url-pattern>
     </servlet-mapping>
   </web-app>
   

4. buat dispatcher-servlet.xml pada WEB-INF

   <?xml version="1.0" encoding="UTF-8"?>
   <beans xmlns="http://www.springframework.org/schema/beans"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:p="http://www.springframework.org/schema/p"
          xmlns:context="http://www.springframework.org/schema/context"
          xsi:schemaLocation="
         http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
       
       <context:component-scan base-package="com.mervpolis.vick.springmaven.controller" />
       
         <!-- Velocity  -->
       <bean id="velocityConfig"
            class="org.springframework.web.servlet.view.velocity.VelocityConfigurer"
            p:resourceLoaderPath="/WEB-INF/velocity/"/>
       <bean id="viewResolver"
            class="org.springframework.web.servlet.view.velocity.VelocityViewResolver"
            p:cache="true"
            p:prefix=""
            p:suffix=".xhtml"/>
   </beans>

5. buat applicationContext.xml pada folder WEB-INF

   <?xml version="1.0" encoding="UTF-8"?>
   <beans xmlns="http://www.springframework.org/schema/beans"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:context="http://www.springframework.org/schema/context"
          xmlns:tx="http://www.springframework.org/schema/tx"
          xmlns:p="http://www.springframework.org/schema/p"
          xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
          http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
          http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
     <context:component-scan base-package="com.mervpolis.vick.springmaven.controller" />
       
   </beans>
   

6. Buat class Index.java pada package com.mervpolis.vick.springmaven.controller dengan isi seperti berikut:

   /**
    * 
    */
   package com.mervpolis.vick.springmaven.controller;
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   import org.springframework.stereotype.Controller;
   import org.springframework.web.bind.annotation.RequestMapping;
   import org.springframework.web.bind.annotation.RequestMethod;
   import org.springframework.web.servlet.ModelAndView;
   /**
    * @author vick
    *
    */
   @Controller
   public class Index {
     @RequestMapping(value="/",method=RequestMethod.GET)
     public ModelAndView index(HttpServletRequest request, HttpServletResponse response) {
         return new ModelAndView("index");
     }
   }
   

7. buat velocity dengan nama index.xhtml pada folder WEB-INF/velocity

   <html>
   <body>
   <h1>Spring Webapp</h1>
   </body>
   </html>

8.   klik kanan pada project-Maven-Update Dependencies
9. run on server - selesai

Create new maven project

1. create new maven project
2. Edit pom.xml sebagai berikut:

   <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.mervpolis.vick</groupId>
     <artifactId>simplewebapp</artifactId>
     <packaging>war</packaging>
     <version>1.0-SNAPSHOT</version>
     <name>simplewebapp Maven Webapp</name>
     <url>http://maven.apache.org</url>
     <dependencies>
       <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>3.8.1</version>
         <scope>test</scope>
       </dependency>
     </dependencies>
     <build>
       <finalName>simplewebapp</finalName>
     </build>
   </project>
   

3. web.xml

   <!DOCTYPE web-app PUBLIC
    "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd" >
   <web-app>
     <display-name>Archetype Created Web Application</display-name>
   </web-app>
   

4. run on server
5. hasil

Element baru pada html 5

Internet telah banyak berkembang sejak kemunculan html 4.01. Dengan munculnya html 5 yang tentunya merupakan upgrade dari html 4.01 yang muncul dengan element baru.
Element-element baru pada html 5 :

• Markup Elements

Tag	Description
<article>	Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside>	Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command>	Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details>	Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary>	Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure>	Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption>	Keterangan dari tokoh bagian
<footer>	Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header>	Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup>	Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark>	Untuk teks yang harus disorot
<meter>	Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav>	Untuk bagian navigasi
<progress>	Keadaan pekerjaan berlangsung
<ruby>	Untuk penjelasan ruby (catatan Cina atau karakter)
<rt>	Untuk penjelasan tentang penjelasan ruby
<rp>	Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section>	Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time>	Untuk menentukan waktu atau tanggal, atau keduanya

 

 

• Media Elements

Tag	Description
<audio>	Untuk konten multimedia, suara, musik atau audio lain aliran
<video>	Untuk konten video, misalnya klip video atau video lainnya stream
<source>	Untuk sumber daya media untuk elemen media, yang didefinisikan di  dalam video atau audio elemen
<embed>	Untuk konten tertanam, seperti plug-in

 

contoh:

<html>
<head>
  <title>Media Elements</title>
</head>
<body>
<video width="320" height="240" controls="controls">
  <source src=?video.mp4" type="video/mp4" />
</video>
<audio controls="controls">
  <source src="audio.ogg" type="audio/ogg" />
 </audio>
</body>
</html>

 

• The Canvas Element :menggunakan javascript untuk membuat gambar pada halaman web.

Tag	Description
<canvas>	Untuk membuat grafik dengan script

 

contoh:

<canvas id="canvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.beginPath();
cxt.fillRect(0,0,150,75);
cxt.closePath();
cxt.fill();
</script>

 

 

• Form Element

Tag	Description
<datalist>	Daftar pilihan untuk nilai input
<keygen>	Hasilkan kunci untuk mengotentikasi pengguna
<output>	Untuk berbagai jenis output, seperti output yang ditulis oleh script

 

• Input Type Attribute Values

Type	Description
tel	Nilai input nomor telepon
search	Field input adalah field pencarian
url	Nilai input URL
email	Nilai input satu atau lebih alamat email
datetime	Nilai input tanggal dan / atau waktu
date	Nilai input tanggal
month	Nilai input bulan
week	Nilai input seminggu
time	Nilai input waktu jenis
datetime-local	Nilai input adalah tanggal lokal / waktu
number	Nilai input nomor
range	Nilai input nomor dalam kisaran tertentu
color	Nilai input warna heksadesimal, seperti # FF8800

Membuat table menggunakan tag <div> dan CSS

Sebelum ada teknologi CSS( Cascading Style Sheets ), kita sering membuat tabel menggunakan html tag <table> </table>, setelah munculnya CSS kita bisa membuat tabel menggunakan html tag <div> yang dikombinasikan dengan css. Disini html tag <div> berfungsi seperti html tag <tr> dan <td> pada <table>.

• berikut contoh tabel menggunakan html tag <table> </table>

tabel.html

<!--
<html>
<body>
  <table align="center" cellspacing="0" cellpadding="0" width="300px">
    <tr  bgcolor="red"> 
      <td width="100px">No</td>
      <td width="100px">Nama</td>
      <td width="100px">Alamat</td>
    </tr>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>AA</td>
    </td>
    <tr>
      <td>2</td>
      <td>B</td>
      <td>BB</td>
    </td>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>CC</td>
    </td>
  </table>
</body>
</html>
-->

• berikut contoh tabel menggunakan <div> dan css

tablediv.html

<!--
<html>
<head>
    <link href="tablediv.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="container">
    <div id="header">
      <ul>
        <li>No</li>
        <li>Nama</li>
        <li>Alamat</li>
      </ul>
    </div>
    <div id="content">
      <ul>
        <li>1</li>
        <li>A</li>
        <li>AA</li>
      </ul>
      <ul>
        <li>2</li>
        <li>B</li>
        <li>BB</li>
      </ul>
      <ul>
        <li>3</li>
        <li>C</li>
        <li>CC</li>
      </ul>      
    </div>
  </div>
</body>
</html>
-->

tablediv.css

#container
{
 margin: 0 auto;
 width: 300px;
 background: #fff;
}
#header
{
 background: red;
 padding: 0;
}
#header ul
{
 margin: 0;
 padding: 0;
}
#header ul li
{
 list-style-type: none;
 display: inline;
 padding: 0 62px 0 0;
}
#content
{
 background: white;
 padding: 0;
}
#content ul
{
 margin: 0;
 padding: 0;
}
#content ul li
{
 list-style-type: none;
 display: inline;
 padding: 0 80px 0 0;
}

 

Hampir gak ada bedanya kan. :D
Keunggulan menggunakan hmtl tag <div> dan CSS adalah web akan lebih ringan dan lebih dinamis.
Tapi lebih rumit.

• Contoh site menggunakan CSS dan <div>

index.html

<!--
<html>
  <head><title>table div</title>
    <link href="div.css" rel="stylesheet" type="text/css" />
  </head>
<body>
  <div id="container">
    <div id="header">
      <h1>
          vick
      </h1>
    </div>
    <div id="navigation">
      <ul>
        <li><a href="#1">All</a></li>
        <li><a href="#2">Java</a></li>
        <li><a href="#3">General</a></li>
        <li><a href="#4">Music</a></li>
      </ul>
    </div>
    <div id="content-container">
      <div id="content">
        <h2>
          Page     
        </h2>
        <p>
        page
        </p>
      </div>
      <div id="aside">
        <h3>
          Profile
        </h3>
        <p>
             profile
        </p>
      </div>
      <div id="aside">
        <h3>
          Links
        </h3>
        <p>
             link
        </p>
      </div>
      
    </div>
    <div id="footer">
        footer
      </div>
  </div>
</body>
</html>
-->

 

div.css

#container
{
 margin: 0 auto;
 width: 900px;
 background: #fff;
}
#header
{
 background: #ccc;
 padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
 float: left;
 width: 900px;
 background: black;
}
#navigation ul
{
 margin: 0;
 padding: 0;
}
#navigation ul li
{
 list-style-type: none;
 display: inline;
}
#navigation li a
{
 display: block;
 float: left;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 border-right: 1px solid #fff;
}
#navigation li a:hover { background: red; }
#content-container
{
 float: left;
 width: 900px;
 background: #fff;
}
#content
{
 clear: left;
 float: left;
 width: 560px;
 padding: 20px 0;
 margin: 0 0 0 30px;
 display: inline;
}

Hasil

Selamat Mencoba