Crear un sitio
En ArcGIS Hub, crea un sitio e integra en él otros elementos como mapas, aplicaciones y encuestas. Combinará componentes distintos para crear un sitio web llamativo sobre la mejora del parque.
Explorar un sitio
Antes de crear su ArcGIS Hub, abriremos y examinaremos uno para ver sus componentes.
- Abra el hub William Land Park Improvement Plan.
El hub se abre.
- Explore y haga clic en el hub y sus componentes.
ArcGIS Hub le permite construir sitios y páginas que reúnen mapas, apps, datasets, documentos y cuadros de mando, y organizarlos en torno a proyectos, iniciativas u objetivos. En función de sus necesidades, también puede añadir entidades tales como eventos, herramientas de participación y flujos de trabajo colaborativos para ayudar a compartir información, hacer seguimiento de los avances y conectar con otras
- Cierre el William Land Park Improvement Plan.
Empezar a crear un sitio
Comenzará creando un sitio que puede editar y rellenar. ArcGIS Hub incluye una selección de tarjetas que se pueden arrastrar y soltar y le permite editar el código HTML para una mayor personalización.
- Inicie sesión en su cuenta de organización de ArcGIS.
Nota:
Si no tiene una cuenta de organización, consulte las opciones de acceso a software.
- En la cinta, haga clic en el selector de aplicaciones y elija Hub.
Se abre ArcGIS Hub.
- Si aparece la ventana Le damos la bienvenida a los espacios de trabajo, haga clic en Utilizar espacios de trabajo.
La página de descripción general del espacio de trabajo de ArcGIS Hub proporciona acceso a varios flujos de trabajo clave, como crear y administrar sitios, y agregar contenido.
- Haga clic en Crear y elija Sitio.
Aparece la ventana Crear sitio.
- En Título, escriba William Land Park Improvement Plan.
También agregará un subdominio, que aparecerá en la URL del sitio.
- En Subdominio, escriba william-land-park-improvement.
A continuación, seleccionará el catálogo predeterminado y el diseño del sitio. El catálogo contiene el contenido del sitio y se puede personalizar para incluir elementos de contenido que desee que los usuarios descubran a través de la barra de búsqueda del sitio. Para este tutorial, utilizará un catálogo de inicio rápido que genera automáticamente un catálogo básico.
Para el diseño, utilizará un diseño sencillo que incluye algunos elementos de ejemplo que puede editar para crear su sitio web.
- En Catálogo, elija Catálogo de inicio rápido. En Diseño del sitio, elija Simple.
- Haga clic en Siguiente.
Tiene la opción de compartir su sitio con grupos en ArcGIS Online. Por ahora, no compartirá el sitio con ningún grupo.
- Haga clic en Crear.
El sitio se ha creado. Cuando se crea un elemento del sitio después de seleccionar la opción Catálogo de inicio rápido, se crea un grupo en ArcGIS Online. Este grupo se puede utilizar para gestionar el contenido de su sitio, pero no lo necesitará para editar el diseño del sitio.
- En el mensaje de confirmación, haga clic en Editar diseño para su sitio.
El sitio aparece en formato editable. Puesto que ha seleccionado el diseño de sitio Simple, ya tiene algún contenido predeterminado.
Agregar una sección de título
Es posible que entre el público de su sitio se encuentre alguien que suele ir a los parques de la ciudad; por eso, su objetivo es compartir contenido de forma clara e intuitiva. Para lograrlo, presentará el sitio con un título e imagen de fondo de gran contraste. Primero, descargará las imágenes que usará para diseñar el sitio.
- Descargue la carpeta comprimida Imágenes.
- Extraiga la carpeta comprimida en una ubicación que pueda encontrar fácilmente como, por ejemplo, su carpeta Documentos.
A continuación, cargue una de las imágenes de esta carpeta para usarla como encabezado en la parte superior de su sitio. En ArcGIS Hub, el contenido está organizado en filas. El encabezado es la primera fila de su sitio.
- En ArcGIS Hub, señale la primera fila (el encabezado con una imagen de fondo ). En la barra de herramientas situada al lado del encabezado, haga clic en el botón Editar.
Aparece el panel lateral Fila. Aquí configurará opciones de diseño específicas para esta fila.
- En el panel lateral Fila, en Imagen de fondo, haga clic en Cargar. Haga clic en Buscar imágenes.
- Vaya a la carpeta descomprimida Imágenes . Haga doble clic en intro_image1.
La imagen se carga como imagen de fondo de la fila. También cambiará el color de fondo transparente de la fila para proporcionar un filtro que complemente a la imagen.
- En Color de fondo, escriba #6a9ab0.
- En Transparencia de la imagen, escriba 30 por ciento.
A continuación, editará el texto del título.
- Señale el texto Sección destacada. En la barra de herramientas Texto, haga clic en el botón de edición.
Ahora puede editar el texto. Al editar texto, puede utilizar herramientas de formato de texto o insertar código HTML y CSS personalizado. En este caso, lo hará más adelante.
- En la parte inferior del editor de texto, haga clic en Editar en HTML.
Aparece un editor de HTML. Agregará HTML y CSS que aumentan el tamaño del título y el banner para causar una impresión inmediata en los usuarios.
- En la ventana HTML, elimine el código existente y pegue este código:
<div class="banner-heading" style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Plan</strong></span></div> - Haga clic en Aplicar.
Eliminará la otra tarjeta de texto de la fila, que proporciona información adicional que no necesitas para este sitio.
- Señale el texto que comienza por Esta sección destacada es una fila. En la barra de herramientas Texto, haga clic en el botón de eliminación.
- En la ventana Eliminar tarjeta del diseño, haga clic en Eliminar.
El texto se elimina. Ahora, la fila solo contiene el título del sitio.
- En la cinta, haga clic en Guardar diseño.
Los cambios se guardan.
Definir la finalidad
A continuación, agregará información para definir la finalidad del sitio en forma de texto con información sobre cómo el público puede participar en la adopción de un parque. El diseño del sitio que ha elegido incluye una fila debajo de la fila del título que puede utilizar para definir la finalidad del sitio.
- Haga clic en la tarjeta de texto con el texto de encabezado Sección para editarla.
- Elimine el texto existente en el editor de texto. Copie y pegue el siguiente texto sin formato: Queremos que aporte ideas sobre cómo podemos hacer de William Land Park un espacio más limpio y bello.
Sugerencia:
Para pegar texto sin formato, puede hacer clic con el botón derecho en el punto en el que desee pegarlo y seleccionar Pegar como texto sin formato o bien utilizar las teclas Ctrl+Mayús+V.
- Resalte el texto. Haga clic en el botón Estilo y seleccione Encabezado 2.
- Anule la selección del texto. Sitúe el cursor delante de la primera letra en Queremos y pulse Intro para agregar un salto de línea antes del texto.
- Sitúe el cursor después del punto final y pulse Intro para agregar un salto de línea después del texto.
- En el panel lateral Personalizar, arrastre una tarjeta Imagen a la izquierda de la tarjeta de texto y suéltela en la zona de colocación Insertar izquierda.
Aparece el panel lateral Imagen. Cargará una imagen de la carpeta Imágenes.
- En el panel lateral Imagen, haga clic en Cargar. Haga clic en Buscar imágenes.
- Cargue park_image2.
La imagen se agrega a la fila. Ajustará su tamaño para que se alinee mejor con el texto.
- Apunte en el lado derecho de la tarjeta de imagen y haga clic en la flecha.
El tamaño de la imagen se reduce. También agregará texto alternativo a la imagen para mejorar la accesibilidad.
- En el panel lateral Imagen, expanda Opciones. En Texto alternativo de imagen, escriba Personas que disfrutan del parque.
Por último, eliminará los espaciadores situados encima y debajo del texto y la imagen que agregan espacio vacío innecesario.
- Señale el espacio vacío encima del texto y la imagen. En la barra de herramientas Espaciador, haga clic en el botón Eliminar.
- En la ventana Eliminar tarjeta del diseño, haga clic en Eliminar.
- Del mismo modo, elimine la tarjeta espaciadora situada debajo del texto y la imagen.
- En la cinta, haga clic en Guardar diseño.
Configurar el encabezado
El encabezado aparece en la parte superior de cada página del sitio, lo que lo convierte en un lugar ideal para la promoción de la marca. Agregará el logotipo de su organización y un enlace con más información relacionada con los parques y los espacios abiertos.
- En el panel lateral Personalizar, haga clic en Encabezado.
- En el panel lateral Encabezado, active Logotipo.
- En Logo, haga clic en Cargar. Haga clic en Buscar imágenes.
- Vaya a su carpeta descomprimida Imágenes y cargue la imagen cpp-logo.
El logotipo se agrega a la parte superior del sitio, encima de la primera fila. También podrías agregar el nombre del sitio al encabezado, pero sería redundante porque el nombre del sitio ya aparece en la fila del título. Eliminará por completo el nombre del encabezado.
- Desactive Nombre.
También agregará un vínculo a un sitio con más información sobre el espacio abierto.
- Expanda Menú. Haga clic en Agregar vínculo y seleccione a vínculo.
Aparece la ventana Agregar vínculo.
- En Nombre del vínculo, escriba ¿Qué es un espacio abierto?
- En Destino del vínculo, copie y pegue esta URL: https://www.epa.gov/G3/green-streets-and-community-open-space
- Haga clic en Guardar.
El vínculo que ha agregado aparece en el encabezado, junto al logotipo.
- En la cinta, haga clic en Guardar diseño.
Configurar el pie de página
Los pies de página aparecen en la parte inferior del sitio y ofrecen espacio para información importante, como condiciones de servicio, llamadas a la acción y atribuciones para todas las imágenes de la página. En primer lugar, eliminará el pie de página de la plantilla. A continuación, diseñará un pie de página personalizado sencillo que otorgue reconocimiento al contenido que no sea original e indique que este sitio es solo a efectos de formación.
- En el panel lateral, haga clic en Personalizar para volver al panel lateral Personalizar.
- Haga clic en Pie de página.
- En el panel lateral Pie de página, haga clic en Ninguno.
El pie de página predeterminado se elimina. A continuación, creará una nueva fila para incluir la información que desee.
- En el panel lateral Pie de página, haga clic en Personalizar. Haga clic en Diseño.
- En el panel lateral Diseño, arrastre una tarjeta Fila hasta la parte inferior del sitio y suéltela en la zona de colocación Insertar debajo.
Asignará a la fila un texto y un color de fondo diferentes para distinguirla del resto del contenido del sitio.
- En el panel lateral Fila, en Color del texto, escriba #ffffff. En Color de fondo, escriba #32444d.
A continuación, agregará texto.
- En el panel lateral Fila, haga clic en Diseño para regresar al panel lateral Diseño.
- Arrastre una tarjeta Texto a la fila vacía y suéltela en la zona de colocación Agregar a fila.
- En el editor de texto, copie y pegue el siguiente texto sin formato:
Agradecimientos
Este sitio web no es oficial de Sacramento y solo se utiliza con fines demostrativos.
Los datos de los parques de Sacramento han sido proporcionados por Open Data del condado de Sacramento.
© Plantilla de sitio personalizada. Todas las fotos de este sitio proceden de Esri.
- Elimine cualquier salto de línea vacío entre las líneas de texto.
- Anule la selección de todo el texto. Si es necesario, haga clic en el botón Párrafo y seleccione Alineación central.
- Resalte Agradecimientos. Haga clic en el botón Estilo y seleccione Encabezado 1.
Se ha completado la sección Agradecimientos.
- En la cinta, haga clic en Guardar diseño.
Agregar instrucciones
Comunicar con claridad sus objetivos y la forma en que su comunidad puede ayudar es importante para mantener la atención del público. A continuación, hablará sobre la encuesta y mostrará a los demás cómo influyen sus respuestas con un mapa web que muestre resultados en tiempo real. Describirá lo que deben hacer los demás para compartir sus ideas y describirá cómo se actualizará el mapa web con sus respuestas.
- Entre las filas de introducción y pie de página, agregue otra tarjeta Fila.
- En el panel lateral Fila, en Color del texto, escriba #ffffff. En Color de fondo, escriba #6a9ab0.
- Haga clic en Diseño para volver al panel lateral Personalizar. Agregue una tarjeta Texto a la fila vacía.
- En la tarjeta de texto, escriba (o copie y pegue) escriba este texto: Responda a la siguiente encuesta para agregar sus ideas al mapa. Sus respuestas nos ayudarán a identificar qué mejoras se pueden llevar a cabo y dónde.
- Agregue una línea en blanco antes y después del texto colocando el cursor en las ubicaciones correspondientes y presionando Intro.
- Anule la selección de todo el texto. Haga clic en el botón Estilo y seleccione Encabezado 2.
- Agregue una tarjeta Imagen a la derecha del texto.
- En el panel lateral Imagen, haga clic en Cargar y haga clic en Buscar imágenes. Cargue map_image4.
- Apunte al lado izquierdo de la imagen y haga clic en la flecha para reducir el tamaño de la imagen. Siga reduciendo el tamaño de la imagen hasta que la altura de la imagen sea aproximadamente la misma que la del párrafo de texto.
- En la cinta, haga clic en Guardar diseño.
Ahora que su sitio incluye instrucciones, será más probable que los usuarios comprendan su finalidad y cómo interactuar con el mapa y la encuesta que agregará a continuación.
Recopilar comentarios de la comunidad
ArcGIS Hub puede integrar contenido de ArcGIS, como mapas y encuestas, que promueven una mayor interacción con el usuario que un sitio estático. Ahora que ya ha creado un sitio web con información básica y la imagen de marca, añadirá elementos interactivos para involucrar a la comunidad en el plan de mejora del parque.
Agregar una encuesta
Creará una nueva fila y la rellenará con un mapa y una encuesta preconfigurados. La encuesta está diseñada para recopilar opiniones sobre el parque. Los resultados de la encuesta se introducen directamente en un mapa web que se actualiza al instante para mostrar las respuestas.
- En el panel lateral Imagen, haga clic en Diseño. Agregue una tarjeta Fila entre la fila de instrucciones y la fila de reconocimientos.
- En el panel lateral Fila, para Color de fondo, escriba #f5fcfc.
Agregará una tarjeta de espaciador para crear más espacio en la fila.
- En el panel lateral Fila, haga clic en Diseño.
- Agregue una tarjeta Espaciador a la fila.
A continuación, agregará la encuesta. La encuesta se ha creado automáticamente mediante ArcGIS Survey123.
Nota:
Survey123 es una plataforma de recopilación de datos basada en formularios que se puede integrar con los mapas y aplicaciones de ArcGIS. Este tutorial no tratará sobre cómo crear una encuesta. Si desea aprender a hacerlo, consulte el tutorial Introducción al diseñador web de ArcGIS Survey123.
- En el panel lateral Espaciador, haga clic en Diseño.
- En la tarjeta Espaciador, agregue una tarjeta Encuesta.
Aparece el panel lateral Encuesta.
- Haga clic en Seleccionar encuesta.
Aparece la ventana Seleccionar una encuesta. Puede seleccionar encuestas que otras personas de su organización hayan creado.
- En Desde, elija Todos (público).
- Busque las opiniones de William Land Parks Improvements (Tutoriales de Esri). En la lista de resultados de búsqueda, seleccione William Land Parks Improvements Feedback (Tutoriales de Esri).
- Haga clic en Guardar.
- En el panel lateral Encuesta, haga clic en Integrar.
La encuesta ya está integrada en el sitio web. Los usuarios no tendrán que abrirla en otra ventana.
Aumentará la altura de la encuesta para que los usuarios no tengan que desplazarse para ver la mayoría de las preguntas.
- En el panel lateral Encuesta, en Opciones, en Altura, escriba 945.
- En la cinta, haga clic en Guardar diseño.
Agregar un mapa web
Agregará un mapa web a la encuesta que se haya preconfigurado para mostrar los envíos de la encuesta en tiempo real. Cuando los usuarios rellenen la encuesta, se agregará un punto al mapa con las respuestas que hayan dado a las preguntas de la encuesta.
Nota:
Al igual que la encuesta, el mapa que utilizará en este tutorial ya ha sido creado para usted. Para aprender a crear un mapa web, consulte el tutorial Introducción a ArcGIS Online.
- En el panel lateral Encuesta, haga clic en Diseño.
- Agregue una tarjeta Mapa a la derecha de la encuesta.
Aparece el panel lateral Mapa.
- Haga clic en Seleccionar mapa.
- En la ventana Seleccionar mapa, en Desde, elija Todos (público).
- Busque Community Feedback for William Land Park (Tutoriales de Esri). En la lista de resultados, seleccione Community Feedback for William Land Park (Tutoriales de Esri).
Se agrega el mapa.
- Haga clic en Guardar.
- En el panel lateral Mapa, en Opciones, cambie el Título a Community feedback for William Land Park.
- En Altura (px), escriba 900.
- Active la opción Habilitar leyenda de mapa.
El mapa integrado se configura en el sitio. Aparece junto al formulario de la encuesta.
- En el panel lateral Mapa, haga clic en Diseño.
- Agregue una tarjeta Espaciador debajo de la encuesta y el mapa.
- En la cinta, haga clic en Guardar diseño.
Publicar el sitio
Ha completado su sitio. Lo publicará para que otros puedan verlo.
- En la cinta , haga clic en Publicar diseño.
El sitio se publica. Actualmente, no está compartido, por lo que solo usted puede verlo. Antes de compartirlo, lo revisará para asegurarse de que todo está correcto.
- En la cinta, haga clic en Ver y elija Ver publicado.
Accede a la versión publicada del sitio. Ver el sitio le permite observar la apariencia del mismo para los usuarios.
- Explore el sitio publicado. Asegúrese de que todos los elementos del sitio aparezcan y funcionen correctamente.
- Opcionalmente, si observa algún error o necesita realizar más modificaciones en el sitio, haga clic en el botón Editar.
- Si lo desea, realice los cambios que considere oportunos. Guarde el diseño y vuelva a ver la versión publicada del sitio.
Una vez que esté satisfecho con el sitio, puede compartirlo para que cualquiera pueda verlo.
- Al visualizar el sitio publicado, haga clic en el botón Administrar sitio.
Volverá a su espacio de trabajo.
- Si aparece la ventana Le damos la bienvenida a los espacios de trabajo, haga clic en Utilizar espacios de trabajo.
- En la cinta, haga clic en Compartir.
- En Nivel de uso compartido, elija Público.
Ahora, cualquier persona que tenga un enlace a tu sitio web podrá verlo.
Sugerencia:
Para regresar a su sitio publicado, haga clic en Ver sitio.
En este tutorial, ha creado un sitio mediante ArcGIS Hub. Ha agregado un título, modificado el encabezado y el pie de página, y ha creado filas con información sobre el propósito del sitio. También ha incorporado una encuesta y un mapa web para proporcionar elementos interactivos y fomentar la participación de la comunidad.
Ahora que ha creado su primer sitio, puede compartirlo con el público adecuado. Su sitio puede funcionar de forma independiente como algo que promueva en redes sociales o lo puede integrar en otros sitios y páginas de su organización.
Encontrará más tutoriales en la galería de tutoriales.
