piktochart tutorial
DESCRIPTION
Tutorial PiktochartTRANSCRIPT
![Page 1: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/1.jpg)
Piktochart
M.I.S.T. Miguel Ángel Romero OchoaHermosillo, Sonora, México. Octubre 2014
Espacio educativo: Nuevas Tecnologías
de la Información y la Comunicación
![Page 2: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/2.jpg)
Contenido
• ¿Qué es Piktochart?• Manejo de Templates• Escritorio de Piktochart• Bloques• Fondo• Insertar texto• Insertar un hipervínculo• Insertar gráficos• Insertar una imagen• Insertar un vídeo• Publicar en la web mediante su código HTML• Fuentes
![Page 3: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/3.jpg)
¿Qué es Piktochart?
Es una aplicación web lanzada en marzo del 2012, la cual permite crear de manera fácil infografía. En ella podrás diseñar gráficos de alta calidad. Una de sus principales características, es la capacidad de poder publicarla en sitios web mediante su código HTML.
![Page 4: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/4.jpg)
¿Qué es Piktochart?
Principales características:
•Gran variedad de templates (gratuitos y de paga).•Publicar mediante HTML.•Inserción de vídeos.•Generador de tablas.•Miles de gráficos e iconos.•Cerca de cien tipos de letra distintos.•Entre otros.
![Page 5: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/5.jpg)
Manejo de Templates
Cuando hayas iniciado sesión, podrás visualizar lo siguiente.
![Page 6: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/6.jpg)
Manejo de Templates
1. Primero tienes que seleccionar el tipo de formato que desees para tu infografía.
2. Ahora selecciona de entre los templates disponibles para el tipo de formato seleccionado (ten en cuenta que algunos son gratuitos y otros con costo).
![Page 7: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/7.jpg)
Escritorio de Piktochart
Después de seleccionar tu Template se mostrará el escritorio de Piktochart, en el cual podrás comenzar a crear tu infografía.
Elementos de diseñoElementos de diseño
Opciones de visualización, publicación y descargaOpciones de visualización, publicación y descarga
EdiciónEdición
InfografíaInfografía
![Page 8: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/8.jpg)
Bloques
Los bloques ayudan a seccionar tu infografía con el fin de que puedas manejar elementos por separado. Para administrar los bloques, tienes que dar clic sobre alguno de los existentes de tu infografía.
Basta con pasar el cursor sobre la infografía para visualizar los bloques existentes.
Opciones de bloqueOpciones de bloque
![Page 9: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/9.jpg)
Bloques
Al dar clic sobre un bloque existente, del lado izquierdo podrás visualizar las siguientes opciones:
•+: Agregar uno nuevo. •x: Eliminar.•=: Clonar.•Mover hacia arriba.•Mover hacia abajo.•Configuración: ancho y alto.
![Page 10: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/10.jpg)
Fondo
Para seleccionar algún color de fondo para tu infografía da clic sobre “Background”.
![Page 11: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/11.jpg)
Insertar texto
Para insertar un texto selecciona en los elementos de diseño del lado izquierdo “Text” , tendrás varias opciones:
•Título.•Subtítulo.•Subtítulo 2.•Subtítulo 3.•Cuerpo de texto.
Selecciona el que se adapte a tu información.
![Page 12: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/12.jpg)
Insertar texto
Por cada cuadro de texto que sea insertado, se tendrán las opciones de tipo de fuente, tamaño, alineación, color, entre otros.
.
Opciones de textoOpciones de texto
![Page 13: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/13.jpg)
Insertar un hipervínculo
Si quisieras insertar un hipervínculo a tu texto, basta con seleccionarlo y dar clic sobre la opción de “link”. Deberás introducir la dirección url en la ventana que aparecerá.
.
![Page 14: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/14.jpg)
Insertar gráficos
Localiza la opción de “Graphics”, tendrás tres opciones diferentes:
1.Formas y líneas.
2.Iconos
3.Fotos (por categorías).
.
![Page 15: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/15.jpg)
Insertar una imagen
Localiza la opción de “Uploads” para cargar una imagen desde tu computadora. Una vez cargada, deberás seleccionar el bloque donde se desee poner. Con tu cuenta podrás subir un máximo de 20 imágenes.
.
![Page 16: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/16.jpg)
Insertar un vídeo
En “Tools” encontrarás la opción de añadir vídeos a tu infografía. Cabe mencionar que ahí mismo podrás insertar tablas y mapas.
Al seleccionar vídeo, hay que introducir su dirección URL (YouTube o Vímeo solamente).
.
![Page 17: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/17.jpg)
Publicar mediante HTML
1. Una vez guardada tu infografía, localiza en la esquina superior derecha “Publish”.
.
![Page 18: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/18.jpg)
Publicar mediante HTML
2. Cuando aparezca la siguiente ventana da clic en “Publish now” para obtener el código HTML. Debes haber colocado un nombre a tu infografía antes de publicar.
.
![Page 19: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/19.jpg)
Publicar mediante HTML
3. Copia el código HTML generado e insértalo en tu sitio web. Puedes probar con u
.
Puedes probar con 600 px de ancho. Sí sobrepasa los límites de tu plantilla, modifica éste tamaño.
Puedes probar con 600 px de ancho. Sí sobrepasa los límites de tu plantilla, modifica éste tamaño.
![Page 20: Piktochart tutorial](https://reader031.vdocumento.com/reader031/viewer/2022012405/557b669fd8b42a7f6e8b47b2/html5/thumbnails/20.jpg)
Fuentes
Piktochart (2014). All About Piktochart´s Infographics Editor
Recuperado de http://support.piktochart.com/