Germán Ponte Mateo

ignaro inspirado por los que saben

Colofón

Esta página web es la suma de un número indeterminado de ideas ajenas y recursos creados por otros. A continuación cito aquellos de los que me acuerdo.

Tipografía

El tipo de letra principal es Charter, diseñada en 1987 por Matthew Carter —célebre diseñador de Georgia y Verdana— para Bitstream Inc.

Bitstream Charter

0

1

2

3

4

5

6

7

8

9

#

@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

Ñ

O

P

Q

R

S

T

U

V

W

X

Y

Z

a

b

c

d

e

f

g

h

i

j

k

l

m

n

ñ

o

p

q

r

s

t

u

v

w

x

y

z

§

$

%

&

{

}

El tipo de letra para títulos es una versión de la DIN-1451 (condensada), diseñada en 1931 por el Instituto Alemán de Normalización (Deutsches Institut für Normung) para señales de tráfico y usos técnicos.

DIN 1451

0

1

2

3

4

5

6

7

8

9

#

@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

Ñ

O

P

Q

R

S

T

U

V

W

X

Y

Z

a

b

c

d

e

f

g

h

i

j

k

l

m

n

ñ

o

p

q

r

s

t

u

v

w

x

y

z

§

$

%

&

{

}

Programación

Miles de programadores comparten sus conocimientos en Internet para que los inútiles no tengamos que reinventar la rueda a diario. Gracias, gracias a todos.


Lightbox

En esta web utilizo un sistema para ver imágenes que emula de manera simplificada el efecto del script "Lightbox". Lo he sacado de una técnica CSS de Miro Karilahti para crear una galería de imágenes sin usar JavaScript.

Se trata de uno de los variados usos que tiene el así llamado Checkbox Hack. Los desarrolladores puristas lo desaconsejan apasionadamente.

He aquí un ejemplo (pulse en la imagen para ver el efecto):


El código, desprovisto de artificios, es como sigue:

HTML:

<div class="lightbox">
   <input type="checkbox" id="pic1"/>
   <label for="pic1" class="lb"><img src="tokio01.jpg" /></label>
   <label for="pic1"><img src="tokio01t.jpg" /></label>
</div>
            

CSS:

.lightbox {
max-width: 300px;
width: 100%;
margin: 2em auto;
}
label[for] {
   cursor: pointer;
}
input[type="checkbox"] {
   display: none;
}
.lb {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   min-height: 100%;
   z-index: 1000;
   overflow: auto;
   -webkit-transform: scale(0);
   transform: scale(0);
   -webkit-transition: -webkit-transform .2s;
   transition: transform .2s;
}
.lb img {
   position: fixed;
   top: 50%;
   left: 50%;
   margin: 0;
   max-width: 96%;
   max-height: 96%;
   box-shadow: 0 2px 1em rgba(0, 0, 0, 0.5);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked + .lb {
   -webkit-transform: scale(1);
   transform: scale(1);
}
            

El resultado se puede ver aquí.


Pestañas CSS

Las pestañas que empleo en el currículo son una adaptación de una demostración de Stu Nicholls en su excelente página CSS Play. Se trata de otro ejemplo que usa el Checkbox Hack. Se ve que me gusta.

He aquí un ejemplo (pulse alternadamente en Cita 1 y Cita 2 para ver el efecto):

«No sé mucho sobre ser millonaria, pero apuesto a que se me daría bien.»
Dorothy Parker.
«Echando mano de mi perfecto dominio del idioma, me callé.»
Robert Benchley.

El código para dos pestañas, reduciendo al máximo los caprichos estéticos, es este:

HTML:

<div class="radiotabs">
   <input type="radio" name="tab" id="tab1" class="tabs" checked="checked" /><label for="tab1">Cita 1</label>
   <input type="radio" name="tab" id="tab2" class="tabs" /><label for="tab2">Cita 2</label>
   <div id="view1" class="tabcontent">
      <p>«<em>No sé mucho sobre ser millonaria, pero apuesto a que se me daría bien.</em>»<br />Dorothy Parker.</p>
   </div>
   <div id="view2" class="tabcontent">
      <p>«<em>Echando mano de mi perfecto dominio del idioma, me callé.</em>»<br />Robert Benchley.</p>
   </div>
</div>
            

CSS:

.radiotabs {
   max-width: 600px;
   width: 100%;
   margin: 2em auto;
}
input.tabs {
   display: none;
}
input.tabs + label {
   cursor: pointer;
   float: left;
   display: block;
   color: #bbb;
   position: relative;
   border-bottom: 1px solid #bbb;
   margin: 0 2em 1em 0;
}
input.tabs + label:hover {
   color: #777;
   border-bottom: 1px solid #777;
}
.tabcontent {
   width: 100%;
   position: relative;
   z-index: 10;
   clear: left;
   top: 10px;
   display: none;
}
input.tabs:checked + label {
   color: #444;
   z-index: 20;
   border-bottom: 1px solid #444;
}
input#tab1:checked ~ div#view1, input#tab2:checked ~ div#view2 {
   display: block;
}
            

Se puede ver el código en acción.


JPlayer

Aunque soy reacio a incluir JavaScript, no conozco de momento otra forma de personalizar un reproductor de audio y vídeo para que tenga el aspecto y las funciones que uno desee.

De las docenas de librerías que existen por ahí, me decidí por JPlayer por su versatilidad, a pesar de que tiene más prestaciones de las que necesito y depende de JQuery.

Para esta web he diseñado una interfaz mínima cuya principal pretensión es no estorbar, pero mientras aprendía a manejar los selectores CSS estuve jugando con otras posibilidades:


Aspecto 02 Aspecto 03

Otros recursos

En esta página empleo las librerías html5shiv.js y respond.js, que tienen por objeto mejorar la compatibilidad de algunas características de programación web con las versiones antiguas de los navegadores.

normalize.css ayuda a eliminar las diferencias de presentación entre diferentes navegadores.

Font Squirrel tiene un conversor que optimiza los tipos de letra para la web.

Nota Bene

Locución latina que significa «fíjate bien» o «nótese bien», en el sentido de «téngase cuidado"» o «préstese atención».