Actividad en Pencil prototype

Pencyl Prototype o Pencil Project es un software libre para crear prototipos visuales o wireframes de un proyecto, por ejemplo: una páginas web o una interfaz de usuario para aplicaciones.

Práctica 1 con la herramienta

Descargue de aquí el diseño básico que se va a trabajar.
Descargue de aquí las imágenes que necesitará y que debe instalar más adelante en la aplicación. Que las imágenes queden en una carpeta llamada Redes sociales.
Su trabajo debe quedar lo más parecido posible a la imagen que se les entregó. Si no alcanza a ver que dicen los textos, porque no están claros, digite unos similares y acordes (por favor, sin errores de ortografía y gramática).

• Comience guardando el documento para asignarle nombre y observe donde quedará ubicado ese nombre (Ctrl + S o desde el ícono del menú elegir Guardar)
• Asigne el fondo gris del diseño al documento en blanco en Pencil. Esto se hace en Propiedades, y de una vez puede darle el nombre a esa página. Asignemos como nombre index (clic derecho sobre Página sin título, abajo en la barra de estado y elija Propiedades). Cambie el nombre por Index y elija Fondo de color, para luego asignar un gris.
• Arrastre rectángulos y vaya conformando la estructura haciendo los cambios de color correspondientes (con la figura seleccionada, de clic en Propiedades para hacer los cambios de color en relleno y contorno). De igual forma trabaja con la herramienta de texto plano para el contenido.
• Para las imágenes es necesario crear una nueva colección de imágenes con las que necesitemos.

Cómo crear una nueva categoría de imágenes

• Primero se buscan las imágenes, para crear la colección e instalarla en el programa
• Las imágenes deben buscarse de acuerdo con las necesidades, lo más recomendable en este caso es que sean de 128 x 128.
• Se crea una carpeta con los iconos.
• Vamos a Pencil, menú Tool > Developer Tools > Stencil Generator…
• En la ventana que se abre se arrastran las imágenes seleccionadas de la carpeta al cuadro Select images, le damos un nombre a la colección, por ejemplo, Iconos Práctica 1 y se continúa; vuelve a pedir un nombre, se le da el mismo y clic en Finalizar. Ahora pide guardar un comprimido al cual le damos el mismo nombre y una buena ubicación. Yo aconsejo en la carpeta de Pencil.
• Ahora Menú > Tools > Manage Collections > Install from file… y damos la ruta del comprimido creado
• Cuando termine su diseño exporte a PNG y a PDF y envíe por correo.

Para: sistemasjdsm@gmail.com

Asunto: Práctica 1 con Pencil

Adjuntar los 2 archivos (.png y .pdf)

Fuentes de consulta:

Sitio web de descarga Versión 3.0.4 (a 20 de mayo):

http://pencil.evolus.vn/

Crear un boceto de una página web con Pencil Prototype

https://youtu.be/avz6L9Glgdo

Conceptos importantes en el diseño y estructura de una página web

Actividad de consulta

- Opciones efectivas de estructura y composición de una página web. ¿Cómo se recomienda estructurar una página web?

- ¿Qué características recomendables deben tener cada uno de los elementos que puede contener una página web?

- Analizar el significado de términos como: layout, sketch, mockups, wireframes, prototipos.

- Boceto a lápiz y en el cuaderno de su propuesta sobre el proyecto digital que se quiere crear, en este primer caso: la página web empresarial (utilice internet para ver ejemplos de páginas web relacionadas con su temática):

·         Donde pondremos los elementos más característicos como logos, nombre de la empresa, etc.

·         Dónde estará la zona de menús o de navegación y qué otras barras o zonas se tendrán

·         Cómo y dónde irá el contenido principal y otro tipo de contenidos

·         Dónde irá la zona para acceso o uso de las redes sociales

·         Qué otros servicios se quieren presentar en el proyecto

·         Qué irá en el pie de página

Fuente recomendada:

Artículo: Elementos que componen un sitio web

https://www.gradiweb.com/elementos-que-componen-la-estructura-de-un-sitio-web/

Trabajo Portafolio Producción en aplicativos multimedia

Descargar la guía del SENA dando clic Aquí.

Portada
Tema 1 - Diseño Multimedial - Glosario de términos
Tema 2 - Elementos del Diseño - Word carta (trabajo realizado en el primer período) y bocetos
Tema 3 - Tipos de fuentes y familias tipográficas - Creación de abecedario con fuente propia e Infografía sobre el tema (cada uno en hoja tamaño carta)
Tema 4 - Círculo cromático - Diseño propio donde se expliquen los colores primarios, secundarios, fríos, cálidos, adyacentes y complementarios (hojas tamaño carta)
Tema 5 - Espacios de la multimedia en la nube
Tema 6 - Imagen corporativa de una empresa: boceto del logotipo, imago tipo, iso tipo e iso logo (hoja tamaño carta con los diseños respectivos), membrete (hoja tamaño carta con encabezado y pie de página empresarial, tarjeta personal (hoja tamaño carta con diseño de impresión) y sobre.

Ejercicios 12, 13, 14 y 15

12. Determinar, de dos números digitados, cuál es el mayor y cuál el menor. Preguntar si desea ingresar más números.

13. Pseudocódigo que pida al usuario un número entre 1 y 10 y que imprima los números del 1 al número digitado por el usuario.

14. Pseudocódigo que muestre:

Título referente al programa

Que pida al usuario 2 números

Que muestre un menú solicitando que el usuario indique qué operación hacer:

Digite 1 para suma

Digite 2 para restar

Digite 3 para multiplicar

Digite 4 para dividir

Que muestre un mensaje indicando la operación elegida y el resultado

            Que pregunte si desea calcular otra operación

15. Determinar la suma de los N primeros números enteros de acuerdo con la siguiente fórmula: N(N+1)/2. Se le debe preguntar al usuario el número, debe mostrarse el resultado de la suma y debe preguntar si desea ingresar otro número.

Reto 3 de PSeInt

Realice el código que daría como respuesta la siguiente ejecución:

En esta ventana se muestra la ejecución si se hubiera elegido la opción 1, igual debe quedar para la opción 2 y para la opción 3. Tenga en cuenta que cada caso es diferente matemáticamente, pero similar en su presentación.

La 4 opción, Salir del programa, simplemente tiene una instrucción que le muestra al usuario un mensaje que dice: Gracias, vuelva pronto.

Debe incluir el caso de que el usuario digite un número diferente de 1, 2, 3 y 4. Por lo tanto si sucede, el programa debe decir: Opción no válida.

Sea muy observador(a) para que el trabajo quede bien presentado y con buena ortografía, como el que se muestra de ejemplo.

Buena suerte

Ejercicios 7, 8, 9, 10 y 11 de PSeInt

7. Pseudocódigo que le pida al usuario su edad y que imprima si el usuario es mayor o menor de edad.

8. Solicitar un número al usuario y que el programa indique si el número digitado es par o impar.

9. Utilizando la orden Según, hacer el código que pida un número de 1 a 7 y que el programa imprima el día de la semana que le corresponde, ejemplo: martes es 2.

10. Crear un ejercicio variando el anterior para que, en vez de utilizar la orden Según, se emplee varios Si – entonces anidados que impriman el día de la semana correspondiente.

11. Programa que pida digitar una letra y que indique según sea, si es consonante o vocal (no se puede utilizar la orden Según ya que en perfil Estricto ella solo acepta valores numéricos). Otra aclaración es que, en este ejercicio -lo más conveniente- es utilizar también operadores lógicos. Tener en cuenta que el usuario puede digitar la letra en mayúscula o en minúscula.

Ejercicios 4, 5 y 6 de PSeInt

Ejercicio 4 - Cuadrado y cubo de un número

Ejercicio 5 - Área y perímetro de un círculo

Ejercicio 6 - Cociente y residuo de dos enteros