Mostrando entradas con la etiqueta Programació. Mostrar todas las entradas

miércoles, 6 de agosto de 2014

Java 7: Enum Class

Una de les coses més interessants que te Java son les classes Enum.

Les classes Enum son un tipus específic de classes que permeten acotar i definir els valors que pot tenir una variable.
La avantatge addicional que proporciona Java es que pots afegir mètodes per a treballar amb elles, com per exemple:

Mètode
`.values()`	Permet recorrer tota la llista de valors de la class `Enum`. "...method that returns an array containing all of the values of the enum in the order they are declared..." `public enum Day { SUNDAY, MONDAY, TUESDAY, WEDNESDAY,THURSDAY, FRIDAY, SATURDAY }` `for (Day dia_setmana : Day.values()) { System.out.printf("El teu dia es:",dia_setmana); }`
`toString()`	Retorna el text de la ennumeració.
Creació amb valors	Al crear un Enum, es pot assignar automàticament els valors. En aquest cas cal afegir un constructor privat de la classe. `public enum Planet { MERCURY (3.303e+23, 2.4397e6), VENUS (4.869e+24, 6.0518e6), EARTH (5.976e+24, 6.37814e6), MARS (6.421e+23, 3.3972e6), JUPITER (1.9e+27, 7.1492e7), SATURN (5.688e+26, 6.0268e7), URANUS (8.686e+25, 2.5559e7), NEPTUNE (1.024e+26, 2.4746e7); private final double mass; // in kilograms private final double radius; // in meters` `// CONSTRUCTOR ADDICIONAL Planet(double mass, double radius) { this.mass = mass; this.radius = radius; } ... for (Planet p : Planet.values()) { System.out.printf("Your weight on %s is %f%n", p, p.surfaceWeight(mass)); }`

Enllaços relacionats:

miércoles, 16 de julio de 2014

La web per a mòbils: JavaScript (JS)

www.w3.org-script

JavaScript es un dels components bàsics de la Web per a mòbils i en general del augment de usabilitat de les pàgines Web, per tant es molt recomanable fer un curs prou profund per a entrar en detalls interns del llenguatge per a treure-li tot el rendiment que permet.

Donat que no em considero un especialista en programació, i potser en cap altre cosa més, aquí deixo alguns dels punts més interessants per a estudiar d'aquest llenguatge.

Els punts més interessants de les funcions JavaScript

Concepte	Opcions d'ús
Llibreries gratuïtes	TapQuo JS JQuery Mobile Zepto JS
No declaració de paràmetres Els paràmetres es poden invocar sense haver-los de declarar. Es tractanten com un array.	Funcions de nombre de paràmetres indefinits. No cal fer una funció per 1 paràmetre, una altre per a 2, una altre per a 3,... Per exemple es pot avaluar el nombre de paràmetres amb: arguments.length: `function exemple(){ return (arguments[0]+"-"+arguments[1]); } Crida: example ('a','b'); => a-b`
Inicialització paràmetres molt senzilla Paràmetres per defecte amb \|\| (OR lògic)	`function exemple(){ var par1=(arguments[1]\|\|"res-de-res"); return (arguments[0]+"-"+par1); } exemple('a'); => a-res-de-res` Permet inicialitzar tots els paràmetres amb una instrucció molt simple, evitant llargs `if` i molt codi de comprovació
Claretat de prioritat dels operadors i funcions.	Mozilla - Prioritat Mozilla - Expressions
Suport a caràcters UNICODE	`\0, \x00, \u0000 \t, \x09, \u0009 \", \x22, \u0022 \', \x27, x\u0027`
Gran quantitat de events programables Molts apareguts amb HTML5 que amplien les possibilitats de programació.	`setInterval() onload() onresize()` Events, Objecte Windows, ...
Funcions matemàtiques	w3schools- Objecte Math `n.toFixed(1) - arrodonir al primer decimal`
JSON - JavaScript Object Notation JSON.org	JSON.org un format de conversió a text molt estès (en alguns àmbits esta desplaçant a XML) amb llibreriesper a la majoria de llenguatges i mètodes per a serialitzar i enviar informació a través d'una línia de comunicació. `JSON.stringify(object) JSON.parse(string_JSON)`

Enllaços relacionats:

miércoles, 9 de julio de 2014

HTML5 i JS: local Storage

www.w3.org-script

Una altre gran avantatge de la programació amb HTML5 i JS es la inclusió de emmagatzemament local permanent, i a més, de manera senzilla.

Hi ha força informació disponible a dev.w3.org

De manera simple:

Hi han dades que es poden guardar en sessió i permanents
Es tracten com a propietats de 2 objectes: localStorage, sessionStorage
Es important tenir en comte la inicialització de les variables
Es important gestionar primer les dades al xStorage i desprès fer la presentació a DOM, i no al revés.

 function init_segons()

 { localStorage.segons = "0.0";

   localStorage.llista = "";

 } 

 function afegir()

 { // Afegim + per forçar conversió a num.

   localStorage.segons = +localStorage.segons + 0.1; 

 }

    function mostrar() 
 
 { /* Mostrar canvia respecte a ver. anteriors.
 
      Invoca al procés de increment i plasma el que hi ha al storage. */

  cl.html((+localStorage.segons).toFixed(1)); 

  rep.html(localStorage.llista);

 };

miércoles, 2 de julio de 2014

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)

miércoles, 25 de junio de 2014

SVG - Gràfics escalables per smartphones

SVG Wikimedia

SVG - ús a smartphones

SVG es un format de gràfic que permet l'escalat sense perdre qualitat al fer-ho.
Hi ha abundant informació als enllaços que hi han abaix, tant de editors, com de guies i manuals per a poder estudiar i analitzar les seves avantatges.
Hi han, però, alguns detalls i dubtes que he tingut al treballar amb SVG que comento a continuació.

Detalls interessants

Consulta	Resposta
Ordre de les imatges (z-axis)	L'ordre ve determinat per l'odre d'aparició en la definició del dibuix. Per que quedi a la capa superior, simplement baixa'l dins de la descripció.
Format i CSS	SVG permet una gestió de formats, amb la seva propi estructura, molt semblant a CSS. El CSS es pot generar en un fitxer extern i invocar-lo just abans de la definició de la imatge, però es important que la crida sigui en format XML. `<?xml-stylesheet type="text/css" href="svg-style.css" ?>`

Enllaços relacionats:

miércoles, 18 de junio de 2014

CSS3: Fonts, @font-face i Fira Sans

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:

miércoles, 11 de junio de 2014

HTML5, JS i geolocalització

www.w3.org-script

Una altre de les avantatges de HTML5 i JS es la possibilitat que ha portat per a fer geolocalització.
La majoria de funcionalitats es basen en l'ús de Google Maps però donat que es un producte molt complert i complex, han sorgit llibreries com gmaps.js (hpneo) que ajuden molt a la programació de accions.

Mostra un mapa més gran

Amb les llibreries que es poden importar fàcilment:

  <script type="text/javascript" src="zepto.min.js"></script>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  <script type="text/javascript" src="gmaps.js"></script>

es poden construir ràpidament accions de posicionament de marques (markers), rutes, etc...

<script type="text/javascript">

    var map, lat, lng;

 ...

    $(function() // Function Ready al acabar de construir arbre DOM

 {

      function enlazarMarcador(e) // e= event que em passa la llibreria

   { 

       // mostra ruta entre marcas anterior i actual

        map.drawRoute({

          origin: [lat, lng],  // origen en coordenades previes

          // desti en coordenades del click actual

          destination: [e.latLng.lat(), e.latLng.lng()],

          travelMode: 'driving',

          strokeColor: '#000000',

          strokeOpacity: 0.6,

          strokeWeight: 5

        });

        lat = e.latLng.lat();   // guarda coords per següent enllaç

        lng = e.latLng.lng();

        map.addMarker({ lat: lat, lng: lng});  // Marker a mapa

  $("#informatiu").html("AddRoute: a lat.:"+e.latLng.lat()+" long.:"+e.latLng.lng()+" Markers:"+map.markers.length);

      };

...

Enllaços relacionats:

miércoles, 28 de mayo de 2014

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:

miércoles, 7 de mayo de 2014

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

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:

jueves, 24 de abril de 2014

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:

viernes, 11 de abril de 2014

JavaScript: Events tàctils amb llibreries

www.w3.org-script

JavaScript: Events tàctils

Amb l'aparició i acceptació del iphone, sobre el 2007, l'ús dels events tàctils ("touch") comença a ser acceptat als diferents navegadors.
Poc a poc es van normalitzant i per exemple a Mozilla pots trobar una bona font de informació de com tratactar-los.
TapQuo també publica una guia gràfica (veure a meitat de la pàgina) molt útil per a les formacions.

Llibreries

Per a facilitar l'ús i programació dels diferents events apareixen llibreries que faciliten el seu tractament:
JQuery Mobile
Zepto JS
TapQuo JS (Una fantàstica empresa de Bilbao)

En el meu cas he estat jugant darrerament amb les llibreries de Zepto que ofereix de 2 llibreries:

touch.js: Events com tap, singletap, doubleTap, swipe, swipeUp,...
gesture.js: Events com pinc, pinchIn,pinchOut,

Amb aquestes llibreries pots programar, per exemple, un toc ("tap") o un desplaçament ("swipe") simplement fent:

...

<script type="text/javascript" src="zepto.min.js"></script>

<script type="text/javascript" src="touch.js" ></script>

...

<script type="text/javascript">

  $(function()

  { var ditet = $('#areatactil');

 var cl=$("#crono"); // crono

 var rep=$("#liststop"); // inventory

... 

 function clear() 

 {if (!t)

  {cl.html("0.0");

   rep.html("Crono initialized<br>");

  }

  else

  { rep.html((rep.html()+"Crono running.<strong>Reset not allowed!</strong><br>"));

  }

 } 

 // Events de touch

    ditet.on('swipe', clear); 

...

<div id="areatactil">

<span id="crono"> 0.0 </span> segundos 

<div id="liststop"></div>

</div>

...

Enllaços relacionats:

martes, 8 de abril de 2014

Múltiples imatges background amb CSS3

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

viernes, 7 de marzo de 2014

Sites de interès: Sites on aprendre a programar

from www.openclipart.org

A més de les fantàstiques eines que ofereix Firefox al seu site per a desenvolupadors, tenia guardada aquesta pàgina de Bitelia amb una sèrie de sites que ofereixen formació en diferents eines de programació.

De totes les que estan descrites al article, i algunes que afegeixo jo, em quedo amb:

Aprendre a programar

Site	Llenguatges
Disseny sensible (Responsive Design)	Eina de Mozilla: Permet veure la resposta de la pàgina a diferents entorns de pantalla només arrossegant el ratolí. Disposa de tamanys predeterminats o la flexibilitat del fer-ho específic.
Scratchpad	Eina de Mozilla: Permet programar JavaScript (JS)
Paint Flashing	Eina de Mozilla: Permet veure ("flashing") les parts d'una pàgina que responen a un event.
3D View	Eina de Mozilla: Permet veure en 3D la jerarquia de etiquetes de la pàgina, d'aquesta manera es pot retocar fàcilment el CSS associat i revisar quines coses es pinten sobre de les altres. Estan integrades en les eines per a desenvolupadors del propi navegador.
W3Schools	Referència bàsica per a HTML5, CSS navegadors... TOTALMENT GRATIS!!!
CodeAcademy	JavaScript, HTML, CSS, PHP, Python, y Ruby
EdX	Programació i altres temes. Vinculada al MIT i Harvard
MiriadaX	Site de formació en espanyol i portuguès. Inclou formació gratuïta en programació. Vinculat a diverses universitats espanyoles.

Google Website Translator Gadget

miércoles, 6 de agosto de 2014

Enllaços relacionats:

miércoles, 16 de julio de 2014

Els punts més interessants de les funcions JavaScript

Llibreries gratuïtes

No declaració de paràmetres

Inicialització paràmetres molt senzilla

Gran quantitat de events programables

Funcions matemàtiques

JSON - JavaScript Object Notation

Enllaços relacionats:

miércoles, 9 de julio de 2014

miércoles, 2 de julio de 2014

Fonts d'informació

Enllaços relacionats:

miércoles, 25 de junio de 2014

SVG - ús a smartphones

Detalls interessants

Enllaços relacionats:

miércoles, 18 de junio de 2014

CSS3: Fonts, @font-face i Fira Sans

Exemple de codi:

Repàs dels paràmetres principals

Enllaços relacionats:

miércoles, 11 de junio de 2014

Enllaços relacionats:

miércoles, 28 de mayo de 2014

HTML5: Formats de video

Enllaços relacionats:

miércoles, 7 de mayo de 2014

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

El problema amb DIV incrustats

CSS - Part 1

HTML - Part 2

Enllaços relacionats:

jueves, 24 de abril de 2014

CSS3: "Round corners" i text inclinat

Cantonades arrodonides "Round corner"

Text inclinat ("Rotate")

Enllaços relacionats:

viernes, 11 de abril de 2014

JavaScript: Events tàctils

Llibreries

Enllaços relacionats:

martes, 8 de abril de 2014

Múltiples imatges background amb CSS3

Codi comentat:

Cal notar que:

Enllaços relacionats:

viernes, 7 de marzo de 2014

Aprendre a programar

Enllaços relacionats:

Sobre mi

Avisa'm dels canvis...