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:

• Fonts i generadors addicionals
• W3school SVG
• Object SVG
• SVG i CSS
• Sitepoint:SVG i CSS
• Inkscape - Editor SVG
• OpenOffice - Editor SVG
• Libreoffice - Editor SVG
• Google SVG-Edit - Editor online SVG

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, 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:

• Llibreria Hpneo gmaps.js
• W3 geolocalization
• Opera-geolocalization
• Google code-maps
• Exemple d'us
• Llibreries d'events tàctils

Windows 7: Problemes de sincronització fora de linea (offline folders)

Error amb offline folders

Problemes amb offline folders

Una de les avantatges del Offline folders (Fitxers fora de línea) es la capacitat de sincronització automàtica de fitxers a la xarxa.
Dic avantatges quan funciona, que moltes vegades no es així.

Una opció es programar un script de sincronització manual on sigui el usuari qui prengui conscientment les decisions.
Una altre es intentar arreglar les constants incidències que surten amb aquesta funcionalitat.
Pots provar aquests passos, per a fer un reset del repositori ("cache") de sincronització i començar de nou:

Pas	Exemple
Normalment tens un avis al tauler de control i a la icona de la barra de tasques.
Obrir regedit.exe i baixar fins a la clau: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet \Services\Csc\Parameters Crear un valor DWORD de 32 bits.
El valor s'ha d'anomenar FormatDatabase donar-li el valor: 1 Reiniciar el equip i es forçarà una netejar. Esborrar els fitxers restants que no sincronitzen.
Tornar a reiniciar i verificar que s'ha corregit la incidència.

Enllaços relacionats:

• Oracle