Al que li vagi bé que es posi al dia. Al qui no que s’ho faci mirar. He dit!
2004-26, web 7.0
Ricard Vilanova
Es mostren els missatges amb l'etiqueta de comentaris #01 utilitats. Mostrar tots els missatges
Es mostren els missatges amb l'etiqueta de comentaris #01 utilitats. Mostrar tots els missatges
dissabte, 17 de setembre del 2016
Accelerated Mobile Pages
Al que li vagi bé que es posi al dia. Al qui no que s’ho faci mirar. He dit!
dimecres, 1 d’abril del 2015
The Pirate Bay bloquejada de nou… aquest cop específicament a Espanya
Accedint a The Pirate Bay des de Tor, ara es troben resultats de coses que abans estaven amagades per un navegador normal. O sigui que al final l’únic que aconseguiran és “obrir-nos els ulls”… ;-)
Avisats esteu!
divendres, 27 de març del 2015
Intrusos a la wifi
Aprofitant un d’aquells talls vaig trucar al 1002 i en la verificació automàtica van trobar una incidència i en van enviar un tècnic. Va fer proves (pel matí) i no hi veia problemes… és clar, pel matí no tenia els talls. Solució? Em canvien el router… ai las!
Els talls continuen i torno a trucar, aquest cop al número directe del tècnic que em va facilitar. Com que no ve, acabo tornant a trucar al 1002 en un altre dels talls. Incidència activada i torna a venir el tècnic. Torna a fer proves i diu que sembla que la línia està bé. Li comento que els talls es produeixen just en el moment que uns nous inquilins s’han instal·lat al pis buit del costat. Em diu que no hi té res a veure… Finalment aprofiten que hi ha una línia lliure i em canvien la línia.
Continuen havent algun micro-tall, però res a veure amb l’anterior. Acaba el mes i els veïns abandonen el pis. Els pocs talls que tenia fins el moment desapareixen del tot. Si era qüestió dels veïns o de la línia, no ho sabré mai. El cas és que el problema es va solucionar.
Just ahir vaig començar a notar problemes amb la velocitat de conexió. I alguns problemes amb el wifi de l’ordinador. Tot sovint havia de reiniciar per recuperar la senyal. A més se’m van ajuntar altres problemes que no venien al cas com era el tenir instal·lades als navegadors alternatius al principal (Safari) extensions de publicitat que em desmuntaven les pàgines. La paranoia va tornar!
Vaig desconnectar el wifi uns instants, vaig tornar a connectar i encara estava allà. Vaig tornar a desconnectar un parell de hores i al tornar ja no hi era. Mentrestant vaig investigar què calia fer per desempellagar-me d’un intrús així, confiant que s’hauria donat compte que jo ho sabia i no es tornaria a connectar per precaució. Però no. Al cap d’unes hores tornava a ser allà. Així que això és el que vaig fer:
- Entrar al router (escrivint 192.168.1.1 al navegador) i canviar la contasenya del wifi, ara en mode WPA2. Aquest cop una contrasenya de 24 caracters incloent majúscules, minúscules (depén de la tipografia de vegades és difícil saber quan hi ha una "L" minúscula o una "i" majúscula…), 6 números i 2 símbols… aquest cop no ho posaré fàcil!
- Desactivar el mode automàtic del WPS.
- Canviar la contrasenya del router…
Atenció: l’anterior router tenia encriptació WPA2, però aquest “nou” només WPA-PSK. I el que més em fot és que la contrasenya del router era 1234! Toca’t els ous! I només entrant aquesta contrasenya al router quedava visible la contrasenya del wifi que jo em pensava que anava encriptada i no era possible conèixer si no tenies accés físic al router i n’apuntaves la contrasenya que estava impressa a sota… En fi, sempre acabes aprenent coses noves.
Informe finalitzat. ;-)
dijous, 22 de gener del 2015
La tornada de
The Pirate Bay
De moment al seu web apareix un comptador enrera avisant que l’1 de febrer passarà alguna cosa. Mentrestant, com ve anuncien, existeix PirateBrowser (només PC) per anar portant la contrària als legisladors totpoderosos amb interessos ben particulars. ;-)
“No more censorship!” com bé anuncien.
A veure quan arribarà el vaixell pirata a l’illa… :D
Una imatge val més que mil paraules?:
dijous, 20 de novembre del 2014
Apunts web:
responsive web design
Aquí uns apunts personals sobre responsive web design que he llegit primer a La niña bipolar i més detalladament a FroontBlog.
Aquí la traducció via Google Translate d’aquesta última pàgina:
9 principis bàsics de
disseny de pàgines web responsive
El disseny web responsive és una gran solució al nostre problema multi-pantalla, però entrar-hi des de la perspectiva d’impressió és difícil. Sense mida de pàgina fixa, no hi ha mil·límetres o polzades, no hi ha limitacions físiques per lluitar-hi en contra. Dissenyar en píxels per Desktop i Mobile forma part del passat, a mesura que més i més gadgets poden obrir una pàgina web. Per tant, anem a aclarir alguns dels principis bàsics del disseny web responsive aquí per entendre la web adaptable, en lloc de lluitar-hi en contra. Per fer-ho simple ens centrarem en els dissenys (sí, responsive va molt més enllà que això i si en voleu aprendre més, aquest és un bon començament).
1.- Responsive vs disseny web adaptatiu
Pot semblar el mateix, però no ho és. Tots dos enfocaments es complementen entre sí, per la qual cosa no hi ha una manera correcta o incorrecta de fer-ho. Deixeu que el contingut ho decideixi.
2.- El fluxe (flow)
Com les mides de pantalla es fan més petits, el contingut comença a ocupar un espai més vertical i res per sota serà empès cap avall, es diu el fluxe. Això pot ser difícil d’entendre si estàs acostumat a dissenyar amb píxels i punts, però té tot el sentit quan un s’hi acostuma.
3.- Les unitats relatives
El llenç pot ser un ordinador d’escriptori, pantalla del mòbil o qualsevol altra cosa. La densitat de píxels també pot variar, per la qual cosa necessitem unitats que siguin flexibles i treballen a tot arreu. Aquí és on les unitats relatives com els percentatges són útils. Així que fer alguna cosa 50% d’ample vol dir que sempre tindrà la meitat de la pantalla (o finestra, que és la mida de la finestra del navegador oberta).
4.- Els punts d’interrupció (breakpoint)
Els punts d’interrupció permeten la disposició per canviar punts predefinits, per exemple, si té 3 columnes en un escriptori, però només 1 columna en un dispositiu mòbil. La majoria de les propietats CSS es poden canviar des d’un punt d’interrupció a un altre. En general, quan se’n posa un depèn del contingut. Si hi ha un final de texte, potser s’hi haurà de afegir un punt d’interrupció. Però cal usar-los amb precaució, doncs pot causar problemes amb la rapidesa quan és difícil d’entendre el que està influint en el que passi.
5.- Valors màxim i mínim
De vegades el contingut ocupa tot l’ample de la pantalla i és més gran que aquesta, com en un dispositiu mòbil, però tenir el mateix contingut que s’estén a tota l’amplada de la pantalla sovint té menys sentit. Aquesta és la raó perquè els valors Min / Max ajuden. Per exemple que té una amplada de 100 % i l’amplada màxima de 1.000 px significaria que el contingut va a omplir la pantalla, però no anar més de 1.000 px.
6.- Objectes niats (nested objects)
Recordeu la posició relativa? Tenir una gran quantitat d’elements en funció de si seria difícil de controlar, per tant, elements d’embalatge en un contenidor que manté de forma més comprensible, net i ordenat. Aquí és on les unitats estàtiques com els píxels poden ajudar. Són útils per al contingut que no ha d’anar a escala, com logotips i botons.
7.- Mòbil o d’escriptori primer
Tècnicament no hi ha molta diferència si un projecte s’inicia a partir d’una pantalla més petita a una més gran (mòbil primer) o viceversa (d’escriptori primer). No obstant això, afegeix limitacions addicionals i ajuda a prendre decisions si comencem amb el mòbil per primera vegada. Sovint, la gent comença a partir d’ambdós extrems a la vegada, així que realment, cal provar-ho i veure què ens funciona millor.
8.- Tipografies web vs. tipografies del sistema
Volem tenir un aspecte atractiu Futura o Didot a la pàgina web? Utilitzeu TypeDNA Font Manager! Tot i que es veurà impressionant, recordeu que cada tipografia s’haurà de descarregar i com més n’hi hagin més temps es trigarà a carregar la pàgina. Les fonts del sistema, d’altra banda van a la velocitat del llamp, excepte quan l’usuari no treballa a nivell local i es recorrerà a una font per defecte.
9.- Imatges en mapa de bits vs. vectors
Les vostres icones tenen molts detalls i alguns efectes fantàstics? En cas afirmatiu, utilitzeu un mapa de bits. Si no, considereu l’ús d’un vector d’imatge. Per a mapes de bits utilitzeu un JPG, PNG o GIF, per als vectors la millor opció seria un SVG o una icona de tipografia. Cadascun té alguns avantatges i alguns inconvenients. No obstant això, tinguem en compte la mida. Si no hi ha fotografies han d’anar en línia sense optimització. Els vectors per contra sovint són petits, però alguns navegadors antics no li donaran suport. A més, si hi han moltes corbes podria ser més pesat que un mapa de bits, així que cal triar sàviament.
Aquí la traducció via Google Translate d’aquesta última pàgina:
9 principis bàsics de
disseny de pàgines web responsive
El disseny web responsive és una gran solució al nostre problema multi-pantalla, però entrar-hi des de la perspectiva d’impressió és difícil. Sense mida de pàgina fixa, no hi ha mil·límetres o polzades, no hi ha limitacions físiques per lluitar-hi en contra. Dissenyar en píxels per Desktop i Mobile forma part del passat, a mesura que més i més gadgets poden obrir una pàgina web. Per tant, anem a aclarir alguns dels principis bàsics del disseny web responsive aquí per entendre la web adaptable, en lloc de lluitar-hi en contra. Per fer-ho simple ens centrarem en els dissenys (sí, responsive va molt més enllà que això i si en voleu aprendre més, aquest és un bon començament).
1.- Responsive vs disseny web adaptatiu
Pot semblar el mateix, però no ho és. Tots dos enfocaments es complementen entre sí, per la qual cosa no hi ha una manera correcta o incorrecta de fer-ho. Deixeu que el contingut ho decideixi.
2.- El fluxe (flow)
Com les mides de pantalla es fan més petits, el contingut comença a ocupar un espai més vertical i res per sota serà empès cap avall, es diu el fluxe. Això pot ser difícil d’entendre si estàs acostumat a dissenyar amb píxels i punts, però té tot el sentit quan un s’hi acostuma.
3.- Les unitats relatives
El llenç pot ser un ordinador d’escriptori, pantalla del mòbil o qualsevol altra cosa. La densitat de píxels també pot variar, per la qual cosa necessitem unitats que siguin flexibles i treballen a tot arreu. Aquí és on les unitats relatives com els percentatges són útils. Així que fer alguna cosa 50% d’ample vol dir que sempre tindrà la meitat de la pantalla (o finestra, que és la mida de la finestra del navegador oberta).
4.- Els punts d’interrupció (breakpoint)
Els punts d’interrupció permeten la disposició per canviar punts predefinits, per exemple, si té 3 columnes en un escriptori, però només 1 columna en un dispositiu mòbil. La majoria de les propietats CSS es poden canviar des d’un punt d’interrupció a un altre. En general, quan se’n posa un depèn del contingut. Si hi ha un final de texte, potser s’hi haurà de afegir un punt d’interrupció. Però cal usar-los amb precaució, doncs pot causar problemes amb la rapidesa quan és difícil d’entendre el que està influint en el que passi.
5.- Valors màxim i mínim
De vegades el contingut ocupa tot l’ample de la pantalla i és més gran que aquesta, com en un dispositiu mòbil, però tenir el mateix contingut que s’estén a tota l’amplada de la pantalla sovint té menys sentit. Aquesta és la raó perquè els valors Min / Max ajuden. Per exemple que té una amplada de 100 % i l’amplada màxima de 1.000 px significaria que el contingut va a omplir la pantalla, però no anar més de 1.000 px.
6.- Objectes niats (nested objects)
Recordeu la posició relativa? Tenir una gran quantitat d’elements en funció de si seria difícil de controlar, per tant, elements d’embalatge en un contenidor que manté de forma més comprensible, net i ordenat. Aquí és on les unitats estàtiques com els píxels poden ajudar. Són útils per al contingut que no ha d’anar a escala, com logotips i botons.
7.- Mòbil o d’escriptori primer
Tècnicament no hi ha molta diferència si un projecte s’inicia a partir d’una pantalla més petita a una més gran (mòbil primer) o viceversa (d’escriptori primer). No obstant això, afegeix limitacions addicionals i ajuda a prendre decisions si comencem amb el mòbil per primera vegada. Sovint, la gent comença a partir d’ambdós extrems a la vegada, així que realment, cal provar-ho i veure què ens funciona millor.
8.- Tipografies web vs. tipografies del sistema
Volem tenir un aspecte atractiu Futura o Didot a la pàgina web? Utilitzeu TypeDNA Font Manager! Tot i que es veurà impressionant, recordeu que cada tipografia s’haurà de descarregar i com més n’hi hagin més temps es trigarà a carregar la pàgina. Les fonts del sistema, d’altra banda van a la velocitat del llamp, excepte quan l’usuari no treballa a nivell local i es recorrerà a una font per defecte.
9.- Imatges en mapa de bits vs. vectors
Les vostres icones tenen molts detalls i alguns efectes fantàstics? En cas afirmatiu, utilitzeu un mapa de bits. Si no, considereu l’ús d’un vector d’imatge. Per a mapes de bits utilitzeu un JPG, PNG o GIF, per als vectors la millor opció seria un SVG o una icona de tipografia. Cadascun té alguns avantatges i alguns inconvenients. No obstant això, tinguem en compte la mida. Si no hi ha fotografies han d’anar en línia sense optimització. Els vectors per contra sovint són petits, però alguns navegadors antics no li donaran suport. A més, si hi han moltes corbes podria ser més pesat que un mapa de bits, així que cal triar sàviament.
dissabte, 1 de novembre del 2014
Apple Mac
“No he necessitat mai saber com funciona un ordinador.
Sempre he fet servir un Mac.”
[ Jo diria que això ja ho ha dit algú abans… però ara mateix no li ho sé atribuir a ningú…
Així que m’ho faig meu (almenys en aquesta construcció i contexte): Ricard Vilanova ]
Així que m’ho faig meu (almenys en aquesta construcció i contexte): Ricard Vilanova ]
Això vindria a ser un llistat més o menys actualitzat de les diferentes eines informàtiques que he utilitzat per treballar des del primer Mac Classic II de l’any 1991 amb un disc dur de 50MB!
Sempre havia sentit que “per feina” l’ordinador s’havia de canviar cada dos anys. I en principi així era, tot i que en algun cas fins i tot me l’havien canviat bastant abans per interessos “fiscals”. En canvi, “per casa”, que es canviés cada quatre anys n’hi havia prou.
Des que els ordinadors me’ls haig de pagar jo, els faig durar un mínim de quatre anys i només el canvio quan l’obsolescència programada m’obliga… Si el que compres és bo, pot durar bastant més. I per altra banda ja no existeix diferenciació entre el “per feina” i el “per casa” doncs, per exemple, jo no tinc televisor: tinc un ordinador de 27” on hi veig la televisió.
dilluns, 7 d’abril del 2014
@font-face… cinc anys després…
Això és una anotació personal per recordar-me’n després... ;-)
Feia molt de temps que hi anava darrera. Sabia que es podia incrustar pràcticament qualsevol tipografia en web però, per més que havia buscat no havia trobat la solució… o almenys una solució asequible als meus coneixements del moment. Coneixia de l’existència de les Google Fonts, però per més que havia rebuscat no m’acabava de convèncer: igualment t’havies de “conformar” amb les que Google t’oferia… és clar que eren lliures de drets però no em permetia posar qualsevol tipografia. Ara ho he tornat a provar… i a la primera! I mira que m’hi havia barallat!
De fet, ara que ja sé com funciona, és molt senzill. Primer de tot cal conèixer els diferents formats de tipografies i perquè serveixen cadascun. Perquè es vegin bé en web en qualsevol navegador –fins i tot en aquells engendres tipus Explorer 6–, i fins que això s’acabi de “normalitzar”, nececessitem la tipografia en quatre formats diferents:
Doncs tenint la tipografia OTF o TTF, el més pràctic és entrar al WebFont Generator de FontSquirrell i que et converteixi la font als altres 3 formats. A més et prepara la fulla d’estil (CSS) o les línes de codi necessàries per insertar l’atribut @font-face a la teva fulla d’estil personal. Més fàcil impossible! I el més important: funciona!
Només he necessitat 5 anys per trobar la solució! ;-)
Si algú vol saber com funciona exactament aquí pot trobar una mica més d’informació (només fa 4 anys que està escrita…). La primera pista l’he trobada aquí i fa 5 anys que ja funcionava…
De fet, ara que ja sé com funciona, és molt senzill. Primer de tot cal conèixer els diferents formats de tipografies i perquè serveixen cadascun. Perquè es vegin bé en web en qualsevol navegador –fins i tot en aquells engendres tipus Explorer 6–, i fins que això s’acabi de “normalitzar”, nececessitem la tipografia en quatre formats diferents:
- OTF (Open Type Font) o TTF (True Type Font), indistintament: o bé una o bé l’altra;
Amb això estaria solucionat, però ara venen els “parxes”… per veure-ho amb altres navegadors més antics o molt “senyoritus”, que volen estar per sobre de la resta escrivint les seves pròpies regles…: - EOT (Embedded Open Type) (coses de Microsoft…) visible des d’IE4.
- SVG (Scalable Vector Grafics), un format més universal… Opera, Safari, iPhone i Pad ho veuran.
- WOFF (Web Open Font Format) per Firefox i Opera
Doncs tenint la tipografia OTF o TTF, el més pràctic és entrar al WebFont Generator de FontSquirrell i que et converteixi la font als altres 3 formats. A més et prepara la fulla d’estil (CSS) o les línes de codi necessàries per insertar l’atribut @font-face a la teva fulla d’estil personal. Més fàcil impossible! I el més important: funciona!
Només he necessitat 5 anys per trobar la solució! ;-)
Si algú vol saber com funciona exactament aquí pot trobar una mica més d’informació (només fa 4 anys que està escrita…). La primera pista l’he trobada aquí i fa 5 anys que ja funcionava…
dimecres, 5 de març del 2014
Tot provant FitStar
I per mi, molt important, sense necessitat d’equipació!: exercicis amb el propi pes corporal. I per qui es pensi que això no és suficient, puc assegurar que en un parell de dies, tot i estar “preparat” per segons quins exercicis, agafes tiretes: bon senyal!
Jo la tinc al iPad i de moment, ole, ole!
I “by the face”. Molt content.
[ FitStar ]
PopCorn Time
Hauria de venir instal·lat per defecte en tots el ordinadors… siguin de la plataforma que siguin… que per això està preparat!
“No hace falta decir nada más”.
dimarts, 12 de març del 2013
Fent un web. Pas a pas
#03.- Capçalera i peu
Primer posem les imatges de fons de la capçalera i del peu si en porta. I deixem pel final la barra de navegació que és el que porta més feina... no pel fet de posar-hi les imatges, sinó per la interactivitat que se li ha dʼaplicar.
Finalment introduirem els enllaços al peu de pàgina. El peu de pàgina, a part dʼoferir les dades principals de contacte, acostuma a ser un mapa web de tot el lloc. Des dʼaquesta zona sʼhauria de poder accedir a qualsevol pàgina del lloc amb un sol clic.
En aquesta versió del web (3.0) he obviat el texte als botons* en estat de repòs, però amb la funció hover mostrarem el seu significat. Les funcions repòs i hover sʼacostumen a fer només amb CSS, però estava buscant una cosa especial més enllà de la funció hover. Repeteixo una vegada més que no sóc programador però mʼapasiona el poder del codi font (HTML + CSS + JavaScript) i tenia clar que en un moment o altra faria servir alguna llibreria jQuery de JavaScript.
La veritat és que hi havien opcions molt interessants amb jQuery de mostrar el contingut dels botons amb la funció hover, però amb un simple CSS es pot solucionar el petit detall de lʼhover dels botons. Així quedarà finalment la cosa:
(*) Encara recordo, com anècdota, el moment en que un “reconegut” programador local em deia que els botons de la barra de navegació no podien ser imatge... que havien de ser texte perquè sinó no sʼindexaven en els cercadors... potser en aquell moment aquest “reconegut” programador no coneixia la funció z-index per amagar el texte dʼun botó en forma dʼimatge (mantenint els avantatges de la indexació com a texte i els avantatges de la imatge com a força visual gràfica)... ;-)
Subscriure's a:
Missatges (Atom)