Editando apunte: Reloj analógico configurable svg

Editando apunte: Reloj analógico configurable svg cerrar apuntes

ID: 107 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: accesibilidad, diseño, etiquetas, imágenes, javascript, php, sociedad, tags, webmaster
Extras: accesibilidad, diseño, etiquetas, imágenes, javascript, php, sociedad, tags, webmaster
apunte: - - - - - - - -

<p>
	<iframe src="ficheros/reloj.php" name="reloj_svg" style="width: 120px; height: 80px; float: right; margin: 0 0 .5em 1em; padding: 1em; border: 3px ridge aqua"></iframe>
	[rss]Después de comprobar con qué facilidad se puede dibujar un sencillo reloj analógico decidimos poderlo configurar; y a la vez compartirlo.[/rss]
	El código se puede obtener desde el fichero <a href="ficheros/reloj.txt?PHPSESSID=cg3if0jpr30dcgva5mvrkl5fb3">reloj.txt</a> y es el mismo que del reloj que acompaña este párrafo.
</p>
<p>
	Tal vez algún curioso a comparado las direcciones de ambas referencias y habrá notado que una termina en ".txt" y la otra en ".php", pero debemos comprender que los ficheros del tipo "<a href="http://es.wikipedia.org/wiki/PHP">php</a>" no se ven tal cual desde un navegador, sino que se procesa.
	De hecho, el fichero "reloj.php" tiene solamente este contenido:
</p>
<pre class="codigo"><?php
	include("reloj.txt");
?></pre>
<p>
	[rss]Ya que estamos tratando la configuración de nuestro reloj, nos pondremos "<a href="http://es.wikipedia.org/wiki/Frase_hecha">manos a la obra</a>"; pero aclarando que se trata de cosas básicas como los colores de sus componentes o la hora de inicio de su funcionamiento.[/rss]
</p>
<h3 class="subtitulo">
	Configuración
</h3>
<p>
	Como siempre en este diario, procuraremos usar un sistema "<a href="http://es.wikipedia.org/wiki/Accesibilidad_web">accesible</a>", aunque desde luego, el formato <a href="http://es.wikipedia.org/wiki/Svg">svg</a> no es soportado por igual por los distintos <a href="http://es.wikipedia.org/wiki/Navegador_web">navegadores</a>.
	Los cambios podrán verse en el pequeño reloj del párrafo anterior, o si se tiene javascript habilitado, podría mostrarse en una ventana nueva del navegador (marcando el primer control del formulario asociado).
</p>
<p>
	Tampoco será accesible la opción "hora del navegador", aunque siempre se podrá poner la hora de inicio de forma manual:
</p>
<form action="ficheros/reloj.php" target="reloj_svg" method="get" id="reloj_svg" style="padding: 1em; margin: 1em; border: 1px solid black;"><input type="hidden" name="PHPSESSID" value="cg3if0jpr30dcgva5mvrkl5fb3" />
	<fieldset><legend> Destino </legend>
		<label for="svg_v">Nueva ventana</label>: <input id="svg_v" type="checkbox" disabled="disabled" />
	</fieldset>

<fieldset><legend> Colores </legend>
		<fieldset><legend> Esfera </legend>
			<input type="checkbox" id="cambiar_f" />
			<label for="cambiar_f">Fondo</label>:
			<input id="svg_f" type="text" name="f" value="white"/>
			<br/>

<input type="checkbox" id="cambiar_e" />
			<label for="cambiar_e">Borde</label>:
			<input id="svg_e" type="text" name="e" value="green"/>
			<br/>

<input type="checkbox" id="cambiar_p" />
			<label for="cambiar_p">Marcas</label>:
			<input id="svg_p" type="text" name="p" value="black"/>
		</fieldset>

<fieldset><legend> Agujas </legend>
			<input type="checkbox" id="cambiar_h" />
			<label for="cambiar_h">Hora</label>:
			<input id="svg_h" type="text" name="h" value="black"/>
			<br/>

<input type="checkbox" id="cambiar_m" />
			<label for="cambiar_m">Minuto</label>:
			<input id="svg_m" type="text" name="m" value="blue"/>
			<br/>

<input type="checkbox" id="cambiar_s" />
			<label for="cambiar_s">Segundo</label>:
			<input id="svg_s" type="text" name="s" value="red"/>
		</fieldset>
	</fieldset>

<fieldset><legend> Horario </legend>
		<input name="gmt" type="radio" id="cambiar_hs" value="1" checked="checked"/>
		<label for="cambiar_hs">Hora del servidor</label>
		<br/>

<input name="gmt" type="radio" id="cambiar_hn" value="0" disabled="disabled"/>
		<label for="cambiar_hn">Hora del navegador</label>
		<br/>

<input name="gmt" type="radio" id="cambiar_hd" value="-1"/>
		<label for="cambiar_hd">Definir Hora</label>
		<br/>
		<label for="hh">Hora</label>:<input type="text" name="hh" id="hh" size="2"/>
		<label for="mm">Minuto</label>:<input type="text" name="mm" id="mm" size="2"/>
		<label for="ss">Segundo</label>:<input type="text" name="ss" id="ss" size="2"/>
	</fieldset>

<button type="submit" style="text-align: center; width: 100%;">actualizar</button>
</form>
<p>
	[rss]Si se prueba la opción donde se abre una nueva ventana, el reloj se adaptará a las dimensiones de ésta, debido a que la declaración de las dimensiones en la etiqueta svg es de 100%.[/rss]
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación