RED ESCUELA.: Agregar Imagenes | Historial
Principal » Agregar Imagenes

Principal.AgregarImagenes Historia

Oculta ediciones menores - Muestra los cambios de salida

Líneas cambiada 5-7 desde:
%color=#ff8c00 center%'''[+++IMAGENES EN LAS PAGINAS+++]'''\\
para
%color=#ff8c00 center%'''[+++IMAGENES EN EL CONTENIDO LAS PAGINAS+++]'''\\
Líneas cambiada 22-23 desde:
(:div style="background-color:#ffdddd; border:2px solid red;width:640px; padding:10px; font-size:smaller; align=center";:)
%lfloat%Attach:importante.jpg
para
(:div style="background-color:#f5f5f5; border:2px solid #ff8c00; width:640px; padding:10px; font-size:smaller; align=center";:)
Líneas cambiada 10-11 desde:
'''1.''' En la página que estás editando ubicar el cursor en la posición donde quieres que aparezca tu imagen dentro del Área de Edición de Contenido y Haz clic en el botón '''Adjuntar Fichero''' Attach:Home/guiaarchivo.jpg de la barra de herramientas.
para
'''1.''' En la página que estás editando ubicar el cursor en la posición donde quieres que aparezca tu imagen dentro del Área de Edición de Contenido y Haz clic en el botón '''Adjuntar Fichero''' Attach:guiaarchivo.jpg de la barra de herramientas.
Líneas cambiada 14-15 desde:
-->Attach:Home/guiaattach.jpg
para
-->Attach:guiaattach.jpg
Líneas cambiada 20-21 desde:
-->Attach:Home/guiaattach2.jpg
para
-->Attach:guiaattach2.jpg
Línea cambiada 23 desde:
%lfloat%Attach:Home/importante.jpg
para
%lfloat%Attach:importante.jpg
Líneas cambiada 34-35 desde:
-->Attach:Home/guiaattach3.jpg
para
-->Attach:guiaattach3.jpg
Líneas cambiada 38-40 desde:
%cframe width=476px% Attach:Home/guiasubir_imagen.jpg | '-''Formulario para cargar imágenes''-'
para
%cframe width=476px% Attach:guiasubir_imagen.jpg | '-''Formulario para cargar imágenes''-'
Líneas cambiada 43-44 desde:
%cframe width=476px% Attach:Home/guiasubir_imagen2.jpg | '-''Casilla para buscar la imagen en el disco de la PC''-'
para
%cframe width=476px% Attach:guiasubir_imagen2.jpg | '-''Casilla para buscar la imagen en el disco de la PC''-'
Líneas cambiada 47-55 desde:
%cframe width=476px% Attach:Home/guiasubir_imagen4.jpg |'-''Mensaje que comunica el éxito de la carga''-'

>>cframe width:'468px'<<
%lfloat%Attach:sugerencia.gif
Si en caso la imagen no se guardó porque era muy pesada\\
entonces te sugerimos leer sobre los métodos para \\
[[EscuelaTic/TheGimp-BajarElPeso|Bajar el Peso de una Imagen]]
[[<<]]
>><<
para
%cframe width=476px% Attach:guiasubir_imagen3.jpg |'-''Mensaje que comunica el éxito de la carga''-'
Líneas cambiada 142-143 desde:
[[<<]]
para
[[<<]]
Líneas borrada 0-1:
%orange center%'''[+++IMAGENES EN LAS PAGINAS+++]'''\\
%orange center%'''[+Agregar y Mejorar el aspecto de las imágenes+]'''
Líneas cambiada 2-25 desde:
!
'''[+Consideraciones previas+]'''

Antes de insertar imágenes dentro de tus temas debes leer estas recomendaciones importantes
:

*Solo puedes agregar imágenes a tus páginas que sean de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.

->Puedes obtener imágenes libres desde las siguientes direcciones:
-->http://www.epictura.com/es
-->http://www.openclipart.org
-->http://www.matton.es/clipart

*Es importante que las imágenes que deseas agregar en tu página estén previamente preparadas en cuanto a resolución, calidad y tamaño. Para mejorar la calidad de tus imágenes puedes leer el siguiente manual:[[EscuelaTic/TheGimp-TheGimp| Tutorial de Gimp]]

*Es recomendable que las imágenes solo tengan 50Kb. de peso máximo. Esto ayuda a que tu página cargue más rápido y se muestren todas tus imágenes con un mejor tamaño. Para conocer sobre estos métodos puedes leer el [[EscuelaTic/TheGimp-BajarElPeso|Tutorial para Bajar Peso a una Imagen]]

*Las imágenes como todo contenido de los temas en RedEscuela deben cumplir con las Condiciones de Uso descritas en el Artículo 4 dentro del portal RedEscuela.\\
Para conocer las condiciones de uso en RedEscuela [[Principal/PoliticasOficiales|Haz clic aquí]]


!

'''[+Pasos para Agregar imágenes a un tema+]'''
para
(:title Agregar Imagenes:)
[[<<]]

%color=#ff8c00 center%'''[+++IMAGENES EN LAS PAGINAS+++]'''\\


%color=#ff8c00%'''[+Pasos
para Agregar imágenes a un tema+]'''
Líneas borrada 142-148:

(:div align=center style='align:center; border:4px dotted white; padding:10px; background-color:orange; width:450px':)
%white center%%newwin%'''[+&#9658; [[WikiEscuela/ConociendoPizarra|Ver ARTICULO MODELO con imágenes]]+]'''
(:divend:)


(:include Base/GuíaDeEstilos#ejemplos:)
Líneas cambiada 159-160 desde:
para
[[<<]]
[[<<]]

(:div align=center style='align:center; border:4px dotted white; padding:10px; background-color:orange; width:450px':)
%white center%%newwin%'''[+&#9658; [[WikiPizarra/ConociendoPizarra|Ver ARTICULO MODELO con imágenes]]+]'''
(:divend:)


(:include Base/GuíaDeEstilos#ejemplos:)
Líneas cambiada 21-24 desde:
*Las imágenes como todo contenido de los temas en RedEscuela deben cumplir con las Condiciones de Uso descritas en el Artículo 4 dentro del portal RedEscuela.'''\\
Para conocer las condiciones de uso en RedEscuela '''[[Principal/PoliticasOficiales|Haz clic aquí]]
para
*Las imágenes como todo contenido de los temas en RedEscuela deben cumplir con las Condiciones de Uso descritas en el Artículo 4 dentro del portal RedEscuela.\\
Para conocer las condiciones de uso en RedEscuela [[Principal/PoliticasOficiales|Haz clic aquí]]
Líneas cambiada 22-24 desde:
Para conocer las condiciones de uso en RedEscuela puedes '''[[Principal/PoliticasOficiales|Hacer clic aquí]]'''
para
Para conocer las condiciones de uso en RedEscuela '''[[Principal/PoliticasOficiales|Haz clic aquí]]
Líneas cambiada 10-11 desde:
*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.
para
*Solo puedes agregar imágenes a tus páginas que sean de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.
Líneas cambiada 56-58 desde:
-->Attach:Home/guiasubir_imagen.jpg
para
%cframe width=476px% Attach:Home/guiasubir_imagen.jpg | '-''Formulario para cargar imágenes''-'
Líneas cambiada 61-62 desde:
%center%Attach:Home/guiasubir_imagen2.jpg
para
%cframe width=476px% Attach:Home/guiasubir_imagen2.jpg | '-''Casilla para buscar la imagen en el disco de la PC''-'
Líneas cambiada 65-66 desde:
%center%Attach:Home/guiasubir_imagen4.jpg
para
%cframe width=476px% Attach:Home/guiasubir_imagen4.jpg |'-''Mensaje que comunica el éxito de la carga''-'
Líneas cambiada 10-12 desde:
*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.\\

->Puedes obtener imágenes libres desde las siguientes direcciones:\\
para
*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.

->Puedes obtener imágenes libres desde las siguientes direcciones:
Líneas cambiada 11-12 desde:
Puedes obtener imágenes libres desde: http://www.epictura.com/es/
para

->
Puedes obtener imágenes libres desde las siguientes direcciones:\\
-->http:
//www.epictura.com/es
-->http://www.openclipart.org
-->http://www.matton.es/clipart
Líneas cambiada 10-11 desde:
*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.
para
*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.\\
Puedes obtener imágenes libres desde: http://www.epictura.com/es/
Líneas cambiada 120-121 desde:
[@%align='absmiddle'%Attach:imagen.jpg@]
para
[@%align='absmiddle'%Attach:imagen.jpg
Texto al medio@]
Líneas cambiada 123-124 desde:
%align='absmiddle'%Attach:guia_imagen3.jpg Texto al medio de la imagen.
para
%align='absmiddle'%Attach:guia_imagen3.jpg Texto al medio
Líneas cambiada 122-123 desde:
%align='absmiddle'%Attach:guia_imagen3.jpg Este texto está al medio de la imagen.
para
%align='absmiddle'%Attach:guia_imagen3.jpg Texto al medio de la imagen.
Línea cambiada 91 desde:
[@%width='120px'%Attach:Home/imagen.jpg@]
para
[@%width='120px'%Attach:imagen.jpg@]
Líneas cambiada 93-94 desde:
Attach:Home/guia_imagen1.jpg
para
Attach:guia_imagen1.jpg
Línea cambiada 98 desde:
[@%height='150px'%Attach:Home/imagen.jpg @]
para
[@%height='150px'%Attach:imagen.jpg @]
Líneas cambiada 100-101 desde:
Attach:Home/guia_imagen2.jpg
para
Attach:guia_imagen2.jpg
Líneas cambiada 107-108 desde:
Attach:Home/guia_imagen3.jpg
para
Attach:guia_imagen3.jpg
Línea cambiada 112 desde:
[@%center%Attach:Home/imagen.jpg@]
para
[@%center%Attach:imagen.jpg@]
Líneas cambiada 114-116 desde:
%center%Attach:Home/guia_imagen3.jpg
para
%center%Attach:guia_imagen3.jpg
Línea cambiada 120 desde:
[@%align='absmiddle'%Attach:Home/imagen.jpg@]
para
[@%align='absmiddle'%Attach:imagen.jpg@]
Líneas cambiada 122-123 desde:
%align='absmiddle'%Attach:Home/guia_imagen3.jpg Este texto está al medio de la imagen.
para
%align='absmiddle'%Attach:guia_imagen3.jpg Este texto está al medio de la imagen.
Línea cambiada 127 desde:
[@%lfloat%Attach:Home/imagen.jpg
para
[@%lfloat%Attach:imagen.jpg
Línea cambiada 133 desde:
%lfloat%Attach:Home/guia_imagen3.jpg
para
%lfloat%Attach:guia_imagen3.jpg
Línea cambiada 139 desde:
[@%rfloat%Attach:Home/guia_imagen3.jpg
para
[@%rfloat%Attach:guia_imagen3.jpg
Línea cambiada 145 desde:
%rfloat%Attach:Home/guia_imagen3.jpg
para
%rfloat%Attach:guia_imagen3.jpg
Línea añadida 116:
Línea cambiada 118 desde:
'''Alinear el texto a la derecha de la imagen'''
para
'''Alinear el texto al medio de la imagen'''
Líneas cambiada 120-124 desde:
[@%lfloat%Attach:Home/imagen.jpg
Esta imagen tiene un formato que
alinea la imagen a la izquierda
y coloca el texto a la derecha
de la misma.
@]
para
[@%align='absmiddle'%Attach:Home/imagen.jpg@]
Líneas cambiada 122-124 desde:
%lfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que alinea la imagen a la izquierda y coloca el texto a la derecha de la misma.
para
%align='absmiddle'%Attach:Home/guia_imagen3.jpg Este texto está al medio de la imagen.
Línea cambiada 125 desde:
'''Alinear el texto a la izaquierda de la imagen'''
para
'''Alinear el texto a la derecha de la imagen'''
Línea cambiada 127 desde:
[@%rfloat%Attach:Home/guia_imagen3.jpg
para
[@%lfloat%Attach:Home/imagen.jpg
Línea cambiada 133 desde:
%rfloat%Attach:Home/guia_imagen3.jpg
para
%lfloat%Attach:Home/guia_imagen3.jpg
Líneas añadidas 135-146:

(:cellnr style='padding:5px;':)
'''Alinear el texto a la izaquierda de la imagen'''
(:cell style='padding:5px;':)
[@%rfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que
alinea la imagen a la izquierda
y coloca el texto a la derecha
de la misma. @]
(:cell style='padding:5px;':)
%rfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que alinea la imagen a la izquierda y coloca el texto a la derecha de la misma.
Líneas añadidas 1-146:
%orange center%'''[+++IMAGENES EN LAS PAGINAS+++]'''\\
%orange center%'''[+Agregar y Mejorar el aspecto de las imágenes+]'''
(:description Agregar y Mejorar el aspecto de las imágenes en RedEscuela:)

!
'''[+Consideraciones previas+]'''

Antes de insertar imágenes dentro de tus temas debes leer estas recomendaciones importantes:

*Solo puedes agregar imágenes a tus páginas que sea de tu propiedad, creadas por tí o que el autor o creador de la imagen te haya dado permiso de publicarlas en este portal. No puedes agregar imágenes de otros sitios web ni escaneadas de un libro.

*Es importante que las imágenes que deseas agregar en tu página estén previamente preparadas en cuanto a resolución, calidad y tamaño. Para mejorar la calidad de tus imágenes puedes leer el siguiente manual:[[EscuelaTic/TheGimp-TheGimp| Tutorial de Gimp]]

*Es recomendable que las imágenes solo tengan 50Kb. de peso máximo. Esto ayuda a que tu página cargue más rápido y se muestren todas tus imágenes con un mejor tamaño. Para conocer sobre estos métodos puedes leer el [[EscuelaTic/TheGimp-BajarElPeso|Tutorial para Bajar Peso a una Imagen]]

*Las imágenes como todo contenido de los temas en RedEscuela deben cumplir con las Condiciones de Uso descritas en el Artículo 4 dentro del portal RedEscuela.'''\\
Para conocer las condiciones de uso en RedEscuela puedes '''[[Principal/PoliticasOficiales|Hacer clic aquí]]'''


!
'''[+Pasos para Agregar imágenes a un tema+]'''

'''1.''' En la página que estás editando ubicar el cursor en la posición donde quieres que aparezca tu imagen dentro del Área de Edición de Contenido y Haz clic en el botón '''Adjuntar Fichero''' Attach:Home/guiaarchivo.jpg de la barra de herramientas.

'''2.''' Te aparecerá un texto como el siguiente:

-->Attach:Home/guiaattach.jpg

Debes reemplazar el texto que dice file.ext por el nombre de tu imagen. Recuerda que para agregar imágenes en la Web se recomienda que sean de tipo '''.jpg , .gif , .png'''

Ejemplo:

-->Attach:Home/guiaattach2.jpg

(:div style="background-color:#ffdddd; border:2px solid red;width:640px; padding:10px; font-size:smaller; align=center";:)
%lfloat%Attach:Home/importante.jpg
%justify%'''IMPORTANTE:''' En los nombres de archivos NO debes incluir '''ñ''' (eñes) , tampoco acentos , y evitar de dejar espacios cuando quieras separar palabras, puedes utilizar guion bajo.\\
Para los nombres de archivos de imágenes debes seguir la NormasDeAlmacenamiento de archivos que indica: Un nombre de imagen debe ser guardada colocando primero una palabra sobre el tema del que se trata la página seguida de la numeración de la imagen:\\
Ejemplo: Si se estás subiendo varias imágenes sobre Paisajes de Montañas se debe nombrar a las imágenes '''paisajemontana-imagen1.jpg ; paisajemontana-imagen2.jpg''' ; etc.
[[<<]]
(:divend:)

'''3.''' Una vez escrito el nombre de tu imagen debes hacer clic en el botón '''Guardar''' de la parte inferior de la pantalla.

Observa que en tu página Web en la posición que agregaste el nombre de tu imagen aparece un texto en azul que dice:

-->Attach:Home/guiaattach3.jpg

'''4.''' Haz clic en ese nombre de tu imagen y se abrirá una página donde aparecen las opciones para cargar tu imagen en el servidor.

-->Attach:Home/guiasubir_imagen.jpg


'''5.''' Haz clic en el botón '''Examinar''' y procede a buscar tu archivo en tu máquina. Una vez lo tengas elegido dale doble clic para que se abra y se vea la ruta y el nombre de tu nueva imagen en la casilla de examinar.

%center%Attach:Home/guiasubir_imagen2.jpg

'''6.''' Una vez está elegida tu imagen debes hacer clic en el botón Subir. Si tu imagen es de menor tamaño que 1Mb. será guardada sin ningún problema. Te saldrá un mensaje de confirmación como el siguiente:

%center%Attach:Home/guiasubir_imagen4.jpg

>>cframe width:'468px'<<
%lfloat%Attach:sugerencia.gif
Si en caso la imagen no se guardó porque era muy pesada\\
entonces te sugerimos leer sobre los métodos para \\
[[EscuelaTic/TheGimp-BajarElPeso|Bajar el Peso de una Imagen]]
[[<<]]
>><<

'''7.''' Como paso final para ver el resultado de tu imagen ya agregada en la página Web haz clic en el enlace '''Ver''' que tienes en la parte superior derecha de la página actual.

!
'''[+Formatos para Imagen+]'''

A las imágenes que agregas en una página puedes aplicarles algunos formatos para mejorar su aspecto.
A continuación se describe algunos códigos de estilos para aplicar formatos especiales:

(:tableend:)

(:table border=1 style='border-color:blue' align='center' cellspacing='0':)
(:cell style='padding:5px; background-color:#c6d9ff;' width='180px' align='center':)
'''ESTILO:'''
(:cell style='padding:5px; background-color:#c6d9ff;' width='230px' align='center':)
'''Código de Estilo en Wiki'''
(:cell style='padding:5px; background-color:#c6d9ff;' width='250px' align='center':)
'''Resultado:'''

(:cellnr style='padding:5px;' :)
'''Cambiar el ancho'''
(:cell style='padding:5px;' :)
[@%width='120px'%Attach:Home/imagen.jpg@]
(:cell style='padding:5px;' :)
Attach:Home/guia_imagen1.jpg

(:cellnr style='padding:5px;' :)
'''Cambiar el alto'''
(:cell style='padding:5px;':)
[@%height='150px'%Attach:Home/imagen.jpg @]
(:cell style='padding:5px;':)
Attach:Home/guia_imagen2.jpg

(:cellnr style='padding:5px;':)
'''Cambiar ancho y alto al mismo tiempo'''
(:cell style='padding:5px;':)
[@%width='150px' height='150px'%.....@]
(:cell style='padding:5px;':)
Attach:Home/guia_imagen3.jpg

(:cellnr style='padding:5px;':)
'''Alinear la imagen al centro'''
(:cell style='padding:5px;':)
[@%center%Attach:Home/imagen.jpg@]
(:cell style='padding:5px;':)
%center%Attach:Home/guia_imagen3.jpg

(:cellnr style='padding:5px;':)
'''Alinear el texto a la derecha de la imagen'''
(:cell style='padding:5px;':)
[@%lfloat%Attach:Home/imagen.jpg
Esta imagen tiene un formato que
alinea la imagen a la izquierda
y coloca el texto a la derecha
de la misma. @]
(:cell style='padding:5px;':)
%lfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que alinea la imagen a la izquierda y coloca el texto a la derecha de la misma.

(:cellnr style='padding:5px;':)
'''Alinear el texto a la izaquierda de la imagen'''
(:cell style='padding:5px;':)
[@%rfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que
alinea la imagen a la izquierda
y coloca el texto a la derecha
de la misma. @]
(:cell style='padding:5px;':)
%rfloat%Attach:Home/guia_imagen3.jpg
Esta imagen tiene un formato que alinea la imagen a la izquierda y coloca el texto a la derecha de la misma.
(:tableend:)

(:table border=0 width='80%' align=center cellpadding=10:)
(:cell:)
%center orange%Si deseas hacer algunas pruebas antes de continuar haz clic en la %newwin%'''[[WikiPizarra/AreaDePrueba |AREA DE PRUEBAS]]'''