Archivo
Receta de Photoshop: Texto metalúrgico
Pues voy a ir subiendo algunas recetas cucas de Photoshop, por qué no?
Para obtener algo como esto:
- Archivo, Nuevo, 350 x 150, 28´346 pix/cm, escala de grises, transparente.
- Edición > Rellenar, usar negro, 100%, normal.
- Texto, click en sitio, Elige la fuente que quieras, Bold, Tamaño 50 ptos, Interlineado 100, Tracking 1, línea base 0, blanco (RGB=237).
- Teclear un Texto, Posicionar (Mover).
- Capa, triángulo, combinar hacia abajo.
- Imagen, Rotar Lienzo, 90ºACD.
- Filtro, Estilizar, Viento (Vendaval, desde izda).
- Imagen, Rotar Lienzo, 90ºAC.
- Filtro, Estilizar, Difusión (Normal).
- Filtro, Desenfocar, Desenfocar Más.
- Filtro, Distorisionar, Onda (gener=1, sinusoidal, long=118-120, amp=1-1, Escala 100%, repetir pixels borde).
- Imagen, Modo, Color Indexado, Acoplar capas OK.
- Imagen, Modo, Tabla de Colores Cuerpo negro.
Tabla para almacenar usuario y contraseña de aplicación
Estoy planteándome un sistema de LOGIN de usuario/contraseña para mi página web desarrollada en PHP. Entonces llega el momento en el que debo almacenar los datos en MySQL.
Lo primero que uno piensa es en crear una tabla llamada USUARIO con dos campos de tipo VARCHAR:
– Usuario
– Contraseña
Pero esto supone que cualquier usuario de MySQL con derechos de consulta a la tabla USUARIO podrá ver las contraseñas de todo el mundo.
¿Cómo solucionar esto?
MySQL provee de varios métodos para almacenar las contraseñas encriptadas.
MD5(str)
str)Calcula una checksum MD5 de 128-bit para la cadena. El valor se retorna como una cadena binaria de dígitos 32 hex ,o NULL si el argumento era NULL. El valor de retorno puede usarse como clave hash, por ejemplo.
mysql> SELECT MD5('testing');
-> 'ae2b1fca515949e5d54fb22b8ed95575'
Este es el «RSA Data Security, Inc. MD5 Message-Digest Algorithm.»
SHA1(str), SHA(str)
str)str)Calcula una checksum SHA1 de 160-bit para la cadena, como se describe en RFC 3174 (Secure Hash Algorithm). El valor se retorna como cadnea de 40 dítigos hexadecimales, o NULL si el argumento era NULL. Uno de los usos posibles para esta función es una clave hash. También puede usarlo como función criptográficamente segura para almacenar contraseñas
mysql> SELECT SHA1('abc');
-> 'a9993e364706816aba3e25717850c26c9cd0d89d'
SHA1() puede considerarse un equivalente criptográficamente más seguro que MD5(). SHA() es sinónimo de SHA1().
Creación de la tabla
Nuestra tabla debe tener 3 campos: Usuario, Método y Contraseña.
Método deberá ser sha1, md5 o texto.
Contraseña debe ser un VARCHAR(40), puesto que para almacenar el checksum de SHA1 necesitamos 40 dígitos.
La orden de creación será la siguiente:
CREATE TABLE usuarios_login(
usuario varchar(30) PRIMARY KEY,
contrasena enum('texto', 'sha1', 'md5'),
metodo varchar(40)
);
Insertar usuarios
Ejemplos:
INSERT INTO `usuarios_login` (`usuario`, `contrasena`, `metodo`)
VALUES ('fulanito', MD5('contrafulanito'), 'md5');
INSERT INTO `usuarios_login` (`usuario`, `contrasena`, `metodo`)
VALUES ('periquito', SHA1('contraperiquito1'), 'sha1');
INSERT INTO `usuarios_login` (`usuario`, `contrasena`, `metodo`)
VALUES ('profesor', 'contraprofe', 'texto');
INSERT INTO `usuarios_login` (`usuario`, `contrasena`, `metodo`)
VALUES ('guirado', SHA1('pedr1t0'), 'sha1');
Consultar usuarios
SELECT * FROM usuarios_login WHERE usr=’fulanito’ AND contrasena=MD5(‘contrafulanito’);
+—————+—————————————————+
| usr | contrasena | metodo |
+—————+—————————————————+
| fulanito | 24b5cf71922955eddd8fb1d3c52d2dc4 | md5
+—————+—————————————————+
1 row in set (0.00 sec).
Leer un archivo de texto
Para la lectura de un archivo de texto contamos con la función fgets. Además debemos abrir el archivo para lectura.
Para mostrar por pantalla el contenido del archivo «datos.txt» creado en el punto anterior tenemos el siguiente programa:
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
$ar=fopen("datos.txt","r") or
die("No se pudo abrir el archivo");
while (!feof($ar))
{
$linea=fgets($ar);
$lineasalto=nl2br($linea);
echo $lineasalto;
}
fclose($ar);
?>
</body>
</html>
Lo primero que debemos identificar es la forma de apertura del archivo:
$ar=fopen("datos.txt","r") or
die("No se pudo abrir el archivo");
El segundo parámetro de fopen es «r» es decir read (apertura para lectura), si el archivo no existe por ejemplo se ejecuta la función die que finaliza el programa mostrando el string correspondiente.
La función feof retorna true si se ha llegado al final del archivo en caso contrario retorna false. Para que se impriman todas las líneas del archivo se plantea una estructura repetitiva que se ejecuta mientras no se llegue al final de archivo:
while (!feof($ar))
Dentro de la estructura repetitiva leemos una línea completa del archivo de texto con la función fgets:
$linea=fgets($ar);
La variable $linea contiene una línea completa del archivo de texto, inclusive el salto de línea (\n)
Como el navegador no hace un salto de línea con este caracter, debemos convertir dicho caracter a la marca <br> propia de HTML. La función que realiza esta actividad se llama nl2br (new line to br)
El resultado se almacena en una nueva variable que es la que realmente imprimimos:
$lineasalto=nl2br($linea); echo $lineasalto;
Crear un archivo de texto
Una actividad fundamental es poder registrar información en el servidor (no como hemos estado haciendo hasta el momento generando sólo una página con los datos cargados).
Para la registración de datos en el servidor disponemos de dos herramientas que se complementan en muchos casos (archivos de texto y bases de datos).
En este apartado veremos como crear un archivo de texto y añadir datos al mismo.
Lo presentaremos al tema resolviendo un problema: Implementación de un libro de visitas.
Para resolver este problema plantearemos dos páginas, un formulario para realizar la carga del nombre del visitante y sus comentarios (disponemos un objeto de tipo «text» y otro de tipo «textarea»):
<html>
<head>
<title>Problema</title>
</head>
<body> <form action="pagina2.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre">
<br>
Comentarios:
<br>
<textarea name="comentarios" rows="10" cols="40">
</textarea>
<br>
<input type="submit" value="Registrar">
</form>
</body>
</html>
Este formulario es similar a los planteados en problemas anteriores, sólo le hemos agregado al control textarea, las propiedades rows y cols que dimensionan el mismo en la pantalla:
<textarea name="comentarios" rows="10" cols="40"> </textarea>
Veamos ahora la página (pagina2.php) que graba los datos cargados en el formulario en un archivo:
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
$ar=fopen("datos.txt","a") or
die("Problemas en la creacion");
fputs($ar,$_REQUEST['nombre']);
fputs($ar,"\n");
fputs($ar,$_REQUEST['comentarios']);
fputs($ar,"\n");
fputs($ar,"--------------------------------------------------------");
fputs($ar,"\n");
fclose($ar);
echo "Los datos se cargaron correctamente.";
?>
</body>
</html>
En primer lugar creamos o abrimos el archivo de texto «datos.txt». El segundo parámetro de la función fopen indica la forma de apertura de archivo «a» (lo crea o si ya existe el archivo lo abre para añadir datos al final), «w» (crea el archivo de texto, si existe borra su contenido) y la última forma de apertura del archivo es «r» (abre el archivo para su lectura).
Como en este problema nos interesa que el archivo vaya creciendo con los datos que aportan los visitantes al sitio lo abrimos para añadir, parámetro «a».
La función retorna una referencia al archivo, la almacenamos en una variable.
Si el archivo no se puede abrir, se ejecuta la instrucción que se encuentra luego del operador «or» en nuestro caso llamamos a la función die que finaliza la ejecución del programita PHP mostrando como mensaje el texto que le pasamos a dicha función.
$ar=fopen("datos.txt","a") or
die("Problemas en la creacion");
Para la grabación de datos utilizamos la función fputs que tiene dos parámetros: la referencia al archivo donde grabamos y el string a grabar.
fputs($ar,$_REQUEST['nombre']); fputs($ar,"\n");
Para el salto de línea en el archivo de texto, usamos los caracteres \n.De esta forma cuando leamos el archivo de texto lo haremos línea a línea. Cuando dejamos de trabajar con el archivo llamamos a la función fclose.
Hay que tener muy presente que el archivo se almacena en el servidor y no en la máguina de la persona que está navegando. Es decir, no vaya al explorador de archivos para ver donde se almacenó «datos.txt», tenga en cuenta que está en la máquina donde se ejecutó el script de PHP. Luego veremos como leer el contenido del archivo y mostrarlo en otra página del sitio (En nuestro caso como utilizamos el equipo como cliente/servidor el archivo datos.txt se crea en la misma carpeta donde se alojan nuestras páginas php)
Ejercicio 5 CSS. Texto
A partir del siguiente texto:
Estilos: Trabajando con textos. Párrafo sin estilos (no hacemos uso de ninguna CSS): ese párrafo esta en negrita y cursiva. También ha sido indentado para que no llegue a los bordes. Todo esta realizado desde el panel de propiedades en las opciones HTML. Se aconseja el uso de estilos para el diseño de la página, aunque el HTML permite añadir atributos y otras posibilidades para el diseño la tendencia es que acabe utilizandose exclusivamente para los contenidos. Estilo en linea (afecta unicamEnte a este elemento, va incorporado en la etiqueta HTML) Estilo para las etiquetas <h3> (afecta a todas las etiquetas <h3>) Estilo para la clase .clase (se aplica a cualquier etiqueta cuya clase sea establecida a este tipo). Siempre empieza por un punto. Esto es un texto en una etiqueta h4 pero le aplicamos la misma clase que al parrafo anterior->.clase Estilo a un id (se aplica al elemento que este identificado con ese id). En una página cada id debe ser exclusivo de una sola etiqueta (lo que hemos hecho en esta página con un id repetido sería incorrecto) Texto en h3 Texto con .clase Misma id
Consigue la siguiente página:
//
Dirección del texto
direction
Indica la dirección en la que se muestra el texto y su valor también lo utilizan otras propiedades CSS.
Valores permitidos
Uno y sólo uno de los siguientes valores:
- ltr
- rtl
Algunos idiomas como el árabe y el hebreo, muestran los caracteres de sus textos desde la derecha hacia la izquierda, al contrario que la mayoría de idiomas. Por este motivo, las páginas que contienen algún texto escrito en esos idiomas muestran el texto en dos direcciones diferentes. Este comportamiento se denomina bidireccionalidad, aunque se suele abreviar como «bidi».
El estándar Unicode define un algoritmo muy complejo para determinar el sentido correcto de cada bloque de texto. Además de tener en cuenta el propio contenido del texto, el algoritmo permite controlar y modificar la dirección del texto de forma explícita.
La propiedad direction define dos valores para establecer la dirección del texto de un elemento:
ltr, muestra el texto escrito de izquierda a derecha y es el que utilizan los navegadores por defecto.rtl, muestra el texto escrito de derecha a izquierda.
Además de la dirección del texto y la posición de la última línea de un elemento con su texto justificado (text-align: justify), el valor de la propiedad direction también determina la dirección de las columnas de las tablas y la dirección del desbordamiento horizontal (propiedad overflow) .
unicode-bidi
Establece el comportamiento del algoritmo utilizado para el texto bidireccional.
Valores permitidos
Alguno o todos los siguientes valores y en cualquier orden:
- normal
- embed
- bidi-override
La propiedad unicode-bidi guarda relación con la propiedad direction, ya que se emplea cuando una página HTML contiene texto escrito en idiomas con diferentes direcciones de escritura. Algunos idiomas como el árabe y el hebreo escriben sus contenidos de derecha a izquierda, mientras que la mayoría de idiomas utilizan el sentido contrario.
La propiedad direction permite indicar la dirección en la que están escritos los contenidos de cada elemento de la página, de forma que el navegador pueda mostrarlos correctamente. La dificultad reside en que un mismo elemento, como por ejemplo un mismo párrafo, puede tener contenidos escritos en las dos direcciones. Este comportamiento se denomina bidireccionalidad y suele abreviarse por bidi.
El estándar Unicode define un algoritmo muy complejo para determinar correctamente la direccionalidad del texto. El estándar HTML utiliza este mismo algoritmo tal.
.
Estilos de texto
Los siguientes estilos se aplican a los párrafos. Podemos cambiar el alto de la línea, darle una decoración al párrafo, alinearlo, etc. Vamos a verlos más detalladamente a continuación.
Estilo text-decoration
Este estilo lo utilizaremos para darle un aspecto diferente al párrafo. Así podremos subrayarlo (underline), sobrerayarlo (overline) o tacharlo (line-through). A continuación podremos ver un ejemplo de cada uno de estos estilos. El código sería el siguiente:
Y el resultado que veremos a continuación salta a la vista:
Estilo text-align
Gracias al siguiente estilo podemos alinear el texto a la izquierda (left), a la derecha (right), al centro (center) o justificarlo (justify). Vamos a ver el código de tres párrafos: uno alineado al centro, otro a la izquierda y otra a la derecha.
| <div style=»text-align:center;»>Este texto estará alineado al centro. </div> <div style=»text-align:right;»>Este texto estará alineado a la derecha. </div> <div style=»text-align:left;»>Este texto estará alineado a la izquierda. </div> |
Y el resultado es evidente:
Estilo text-indent
Este estilo es muy práctico. Gracias a él podemos hacer sangrados o márgenes en los párrafos. Para ello debemos indicarle un valor numérico que será el tamaño del sangrado.
Vamos a ver el código de un ejemplo para que lo veamos más claro:
| <div style=»text-indent:15px;»>Este texto tiene un sangrado de 15 pixeles.</div> <div style=»text-indent:60px;»>Este texto tiene un sangrado de 60 pixeles.</div> |
A continuación podemos apreciar el resultado:
Estilo text-transform
Este estilo nos permite cambiar la apariencia del párrafo. Gracias a él podemos cambiar todo el texto a mayúsculas (uppercase), todo el texto a minúsculas (lowercase) o hacer que todas las primeras letras del párrafo se conviertan en mayúsculas (capitalize).
Vamos a ver el código del ejemplo que hemos puesto para apreciar el resultado de las diferentes opciones del estilo text-transform.
| El siguiente texto va a explicarnos los diferentes resultados que podemos conseguir mediante el estilo text-transform: <span style=»text-transform:uppercase;»>como vemos aqui podemos hacer que todo un parrafo este en mayusculas</span> y <span style=»text-transform:lowercase;»>QUE TODO UN PARRAFO ESTE EN MINUSCULAS.</span> <span style=»text-transform:capitalize;»>Y también que las primeras letras se conviertan automáticamente a mayúsculas.</span> |
Observa el resultado a continuación:
..
//
Ejercicio 15. Hundir texto en una imagen.
Para conseguir este efecto:
Abrimos el fichero.
Desbloqueamos la capa.
Escribimos una Máscara de texto horizontal sobre el pato.
Copiamos y pegamos la selección (se genera una nueva capa).
Sobre esta nueva capa aplicamos la Opción de Fusión: Sombra interior.
Modificamos los Ajustes de la capa cambiando el Brillo y el Contraste, bajándolos a -50 y -25.
//
Ejercicio 15. Composición de Formas, Textos y Recortes.
- Abre la imagen rio.jpg de la carpeta de ejercicios.
- Utilizando recortes de capas deberás crear un nuevo documento con formas y texto donde utilizarás como fondo para el recorte zonas de esta imagen hasta conseguir la siguiente composición:
//
Ejercicio 14. Composición de texto y formas.
Vamos a crear esta imagen a partir de formas simples y un poco de texto:
|
|
|
 |
|
|
rellena la capa entera de color blanco. Para ello asegúrate de que el color Frontal es de ese mismo color.
y haz clic en el desplegable Forma 
.
y carga la biblioteca Web. El sistema te preguntará que si estás seguro, dile que sí.
.
en la ventana de Capas.
, mantén pulsada la tecla Shift 
(para mantener las proporciones 1 a 1) y dibuja la forma en el lienzo.
.
para aceptar los cambios.
.
coloca todas las capas de la forma que creas conveniente.Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 