Inframundo
El mundo de los videojuegos visto desde una vision latinoamericana... O por lo menos desde la mia...
Pareciera que fue ayer cuando, tímidamente, abrí este blog (que es casi como el Inframundo), sin saber literalmente nada. Ni siquiera el fondo que ven detrás de éstas líneas fue hecho por mí. Y sin embargo, aquí estoy yo, escribiendo un tutorial para todos ustedes...
Y el tutorial será, ni más ni menos, que aprender a alinear un texto y una imagen paralelamente, tal como hice en mi ficha de fatal frame, o como hace Baalard con sus índices.
Lo primero y más importante a tener en cuenta si deseamos alinear un imagen y un texto, es tener los siguientes elementos:
-Un blog (Jamás se me habría ocurrido)
-Una imagen (¿De veras?)
-Un texto (No jodas!!!)
Devil, no me estás ayudando...
Como ejemplo, utilizaré una porción de mi ficha de Fatal Frame 2, la correspondiente a la Mujer del Cuello Roto me pareció la más adecuada.
En cualquier caso, como primer paso fundamental, escribiremos el texto correspondiente. Recomiendo utilizar textos de un tamaño medio-largo, ya que de otra forma, no tendría mucho sentido alinearlo a las imágenes.
Luego, tendremos que insertar la imagen en la entrada, para ello, vale con utilizar un simple copiar y pegar, pero como algunos navegadores no permiten eso, tendremos que copiar el código de la imagen, algo fácil si la buscamos vía google, pero suponiendo que la encontremos en otra entrada de gamefilia, sólo podremos visualizar el código de la imagen haciendo click derecho, propiedades, y copiando donde dice "Dirección" o "URL"
Yo, particularmente, recomiendo utilizar imágenes angostas y largas, porque si son demasiado anchas tapan el texto (y más sabiendo el poco espacio de texto que tienen las entradas de blog), por lo que lo mejor es utilizar imágenes que no sobrepasen los 150 píxeles de ancho.
Una vez que ya hayamos seleccionado la imagen, la colocaremos en un lugar al azar dentro del mismo texto, pero aquí es donde vienen los problemas, ya que si lo hacemos de ésta forma, al colocar la imagen nos quedará algo como ésto:
No te preocupes si te queda así a la primera, porque es normal que ocurra eso, es más, si no ocurriese de esa forma, éste tutorial no tendría razón de ser.
Ahora, aquí viene el secreto: al igual que el texto, a las imágenes tambien se las puede alinear a la izquierda o a la derecha. Por lo cual, para alinear ambas cosas, sólo es necesario mantener seleccionada la imagen (sabrás que es así porque tendrá unos puntos blancos a su alrededor), y luego alinearlos a la izquierda o a la derecha con sus correspondientes botones. Cuando vayas a hacerlo, ten muy en cuenta que las alineaciones centradas y justificadas NO SIRVEN para esto, y dejarán a la imagen sin alinear.
Si lo has hecho correctamente, te tendría que quedar algo como lo de arriba. Ahora que ya superaste la parte "difícil", tan sólo queda acomodar la imagen, por lo cual debes hacer click y arrastrarla hasta el punto del texto donde quieres que aparezca el tope de la imagen, y, ayudándote con la vista previa, alinearla hasta que te complazca el resultado.
Por lo cual, si has prestado atención, el resultado debería ser éste:
Hasta otra!!!!
El mundo de los videojuegos visto desde una vision latinoamericana... O por lo menos desde la mia...
-Expediente RE5 (VIII): El misterio de la Mujer-Pájaro
-¿Silent Hill Perdona nuestros pecados?
-Resident Evil Degeneration: Análisis
-Jill Valentine: The True Story
El Guardián Capítulo X: El Llamado Divino
-Jill Valentine: The True Story
-Ficha Fatal Frame 2: Crimson Butterfly
-Ficha Fatal Frame 2: Crimson Butterfly
-Tutorial: Cómo alinear la imágenes para que queden paralelas al texto10 cosas que no conocías de fabrimuch
-Ficha Fatal Frame 2: Crimson Butterfly

9 Comentarios:
Buen tuto
29 de Abril de 2009 • 03:08 — LoganKellerEsto me lo sabía yo (Aunque nunca lo he necesitado) pero puede ser útil a mucha gente
¡Buen post! ^^
No soy de poner imagenes alineadas
29 de Abril de 2009 • 08:22 — RikkuInTheMiddleGenial explicación! Y
29 de Abril de 2009 • 08:46 — electroblogGran entrada
29 de Abril de 2009 • 11:00 — DesmodiusUn tutorial muy útil y ameno para este aspecto gráfico, amigo Fabri. Francamente, no sabía cómo hacerlo; pero ahora intentaré valerme de "este truco" más a menudo; le da muy buena presentación a las entradas. Cinco estrellas, claro.
Saludos,
Desmodius.
Ah si, ya lei ayer la
29 de Abril de 2009 • 23:08 — HeyperAh si, ya lei ayer la entrada, lo que pasa es que no comente, me conecte con prisa, y apenas vi las entradas de los compañeros.
Ahora que leo de nuevo el tutorial, me parece una gran explicación, para mi me viene útil, porque utilizo imagenes similares a la del ejemplo xD.
Un saludo, y no pasa nada por haber comentado 2 veces en mi blog!!
Muy buen tutorial fabri,
1 de Mayo de 2009 • 14:49 — ShaiyiaMuy buen tutorial fabri, estoy segura que ayudará a mucha gente que acaba de empezar en estas cosillas ^^
5 estrellas y una mini portada con retraso, pero participando en la portada semanal ^^
MEDALLA
1 de Mayo de 2009 • 19:20 — HeyperBien, aqui te dejo tu merecida medalla por participar en el concurso Da Vinci. Un saludo!
Órale
1 de Mayo de 2009 • 22:44 — Lord-Areg (invitado)Breve y directo. Gracias por el aporte :)
3 de Mayo de 2009 • 15:49 — markus