MANUAL DE

MODIFICACIONES MENORES Modificaciones menores del sitio web.

Sitio web www.abitareci.com

USUARIO Introduccion y Resumen de funciones requeridas para la autoadministracion del sitio web.

Contenidos Subir Imagen al servidor ................................................................................................................................................ 3 Crear/ subir y eliminar Galeria Dinamica....................................................................................................................... 6 Crear Galeria Dinamica .............................................................................................................................................. 6 Resumen de Opciones ............................................................................................................................................... 6 Agregar Imagen/Galeria............................................................................................................................................. 7 Insertar Imagen / Galeria Dinamica ......................................................................................................................... 10 Obtener Id de Imagen Sola ...................................................................................................................................... 10 Editar Una pagina ........................................................................................................................................................ 13 Modificar Propiedades................................................................................................................................................. 15 Agregar un detalle de Propiedades ......................................................................................................................... 22 Modificar Carrusel de Imágenes de la Pagina Inicial ................................................................................................... 26 Glosario de funciones y palabras ................................................................................................................................. 30

Subir Imagen al servidor Acceder al Menu “Media”

Dar click en el Boton “Select Files” y seleccionar el archivo a subir y dar aceptar se listara el Proceso y al final aparecera un Link con la palabra “EDIT”

Obtener la Dirección de la Imagen en el servidor y eliminar

Modo I (Inmediatamente despues de subir una imagen al Servidor)

Presionando el Enlace “Edit” Modo 2 Accediendo al menu “Media” nos vamos al submenu “Libary” y sobre la imagen pulsamos “EDIT” para Editar o “Delete” para eliminar

Cualquiera de los 2 metodos nos llevara a la pantalla con los detalles de la imagen

La parte seleccionada contiene la direccion en Internet para acceder a su imagen, en caso de necesitarla Copiarla del campo Marcado.

Crear/ subir y eliminar Galeria Dinamica Crear Galeria Dinamica Acceder al menu Izquierdo “Gallery”

Por defecto muestra un resumen de las imágenes de las calerias dinamicas -Imágenes -Galerias -Albums

Resumen de Opciones

Agregar Galeria e Imagenes Administrar Galerias Adminstrar Albumes (no necesario) Administrar Etiquetas(no necesario) Opciones de Galeria (Configuraciones Avanzadas) Configuraciones Administrativas (Avanzadas)

Agregar Imagen/Galeria

Por defecto apracere la Imgen anterior

Si se requiere nueva galeria y subir inmediatamente a la nueva galeria

Llenar el espacio en Blanco con el nuevo nombre de la galeria

En caso contrario y solo se agregaran Imágenes a alguna Galeria Existente

Seleccionar la actual y enseguida le damos al boton “Add Files” Nos abrira un Dialogo para seleccionar la Imagen y le damos en aceptar (se pueden seleccionar multiples fotografias)

Inmediatamente despues el sitio pone una lista de todas las imágenes seleccionadas

Paso siguiente es darle click al boton “Upload” Y comenzara a subir las Imágenes Al terminar AParecera una burbuja en la parte superior como esta

Indicando que se subieron Correctamente Y Listo Se Subieron Las Imágenes A las Galerias Dinamicas

Insertar Imagen / Galeria Dinamica Las galerias Dinamicas se generan automaticamente despues de subir las imágenes al servidor web

Las Inserciones de Imágenes se hacen por medio de un numero Identificador (de galeria o Imagen), para obtener los identificadores hay que entrar en las Opciones de “Manage Galleries” para Galeria Completa

Obtener Id de Imagen Sola Y para los Identificadores de la Imagen simplemente ingresar a la galeria que requerimos la Imagen Dando click en ella

Accedemos a los elementos de la galeria

Donde estan las Opciones mas especificas por Imagen

El ID de la Imagen

Ademas de obtener algunas funciones sobre las imágenes, tales como

Ver, Editar, Editar miniatura, Publicar, etc.

Editar Una pagina Una vez identificado (paso I) aparecera un menu en la parte superior parecido

Para editar la pagina nos vamos a la queremos editar (Todas a excepción del Home) y presionamos EDIT PAGE

Y nos llevara a la pantalla de edicion de la pagina

Editor de la Pagina

-Todo lo que Aparece aquí es lo que se muestra en la pagina web (Se debe tenr especial cuidado con la estructira dado que puede cambiar mucho al modificar esta parte);

Para Guardar los cambios hechos en la Misma se debe presionar el boton “Update” y al terminar, listo se publica web en tiempo real.

Modificar Propiedades Inicialmente la pagina se ve asi:

Identificados (paso I) Nos vamos la pagina de Propiedades y le presionamos en editar Pagina

Para este paso se requiere previamente agregar la galeria dinamica (paso 3) previamente respecto a la propiedad nueva a agregar

Se describira la estructura de la pagina de Propiedades

Se separa por bloques de 4 casas

El molde del Contenido es contenido es [one_fourth][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ 9000000 [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth][one_fourth] [ngg_images image_ids='52' display_type='photocrati-nextgen_basic_singlepic']

Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth] [one_fourth][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth] [one_fourth_last][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth_last]

Donde cada que se requieran agregar casas se copiara este bloque de codigo al cuerpo de la pagina de propiedades Es decir que el bloque anterior de texto es equivalenete a

El bloque de casa mostrado

En la a parte de propiedades todo el texto debe de ir entre las lineas de texto xxxxxxxxxxxxx Donde xxxxxx es el contenido total de la pagina de Propiedades, los cuales puede ser tecto, imágenes o en este caso multiples con el bloque a continuacion que representa el bloque de 4 casas

Para agregar el Conjunto de 4 casas (en este fragmento de texto incuye la infomacion de la fila de 4 casas [one_fourth][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ 9000000 [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth][one_fourth] [ngg_images image_ids='52' display_type='photocrati-nextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth] [one_fourth][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth] [one_fourth_last][ngg_images image_ids='52' display_type='photocratinextgen_basic_singlepic'] Descripcion . Terreno: medidas m2 Construcción:medidas m2 Precio: $ precio

[titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton] [/one_fourth_last]

Para cambiar la imagen dinamica [ngg_images image_ids='XXX' display_type='photocrati-nextgen_basic_singlepic']

Donde XXX es el ID de la Imagen Dinamica Y para modificar el contenido extra es Terreno: YYY Construcción:WWW Precio: PPP

Donde se cambian los caractere YYY, WWW, PPP por el respectivo contenido

Y para modificar el boton de cada uno de las cuatro casas del bloque se busca la parte [titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='#' window='no' size='small'] Ver más [/titanbutton]

Y en la parte donde dice link='#', sustituir # por la direccion web del protafolio ex: http://www.abitarece.com/casas/ Explicado anteriormente como obtener la direccion web

Adicional a agregar los grupos de 4 casas se puede separar con un titulo entre seccion con la siguiente texto TTTTTTT

Donde TTTTT es el nombre del Titulo de la seccion Y tambien se puede agregar una linea separadora con el siguiente texto

Agregar un detalle de Propiedades Inicialmente las paginas y su estructura del portafolio se ve asi:

Se trabajara de manera que siempre sea la misma estructura asi que se usaran moldes y solo se cambiaran los datos requeridos.

Nos pocisionamoes en el menu “Portfolio”, y podremos ver las actuales propiedades, siq ueremos ver alguna le damos click en el enlace del nombre pero si queremos agregar uno nuevo le damos click en “ADD NEW”

Con respecto al contenido ya se proporciono una base para el mismo el cual es el siguiente

[one_fourth] Locales en Tequisquiapan, Frente a la Cruz Roja
- 300 m2 terreno
- 340 m2 construcción
Características
- 3 niveles.
- Amplias recamaras, cada uno con baño y espacio para vestidores. - Recamara principal con Terraza y vista a la ciudad de Querétaro. - Planta baja con 2 niveles. - Lobby de entrada con caída de agua. - 1/2 baño para visitas. - Escalera con domo. - Amplia sala comedor y comedor diario. - Cocina equipada. - Terraza interior. - Jardín con 92 m2. - Salón multiuso con 32 mt2. - Baño de servicio. - Área de Lavado - Garaje para 3 autos sin techar. - Opcional en 4to nivel Área de 40 metros para mirador.

-

Cisterna de 2,800 m3. Tinaco de 1200 m3 hidroneumático. Calentador solar de paso marca BOSH. Tanque de gas de 300 Kg.

Precio : $3,890,000.00
[titanbutton radius='3px' background='#F2603F' border='#298EBB' color='#ffffff' link='/contacto' window='no' size='small'] Contacto [/titanbutton] [/one_fourth] [three_fourth_last] [nggallery id=5] [/three_fourth_last]

Se copia y pega en la parte de contenido y a voluntad se modifican los textos Tener cuidad de no elimiar los textos marcados por como , , etc; Y para modificar la galeria que es lo unico que cambia buscamos la parte de [nggallery id=5]

Y le cambiamos la parte de id=XX , donde XX es el Identificador de la Galeria (preciamente explicado), al terminar presionamos el boton “Publish”, y apareceran 2 nuevas opciones

Y esa direccion es la que pondremos en el boton de la pagina de propiedades.

Modificar Carrusel de Imágenes de la Pagina Inicial Paso 1 Agregamos las Imágenes que queremos mostrar en el carrusel de imágenes del Home (explicado previamente como subir imágenes al sitio)

Y paso siguiente obtenemos las direcciones web de cada una de las Imágenes que mostarremos

En este caso obtivimos 7 http://www.abitareci.com/wp-content/uploads/2014/06/p11.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p23.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p3.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p4.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p5.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p6.jpg http://www.abitareci.com/wp-content/uploads/2014/06/p6.jpg Que correspondes 7 imágenes Paso 2 Nos Pocisionamos en el menu “Tiny Slider” y en la parte Imame Details y nos aprecera una lista de imagenes (vacia en este caso) y le demos en “Add New”

Nos llevara a la siguiente pantalla que hay que llenar

Al termianr se da click en el boton Submit y termiando se puede checar el resultado en Homoe de la página web

Este procedimiento e repetira por cada una de las imágenes que se quieran mostrar para al fina mostar algo asi

Si se requiere modiciar tamaños u opciones de como se muestran en las opciones del “Slider principal”

Que se encuentra en el menu izquierdo

Y nos llevara a las funciones especificas

Al termianar los cambios solo se hace click en el boton submit y se ve el resultado.

Glosario de funciones y palabras En el editor de la pagina web admite palabras que significan algun comportamiento (saltos de linea, remarcar en negritas, un t’itulo, etc) aquí se listan las mas comunes y usuales, siempre y cuando este habilitado el editor de texto.



Salto de Linea

xxxx

Indica un Título (donde xxxx es el texto)



Inserta una linea divisorioa Horizontal

xxxxxxx

Remarca en Negritas (donde xxxx es el texto)

sssssss

Separa bloques de texto

xxx

Segmenta e indica un parrafo (donde xxxx es el texto o contenido)

Pestañas

[titantabs]

Inicia un conjunto de pestañas

[titantab title="yyyyy"]

inicia la pestaña indicando el nombre de la pestaña (yyyyy)

xxxxxxx

El contenido de las pestañas puede ser cualquier cosa

[/titantab]

Finaliza la pestaña

[titantab title="yyyyy"]

inicia la pestaña indicando el nombre de la pestaña 2 (yyyyy)

xxxxxxx

El contenido de las pestañas puede ser cualquier cosa

[/titantab]

Finaliza la pestaña 1

[titantab title="yyyyy"] [/titantab] definan bien

->pueden ser el numero de pestañas que se desee siempre y cuando se

[/titantabs]

Finaliza el onjunto de pestañas

Para mayor informacion de las “Etiquetas ” antes mencionadas se recomienda el enlace http://www.slideshare.net/17kliss/etiquetas-mas-utilizadas-del-lenguaje-html