HTML5 i CSS3: Fonts d'informació i generadors

http://www.w3.org/Style/CSS/

Fonts d'informació

Al començar a programar en HTML5 i CSS3 cal obtenir una font d'informació fiable i que aporti exemples, i els apartats més interessants.

Faig aquí un recull de llocs on tractar aquests temes.

Tema	On?
HTML General	HTML (ENG) Un excel·lent resum de HTML5 de 1 pàgina (Gràcies a Smashingmagazine.com)
CSS General	CSS(ENG)
<div>	DIV (ENG)
<nav> Exemple display:inline	nav (ENG) Exemples menu horitzontal (Spanish)
<Canvas> Grafics	Canvas (ENG) canvas i SVG (ENG) SVG (ENG) Un  generador gratuït i força interessant: canva.com
CSS selectors: # . *	CSS Selectors (ENG) Herència i cascada
Fonts	W3.org-fonts Font, @Font-face CSS3 Fontface
Generadors CSS	CSS3generator.com Gradients Generator CSSPortal.com Rounded-corner, menus i 1000 trucs CSS3maker.com - menus i més CSS3.com
media Utilitzat per a disseny adaptable ("responsive") a diferents dispositius	Screen resolution alistapart.com - Responsive <link rel='stylesheet' media='only screen and (min-width:530px) and (min-device-width:480px)' href='screen-480.css' />
CSS Selectors ::after	W3schools-Selectors p::after {content:"- Remember this";} per exemple, afegeix el text a tots els paràgrafs.

Enllaços relacionats:

• Developer Mozilla (ENG)

http://www.w3.org/Style/CSS/

CSS3: Fonts, @font-face i Fira Sans

Entre altres funcionalitats pel disseny de pàgines, CSS3 permet la incorporació de diverses fonts, tant des del propi servidor com importades de un altres servidor.
Aquesta darrera es molt interessant per tal d'importar fonts des de servidors on estan publicades per a compartir, veiem els paràmetres i un exemple:

Exemple de codi:

@font-face
{
font-family:FiraSans, Georgia, Serif;
font-weight:900;
font-variant:small-caps;

src: url(https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/fonts/FiraSans/FiraSans-Regular.otf);
}


Repàs dels paràmetres principals

Paràmetre	Tractament
font-family	Indica la prioritat de les fonts disponibles.
font-weight	Especifica el "pes", per exemple negreta ("bold"). Hi ha una normalització del pes per a facilitar el tractament: normal, bold, 100, 400, etc...
font-strech	Especifica principalment la relació entre alt i ample de la font. No esta gaire suportat encara.
font-style
font-size	Especifica el tamany
font-variant	Especifica el tractament del text. Té 2 opcions: normal: Text normal small-caps: El text es genera automàticament en "Versalita"
Formats	Woff (Web Open Font Format): .woff TrueType: .ttf Desenvolupat per Apple als 80' OpenType: .ttf, .otf Embedded-opentype: .eot SVG Font: .svg, svgz. Típic de iOS (iPad, iPhone)

A Webfonts.info es pot trobar una llista de llocs i plans per a descarregar embedded fonts, fontsquirrel.com i Google fonts disposen d'una àmplia llista també.

Enllaços relacionats:

• Font Face example 1
• w3schools.com @font-face
• miltonbayer.com @font-face
• w3.org @font-face
• Mozilla Firefox OS - Typeface - FiraSans 
• Google fonts
• fontsquirrel.com fira-sansFont
• Fontsquirrel.com
• Mozilla.org font-stretch
• CanIuse.com - Font support by navigator
• webfonts.info

HTML5: Video convertidors

http://www.w3.org/Style/CSS/

HTML5: Formats de video

Una de les avantatges de HTML5 i CSS3 es que estandarditza els formats, una mica, i permet la gestió de vídeos sense complicar massa la programació.

Malgrat això moltes vegades ens cal preparar-ho en diversos formats i aquí es on entren les eines de conversió. De les que he provat jo em quedo amb les 2 següents:

Eina	Funcionalitat
HandBrake	Gratuïta. Open Source. Eina gràfica molt fàcil de utilitzar. La que he provat es la versió HandBrake-0.9.9-1 sobre Windows Contra: No admet tots els formats possibles.
FFmpeg	La meva favorita. Gratuita. Publicada sota GNU. Eina que permet la majoria de conversions.  Utilitza diverses llibreries que li permeten fer-ho. Contra: Si no ets programador... no vinguis. Es una eina que funciona amb línia de comandes "Command line". Permet fer coses increïbles com canviar de format: ffmpeg -i MP4_origen.mp4 webm_desti.webm Extreure DVD a mp4: ffmpeg -i D:\VIDEO_TS\EXAMPLE.vob -c:a libmp3lame "C:\Carpeta amb espais\EXEMPLE.mp4" O rotar un vídeo: ffmpeg -i "C:\La meva carpeta\origen.mp4"  -vf "transpose=dir=1:passthrough=portrait"  "C:\La meva carpeta\GIRAT_90graus.mp4"
VLC	El famós Video Player també permet gravació, tot i que durant les proves (versió 2.1.3) a mi no m'ha funcionat correctament.
	Altres eines disponibles, encara que no son totalment gratuïtes o tenen avisos, etc... Una bona comparativa la pots trobar a: Wikipedia - Comparativa de editors

Enllaços relacionats:

• FFmpeg
• HandBrake
• VLC
• Wikipedia - Comparativa de editors
• CSS Tricks
• CSS3 Forçar el tamany del contenidor DIV

CSS3: Forçar el tamany del contenidor DIV al tamany dels DIV continguts.

http://www.w3.org/Style/CSS/

CSS3: Forçar el tamany DIV automáticament. 

Un dels problemes que tothom es troba al treballar amb DIV enlloc de taules TABLE es que al insertar una imatge aquesta pot desbordar el tamany del propi contenidor DIV.

El problema amb DIV incrustats

Veiem un exemple extret de PageAffairs i de Swiftthemes on esta molt ben explicat:

Comportament per defecte	Que volem
from Swiftthemes.com	from Swiftthemes.com

CSS - Part 1

La solució prové d'incloure en CSS un style i afegir-ho als contenidors afectats. Veiem com funciona:

/* FIX to increase container size to the internal DIV size and avoid image floating outside the container DIV */

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* END FIX */



:after indica que s'aplicarà desprès de la resta de elements.

HTML - Part 2

Als contenidors cal incloure:

<div id="main_container">
 <div id="foto">
    <img src="IMATGE_ENORME.png" height="233" width="320"/>
 </div>
 Text petit.<br>
 <div class="clearfix"></div>
</div>



Enllaços relacionats:

• PageAffairs
• SwiftThemes
• CSS Video Tricks

CSS3: Cantonades arrodonides "Round corners" i text inclinat ("Rotate")

http://www.w3.org/Style/CSS/

CSS3: "Round corners" i text inclinat 

Una de les avantatges de CSS3, que estalvia molt temps de feina, son les cantonades arrodonides ("Round Corner") i textos inclinats.
Ho veiem amb un exemple per tal que sigui més fàcil.

Cantonades arrodonides "Round corner"

Veiem el següent codi exemple, que serveix per al format d'aquest propi codi font:

.code{
margin-top: 20px;
padding-left: 5px;
font-family: monospace;
background-color: #000;
width: 100%;
border-top: 10px solid #ccc;

border-radius: 20px 15px 10px 5px;

box-shadow: 5px 3px 10px #000;
min-height: 80px;
color: #C0F146;
text-align: left;
font-size: 12px;
}


Amb la comanda border-radius defineixes quin radi d'arrodoniment ha de tenir aquesta cantonada arrodonida.

Text inclinat ("Rotate")

Veiem un altre cas amb text inclinat:

.demo-text {
padding:2%;
min-height:20px;
min-width:50px;
margin:2%;
/* border */
border:5px;
border-radius:20px;
border-style: dashed;
border-color:red;
box-shadow: 5px 5px 2px #888888;
/* position */
float:right;
display: table-cell;
text-align:center;
vertical-align: middle;

/*Rotate div */
 -ms-transform:rotate(30deg); /* IE 9 */
 -webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */
 transform:rotate(30deg); /* Standard syntax */
}

Amb aquest codi, per exemple, podem aconseguir un text inclinat amb cantonada arrodonida:

exemple

Enllaços relacionats:

• W3School - Border Radius
• W3 - CSS Backgrounds

http://www.w3.org/Style/CSS/

Múltiples imatges background amb CSS3

Una de les coses on habitualment puc cometre errors es a la sentència background amb diverses imatges.
Posem un exemple amb el següent CCS (que pots veure funcionant aquí):

Codi comentat:

.divimage{
padding:40px;
background:
url(http://upload.wikimedia.org/wikipedia/commons/f/f3/Airplane_GA_Black.svg)
 left top repeat-x,
url(http://upload.wikimedia.org/wikipedia/commons/7/7a/1a2.png)
 center no-repeat,
url(https://cdn1.iconfinder.com/data/icons/windows8_icons/26/airplane_take_off.png)
 left bottom repeat-x;

font-family: 'Roboto', sans-serif;
background-color:#a4d3ff;
box-shadow: inset 5px 5px 20px 5px #CCCCCC;
border-radius: 10px 0px 10px 0px;
}

Cal notar que:

• entre les diverses imatges hi ha una coma (,)
• Només hi ha una sentència background
• Es pot combinar amb altres instruccions CSS 
• Es poden importar imatges de fonts URL

Enllaços relacionats:

• W3.org - CSS3

Mapping de Oracle SQL a Java Types

java.com

www.oracle.com

Al desenvolupar una aplicació tindràs dubtes de quin mapping fer entre Oracle i Java.
Aquest es el mapping que he utilitzat amb Oracle XE 11g2 i Java 7.

Mapping Oracle - Java

Java	JDBC	Oracle 11.2	Java to SQL	Oracle DB to Java
byte (8-bit signed) -128,+127	TINYINT (8-bit) signed: -128, +127 or unsigned: 0, 255	NUMBER	updateByte(Column name, value)	getByte("Column name")
short (16-bit) -32768 , +32767	SMALLINT	NUMBER		getShort("Column name")
int (32-bit signed) -2147483648 to 2147483647	INTEGER 32-bit signed	NUMBER		getInt("Column name")
float (32 bit)	DECIMAL, NUMERIC (*3)	NUMBER	updateFloat(Column name, value)	getBigDecimal("Column name") getFloat("Column name")
long (64-bit)	BIGINT	NUMBER		getLong("Column name")
double (64-bit)	FLOAT DOUBLE	NUMBER
boolean	BIT			getBoolean("Column name")
char (16-bit Unicode)
String	Varchar2(nn)			getString("Column name")
Timestamp (*1,*2)	Timestamp			getTimestamp("Column name")
Timestamp (*1,*2)	Timestamp			getDate("Column name") -Fallarà-

Java Timestamp <- Java Date (Cast)
*1: Si es treballa amb molta precisió (nanosegons) es millor revisar el link de Oracle per tal de assegurar les conversions.
*2: Amb Java7 hi ha algunes diferències però estic buscant la documentació oficial.
*3: JDBC requires that all DECIMAL and NUMERIC types support both a precision and a scale of at least 15. Example: "12.345" has a precision of 5 and a scale of 3
NUMERIC (12,4) types representes with exactly the specified precision
DECIMAL (12,4) types allows an implementation to add additional precision beyond that specified

Source font:
Oracle: JDBC Developer's Guide (Actualitzat a la versió 11.2)
Java: Primitive datatypes: Aqui trobaràs els formats primitius de Java
http://docs.oracle.com/javase/6/docs/technotes/guides/jdbc/getstart/mapping.html#996857
http://docs.oracle.com/javase/1.5.0/docs/guide/jdbc/getstart/mapping.html

Java 7: Formatting text, numbers and dates

java.com

Quan estas programant, i sobretot debuggant, es molt interessant poder utilitzar formats al imprimir errors i missatges.
Aixi, pots substituir System.out.println( per System.out.format(

i aplicar els següents modificadors:

n	Independent platform New Line
d	A decimal integer.
f	A float.
n	A new line character appropriate to the platform running the application. You should always use %n, rather than \n.
tB	A date & time conversion—locale-specific full name of month.
td, te	A date & time conversion—2-digit day of month. td has leading zeroes as needed, te does not.
ty, tY	A date & time conversion—ty = 2-digit year, tY = 4-digit year.
tl	A date & time conversion—hour in 12-hour clock.
tM	A date & time conversion—minutes in 2 digits, with leading zeroes as necessary.
tp	A date & time conversion—locale-specific am/pm (lower case).
tm	A date & time conversion—months in 2 digits, with leading zeroes as necessary.
tD	A date & time conversion—date as %tm%td%ty
08	Eight characters in width, with leading zeroes as necessary.
+	Includes sign, whether positive or negative.
,	Includes locale-specific grouping characters.
-	Includes Left-justified.
.3	Three places after decimal point.
10.3	Ten characters in width, right justified, with three places after decimal point.

From:  http://docs.oracle.com/javase/tutorial/java/data/numberformat.html