Foros del Web » Creando para Internet » Diseño Gráfico »

Tutorial: Todo sobre el upload de imágenes al foro

Estas en el tema de Tutorial: Todo sobre el upload de imágenes al foro en el foro de Diseño Gráfico en Foros del Web. Subir imágenes al foro Bien, comencemos por un par de buenos links para subir imágenes: http://imageshack.us http://picsplace.to/ Ambos son buenos, pero su servicio incluye un ...
  #1 (permalink)  
Antiguo 17/05/2005, 07:11
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Tutorial: Todo sobre el upload de imágenes al foro

Subir imágenes al foro

Bien, comencemos por un par de buenos links para subir imágenes:

http://imageshack.us

http://picsplace.to/


Ambos son buenos, pero su servicio incluye un precio extra para los "flojos" y es linkear automáticamente la imagen que posteamos hacia su sitio. No es obligatorio para nosotros proporcionar un enlace a su página, sólo que el link está allí para quienes sólo se limiten al copy-paste.

Hice dos versiones de un upload: una con el método de Imageshack (Izquierda) y otra con el método que explicaré (A la derecha). Nota (Clickeando a la izquierda) que la imagen grande sale en medio de alguna publicidad. En cambio la miniatura de la imagen de la derecha nos da un link limpio y sin anuncios por ningún lado:



Pasos:

1.- Primeramente debemos cambiar nuestro editor de imágenes al modo "Editor estándar - Controles extra". Sí ya sé. No es tan "bonito" como el WYSIWIG pero nos da más opciones. Es como un auto sincrónico: al principio es un poquito difícil acostumbrarse pero después no lo cambias por ninguno. Es decir, con el Editor Estándar no visualizas en tiempo real lo que estás haciendo (Aunque siempre puedes actualizar con el botón "Vista previa del mensaje" ubicado justo debajo de tu caja de texto.

Ok estos son los pasos para cambiar tu editor:
  • Haz click en el link "Panel de Control" ubicado en la parte superior izquierda de la ventana de Foros del Web.

  • Luego en el menú lateral izquierdo escoges "Editar opciones"

  • Baja al fondo de la página y encontrarás el apartado "Otras opciones". Allí cambias a "Editor estándar - Controles extra" tal como lo puedes ver en la siguiente imagen:



  • Haces click en aceptar y vuelves al foro.

2.- Tenemos entonces la imagen de nuestra preferencia y procedemos a hacerle una versión en miniatura. Le reducimos el tamaño a 150 píxeles de ancho (O lo que desees) y la guardamos como un documento aparte. Esto fue lo que hice con un perrito muy gracioso, la imagen se llama perro35te.jpg y su versión pequeña perro3th2gr.jpg.

3.- Ingresa ahora a cualquiera de los dos image hosting mencionados. En este tema utilizaremos Imageshack como ejemplo, dado que es el más utilizado aquí. Sube cada una de las 2 imágenes que creaste (La pequeña y la grande), recordando anotar la dirección que el hosting te proporciona (Usa para ello el block de notas y las funciones Copiar y Pegar, sobre todo si son varias las imágenes que subirás).

Cuando entres a las distintas direcciones que te da, olvídate de las demás y toma la que está en la octava fila contando de arriba a abajo, tal como lo puedes ver aquí:



Se trata de una dirección pura, sin etiquetas de ningún tipo ya que tú serás quien se las pondrá, es decir, tendrás el control.

____________________________

Como ya configuraste tu editor (Paso 1),
ahora puedes ejecutar comandos que con el otro no podías.
Uno de ellos tiene que ver con las imágenes y la forma de enlazarlas,
por ejemplo las miniaturas.

____________________________



4.- Ahora lo que vamos a hacer es lograr que Foros del Web "comprenda" que estamos posteando una imagen y no otra cosa. Para ello usamos las etiquetas [img] (para abrir) y [/img] (para cerrar). En otras palabras, vamos a etiquetar el enlace para que pueda aparecer la imagen en el foro. El código quedaría de esta forma:
Código PHP:
[img]http://img160.echo.cx/img160/7854/perro3th2gr.jpg[/img] 
Y se vería así:



____________________________

Bien. Ahora tenemos que decirle a nuestro perrito perro3th2gr.jpg
que tiene un hermano mayor llamado perro35te.jpg.

____________________________



5.- Lo que vamos a hacer ahora es crear un link sobre el perrito para que él mismo nos muestre al perrote, quien va a aparecer en una ventana nueva cuando hagamos click.

Agarramos al pequeño (Que ya tiene las etiquetas) y lo cubrimos con otras etiquetas, esta vez se trata de url (para abrir) y /url (para cerrar). Ellas sirven para indicar que existe una página web que se abrirá al hacer click. Entonces ya el código queda así:
Código PHP:
[url][img]http://img160.echo.cx/img160/7854/perro3th2gr.jpg[/img][/url] 
Como puedes ver, las etiquetas se agregaron encima de las que ya tenía.

6.- Ya agregamos las etiquetas pero ¿Adónde llevan?. Es el momento de tomar la dirección del perrote y pegarla para finalizar el trabajo. Esto se logra yendo a la primera etiqueta url y agregándole un signo "igual" (=) para después pegar la dirección web. Eso se vería de esta manera:
Código PHP:
[url=http://img221.echo.cx/img221/9721/perro35te.jpg][img]http://img160.echo.cx/img160/7854/perro3th2gr.jpg[/img][/url] 
La lógica sería así:
Código PHP:
[url=Dirección del perrote][img]Dirección del perrito[/img][/url
El resultado es el mismo que viste al principio (Imagen de la derecha)

_________________________________




Este método no sólo sirve para postear imágenes. Puedes linkear páginas webs a tu gusto como por ejemplo el foro de nuestro amigo [email protected]:



o un acercamiento del foro del pana Caminante:



Aquí otro ejemplo de miniaturas en un post.

Incluye también otras opciones, puedes echar mano a gifs animados y hasta texto simple. Por ejemplo, este link nos lleva a los logos del millón. Así quedó el código anterior:
Código PHP:
[url=http://www.forosdelweb.com/millon/van.php]este link[/url] 
Volviendo al tema de las imágenes, este recurso nos sirve cuando, por ejemplo, tenemos poco espacio en la web y decidimos subir nuestras imágenes (Son los archivos que más pesan) a algún servidor externo. Si se procede de la manera explicada, obtendrás una buena imagen sin publicidad molesta alrededor.

___________________________________


Para usuarios de Firefox

Existe una extensión llamada BBCode, la cual te ahorrará el trabajo de colocar los códigos manualmente, ya que los agrega con sólo un click derecho, desplegándose un menú similar a éste:



La extensión BBCode la puedes bajar gratuitamente de la página de su autor:

http://jedbrown.net/1.0/mozilla/extensions/

Se instala automáticamente, sólo debes cerrar tu Firefox y volverlo a abrir para que los cambios surtan efecto.

Lamentablemente dicha ventaja no está disponible para usuarios de Internet Explorer, ya que no es un navegador de código abierto y por ende su desarrollo depende del estado de humor de Bill Gates.

___________________________________


Notas:
  • Cuando postees imágenes, procura que no sobrepasen los 400 píxeles de ancho. Así no deformarás (ensancharás) el espacio del post y simultáneamente darás la oportunidad a otros compañeros de citar tu mensaje (con todo e imagen) sin dañar el formato del foro. Si es necesario mostrar la imagen a un tamaño mayor, haz una miniatura y linkéala como se explicó.

  • Procura asignarle una calidad no muy alta a tus jpg, así pesarán menos y tu post se mostrará más rápido. Prueba con valores de 5 a 7, siendo 1 el menor y 12 el mayor. Igualmente a los gif animados. Juega con la optimización y busca la mejor relación calidad - peso.

  • Recuerda que no [email protected] [email protected] [email protected] tienen conexión de banda ancha. Piensa en [email protected], seguro agradecerán tu gesto al notar que la información baja con rapidez.

___________________________________


Documentación:

¿Cómo subir imagenes al foro? por Dennyboy

Guía BBCode. para foros vbulletin.

Última edición por metacortex; 20/05/2005 a las 20:13 Razón: Corregir enlaces rotos y agregar notas.
  #2 (permalink)  
Antiguo 12/06/2006, 15:02
Avatar de pichonservis
(Desactivado)
 
Fecha de Ingreso: junio-2006
Ubicación: Peru / Chimbote
Mensajes: 364
Antigüedad: 11 años, 6 meses
Puntos: 1
Puccha te pasastes amigo esta locazo este tema ..ya lo ise ..y si esta bien... Grandoso..
  #3 (permalink)  
Antiguo 12/06/2006, 15:03
Avatar de pichonservis
(Desactivado)
 
Fecha de Ingreso: junio-2006
Ubicación: Peru / Chimbote
Mensajes: 364
Antigüedad: 11 años, 6 meses
Puntos: 1
ha...sbes amigo me gustaria tener mas tutoriales ... pon mas si ...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 15:18.