:::: MENU ::::

Posts Categorized / Programas

  • Ago 30 / 2016
  • Comentarios desactivados en Cómo publicar un sitio via FTP
Diseño III, Programas

Cómo publicar un sitio via FTP

Esta guía está orientada únicamente a quienes no tengan idea sobre el tema. El resto puede resolver la publicación del sitio de la forma que considere más conveniente.

 

Crear una cuenta en algún servicio de Hosting

Para subir el sitio lo primero que se necesita es tener un servicio para alojar el sitio (hosting). En general este es un servicio que se paga pero hay opciones gratuitas que no te permiten tener dominio propio pero sí te dan una URL de un subdominio. Por ejemplo:

Al registrar la cuenta te envían por mensaje por email un link de confirmación. Hay que darle click a ese link. Una vez confirmado el email te llega un segundo email con consejos y una guía de inicio (en inglés). Pueden ignorarla. Dentro del panel de control ir al menú «Ajustes», «General», donde se puede encontrar la información para conectarse por FTP. Los datos que nos importan son los pintados de rojo:

—————————————————

Detalles FTP

FTP transfer: ON
Nombre del Host: files.000webhost.com
Usuario: usuarioprueba

Contraseña: la misma contraseña que la de tu sitio web

—————————————————

Cliente FTP

Lo siguiente que se necesita es contar con un programa de FTP que nos permita conectarnos con el servidor para subir los archivos. Hay miles gratuitos como:

Pero también hay programas de edición de código que incluyen un cliente FTP. Brackets no lo incluye por defecto, pero varias extensiones que se pueden descargar desde el mismo programa. Una de ellas es SFtpUpload. Para instalarla hay que ingresar al menú «Archivo» y luego al submenú «Gestionar Extensiones». Una vez que la ventana del gestor de extensiones termine de cargar, escribir «SFtpUpload» en el campo de búsqueda y cuando aparezca la extensión, darle click al botón «Instalar». Esta opción es bastante buena para el que ya sabe, porque permite configurar el sitio para que se suban los archivos cada vez que se guardan y así mantener sincronizada la versión local con la versión remota. Para el que no comprende bien el tema FTP sugiero utilizar cualquier cliente FTP como los mencionados, que suelen mostrar la pantalla dividida en dos: de un lado los achivos locales y del otro los archivos remotos.

Veamos el caso de Filezilla, que está disponible para Mac y Windows. En el menú «Archivo», seleccionar «Gestor de Sitios». Crear un nuevo sitio y en la pestaña «General» ingresar los datos de nuestro servidor de hosting, como se muestra en la siguiente imagen.

Deben completar el campo servidor con el nombre del host que encontraron en el panel de control del ar.000webhost.com, luego su usuario y contraseña.

Luego, en la pestaña «Avanzado», prestar mucha atención a los campos de directorios. La carpeta que debemos incluir en «Directorio local predeterminado» debe ser la misma en la que se encuentra la home del sitio (generalmente index.html). La pueden buscar con el botón «Examinar». En el caso de la carpeta remota, esta va a depender del servicio de hosting que utilicen. En ar.00webhost.com es «/public_html». Muchas veces se llama «/www». Presten atención a la barra del principio.

En la pestaña «Avanzado» verán dos opciones útiles. Una es «Usar navegación sincronizada», que sirve para mostrar la carpeta remota y la local en forma simultánea. La otra opción es «Comparación de directorios». Esta opción muestra pintadas de color verde los archivos que son iguales en el servidor remoto y en la máquina local y en amarillo los archivos que necesitan sincronizarse. Para subir o bajar un archivo basta con darle doble click al archivo o arrastrarlo de una ventana a la otra.

Para poder conectarse a ar.00webhost.com deberán seleccionar la opción «Pasivo» en la pestaña «Opciones de Transferencia». Una vez conectados a este servidor verán que la carpeta «/public_html» incluye un archivo llamado «default.php». Para que el sitio funcione deberán eliminar ese archivo.

 

Qué archivos subir y qué archivos no

Muchas plantillas vienen con una serie de carpetas que no son necesarias para el funcionamiento del sitio, generalmente de documentación o versiones en otros códigos de programación (PHP). La carpeta que deben subir es la que contiene la home del sitio. Nada más que eso. Toda otra carpeta que esté a la par de la que contiene la home del sitio, no deben subirla al servidor. Pero no deben subir la carpeta en sí, sino solamente su contenido. Es decir que la página de la home debe quedar directamente en la carpeta raíz del sitio en el servidor, sea cual sea su nombre, «/htdocs», «/public_html» o «/www».

Por otra parte, como comentamos en clase, notarán que algunas plantillas vienen con una carpeta llamada «less» o «sass». Esas carpetas no son necesarias para el funcionamiento del sitio. Pueden obviarlas.

Una vez que hayan subido todos  los archivos vayan a la dirección web que definieron al crear la cuenta de hosting y deberían encontrarse con el sitio que están desarrollando.

  • Ago 08 / 2016
  • Comentarios desactivados en Programa de diseño de infografía 2016
Diseño I, Programas

Programa de diseño de infografía 2016

1. Objetivo
Que los alumnos diseñen una infografía para una doble página central de diario/revista.

2. La infografía
Entendemos por infografía la explicación visual sintética, simplificada, de un hecho complejo. Por ejemplo: el edificio y las instalaciones de un teatro; un accidente de aviación; las causas y consecuencias de una enfermedad, de un terremoto, de una tormenta; un viaje espacial; el ciclo de vida de una especie; los viajes de Colón; etc.

Es un recurso de diarios y revistas para facilitar la comprensión rápida de un hecho al público en general. Se diseña en un solo plano que el lector observa completo ante sí. Utiliza ilustraciones, fotografías, gráficos, diagramas y textos para explicar los contenidos del tema. Se basa en la capacidad de la imagen, los gráficos y los diagramas para transmitir información rápida y comprensible, y reduce los textos a lo indispensable. Debe atraer y retener al lector mediante la calidad estética de sus elementos, y debe informarlo mediante una clarísima lectura del relato general.

A diferencia de una puesta en página convencional donde el diseñador recibe los textos e imágenes para diagramar, en la infografía el diseñador debe:

  • Comprender y analizar perfectamente el tema a comunicar.
  • Definir qué es lo importante, qué es lo secundario y qué datos del tema hay que dejar fuera de la infografía.
  • Definir qué tipo de datos deben comunicarse mediante texto, mediante fotos, mediante ilustraciones, mediante gráficos, mediante planos o diagramas, etc.
  • Operar sobre las fotos o hacer ilustraciones “a medida”.
  • Darle el tamaño y la ubicación adecuada a cada elemento para organizar una suerte de “video” ameno y, a la vez comprensible.
  • La infografía requiere de una intervención activa por parte del diseñador.

3. Contenidos principales

  • La infografía.
  • La función informativa dentro del mensaje.
  • Comprensión de un tema y selección de información relevante.
  • Organización y jerarquización de la información.
  • Los recursos gráficos (texto, imagen y diagrama) y sus usos adecuados.
  • Manejo de elementos gráficos.
  • Integración imagen-texto.

3. Pedido de diseño
Los estudiantes, agrupados de a dos, diseñarán una infografía sobre un tema que será asignado en clase, para una doble página central de una revista de divulgación/interés general, de las siguientes medidas: 26 cm x 34 cm cada una, total 52 cm x 34 cm. La doble página, que podrá ser vertical o apaisada, deberá incluir volanta, título y una bajada. De manera opcional se podrá incluir el texto correspondiente a una nota breve. Deberá incluir una imagen central, y al menos tres formas diferentes de graficar información (tablas, gráficos, planos, diagramas, etc.) y los textos indispensables para la comprensión rápida y certera del tema.
La doble página tendrá un margen externo de 1 cm que no irá impreso (solamente el margen externo, no el lomo donde se unen las dos páginas).

4. Pautas de evaluación
Para las correcciones en clase y para la evaluación final del ejercicio se tendrán en cuenta los siguientes parámetros:

  • Carácter infográfico
  • Adecuada inscripción de la pieza dentro del género “infografía”
  • Comunicación/claridad informativa/pertinencia
  • Organización inteligible del contenido.
  • Comprensión rápida y certera del mensaje.
  • Manejo adecuado de las jerarquías.
  • Correcta legibilidad.
  • Pertinencia de los recursos elegidos.
  • Pertinente elección de la o las imágenes.
  • Riqueza de contenido.
  • Calidad gráfica
  • Armonía de la puesta en página y diagramación.
  • Adecuada selección y uso de la tipografía.
  • Adecuada selección y tratamiento de las imágenes y demás recursos utilizados (diagramas, gráficos, fondos, misceláneas, etc.).

5. Entrega
La doble página se entregará desplegada, montada sobre un soporte rígido. En el dorso de ambas piezas se incluirán los nombres de los alumnos, comisión y cátedra.

Se adjuntará un CD claramente identificado con marcador indeleble (2016, DG1, Infografía, Nombre y apellido del alumno) que contendrá el trabajo en formato PDF y en JPG (imágen de 1920 pixeles de ancho). El nombre del archivo PDF responderá al siguiente criterio:

2016_dg1_infografia_Nombre-Apellido.pdf

La entrega se considerará en horario hasta las 20 hs.

Temas
1- Personaje (real o ficticio), contenido relacionado con el deporte
2- Lugar, monumento, contenido relacionado con la historia o la arquitectura
3- Máquina, artefacto o vehículo, contenido relacionado con la ingeniería
4- Contenido relacionado con la ciencia, geografía o astronomía

  • Ago 05 / 2016
  • Comentarios desactivados en Programa del ejercicio Diseño de Personajes 2016
Diseño II, Programas

Programa del ejercicio Diseño de Personajes 2016

1. Objetivos

Que los alumnos diseñen:

  • un sistema de 6 personajes gráficos, respetando una única unidad temática y estilística, para variados usos en la comunicación contemporánea,
  • desarrollen uno de esos personajes en 6 posturas o acciones diferentes y
  • pongan a prueba el funcionamiento de los personajes y su interacción en distintas situaciones de la comunicación contemporánea.

2. Contenidos principales

  • Sistemas de signos gráficos y personajes pre-existentes
  • Síntesis formal (rasgos principales y secundarios, niveles de simplificación, límite de reconocimiento del personaje y sus accesorios)
  • Sistema gráfico (rasgos comunes y particulares de cada componente, unidad estilística del conjunto)
  • Los estilos y sus componentes distintivos
  • La calidad gráfica
  • Introducción al diseño de personajes

3. Pedido de diseño

Se diseñará un sistema de 6 personajes, con unidad estilística, que podrían ser utilizados para videojuegos, publicidad, como mascotas de un producto u organización, para usos decorativos, etc.

Este ejercicio exige que los personajes tengan un tratamiento expresivo que aporte una personalidad estética al sistema. El estilo será propuesto por cada alumno libremente, siempre que sea reconocible como actual, contemporáneo (no antiguo o pasado de moda).
El ejercicio no tiene restricciones cromáticas de ningún tipo. Del mismo modo, la técnica de realización es libre.
Los personajes se diseñarán a partir de los siguientes temas:

Aventuras:

  • Samurai
  • Guerrero medieval
  • Pirata
  • Vikingo
  • Soldado Romano
  • Sioux

Deportes:

  • Corredor
  • Basketbolista
  • Boxeador
  • Tenista
  • Beisbolista
  • Judoca

Música:

  • Metalero
  • Floklorista
  • Rapero
  • Reggae
  • Punk
  • Tanguero

Además, cada estudiante, a elección, desarrollará uno de estos personajes en 5 acciones típicas de su actividad (Por ejemplo: correr, saltar, de frente, de pefil, pateando una pelota, disparando un arma, etc.).

El trabajo se completará con la puesta en funcionamiento de los personajes y su interacción en distintas situaciones de la comunicación contemporánea:

  1. Escena hipotética de un juego en la pantalla de un ipad que incluya dos o más pesonajes (formato vertical).
  2. Aplicación en una remera.
  3. Aplicación en una taza promocional.
  4. Póster de presentación del conjunto de personajes (no necesariamente debe incluirlos todos).

4. Entrega

El trabajo se presentará en dos paneles rígidos de 50×70 cm. El primero presentará los 6 personajes y las 5 posiciones/acciones. El segundo panel mostrará los personajes en funcionamiento en las diferentes situaciones indicadas.

El día de la entrega, el alumno deberá concurrir a la misma con la remera con la aplicación del personaje.

Se adjuntará un CD claramente identificado con marcador indeleble (2016, DG2, Personajes, Nombre y apellido del alumno) que contendrá las láminas en formato PDF y JPG (resolución de 1920 px de ancho). El nombre de los archivos responderá al siguiente criterio:

2016_dg2_Personajes_Nombre-Apellido_1.pdf
2016_dg2_Personajes_Nombre-Apellido_2.pdf

La entrega es hasta las 20 hs.

5. Pautas principales de evaluación

  • Pertinencia tipológica: Inscripción de los diseños dentro del tipo “Personaje de fantasía”.
  • Carácter sistémico: La capacidad de las piezas de articularse como partes de un mismo conjunto. Correcta relación entre rasgos recurrentes y singularidades de cada personaje. Unidad estilística del conjunto sin pérdida de identidad de cada personaje.
  • Identificación: que se reconozca cada personaje y las acciones propuestas para cada uno de ellos, con toda claridad.
  • Calidad gráfica: armonía de los recursos gráficos utilizados. Inscripción de los signos dentro de los estándares contemporáneos de buen rendimiento.
  • Ago 05 / 2016
  • Comentarios desactivados en Programa del ejercicio Web Institucional 2016
Diseño III, Programas

Programa del ejercicio Web Institucional 2016

1. Objetivos

Que el alumno rediseñe y produzca un sitio web responsive para una empresa u organización asignada por la Cátedra, con el objeto de mejorar el rendimiento respecto del sitio existente.

2. Contenidos

  • Códigos de programación (HTML, CSS, Javascript, PHP, ASP, etc.)
  • Tecnologías para el desarrollo gráfico de sitiow Web (jQuery, plugins para jQuery, Bootstrap, plantillas, LESS y SASS, etc.).
  • ¿Qué es diseñar para la web? ¿Qué es un buen diseño web?
  • Tipologías web: funciones y características.
  • Sitios Web de empresas e instituciones.
  • Experiencia de usuario (UX) desde el punto de vista del diseño (UI) gráfico.
  • SEO (optimización del código para motores de búsqueda)
  • Navegabilidad, usabilidad, interactividad y accesibilidad.
  • Diseño responsive

3. Requerimiento

Cada alumno desarrollará un sitio web responsive, de carácter comercial/persuasivo, para una empresa u organización que le será asignada. Si se tratase de un trabajo real, el sitio podría o no tener más páginas de las que se requieren en este ejercicio, pero a los efectos de unificar el alcance de todos los trabajos, se requiere el diseño y desarrollo exclusivamente de los siguientes elementos:

  • La página principal del sitio (Home).
  • Un listado (de productos o servicios), que eventualmente podría incluirse en la página principal (si el caso no justificara una página independiente).
  • Una página modelo de uno de los productos o servicios que la organización ofrece.
  • Un formulario de contacto (sea un popup, una página indepentiente o una sección en la home o en las páginas de producto, según convenga al caso).

Los sitios a rediseñar son:

  1. Hotel: http://www.villaisidro.com.ar
  2. Bodega: http://www.bodegananni.com
  3. Restaurant: http://www.notorious.com.ar

Estos sitios necesitan fundamentalmente mejorar la calidad gráfica, realizar una buena adecuación estilística al emisor y presentar sus propuestas con mayor claridad.

Por tratarse de un ejercicio cuyo resultado no termina en el papel —sino en la pantalla—, a lo largo de las clases los alumnos presentarán sus propuestas en un navegador. En ese sentido, convendrá que quienes cuenten con computadoras portátiles las lleven al taller todas las veces que puedan. Asimismo, para poder probar los sitios en tabletas y teléfonos móviles, convendrá que mantengan una versión accesible desde la web.

4. Pautas de evaluación

  • Calidad gráfica: selección y combinación de elementos gráficos acorde a los estándares de calidad del género en la actualidad.
  • Claridad comunicacional: correcta selección, organización y jerarquización de los contenidos.
  • Adecuación a los códigos funcionales del medio Web: respeto de los códigos de funcionamiento impuestos y ya conocidos por el público.
  • Adecuación estilística: el clima visual de la propuesta gráfica debe resultar adecuado al emisor y al tipo de mensaje.
  • Presentación: cumplimiento de las pautas requeridas.

5. Entrega

La entrega será virtual (no hay que asistir a la facultad) y estará compuesta de dos partes:

  1. Subir el código completo del sitio y el código de la plantilla utilizada via Dropbox.
  2. Publicación en la Web del sitio desarrollado.
    Seguir la Guía Cómo publicar un sitio via FTP.

El código completo del sitio desarrollado y de la plantilla utilizada debe incluir solamente los archivos del sitio. Muchas plantillas incluyen otras carpetas con recursos y documentación que no forman parte del sitio. Parhttp://catedrabelluccia.com.ar/wp-admin/post.php?post=4044&action=edit&message=1#a que no queden dudas sobre la carpeta que necesitamos, es solamente la que incluye la home del sitio y las carpetas css, js, etc. Cualquier otra carpeta fuera de esa carpeta principal del sitio, por favor no la incluyan en la entrega. Esto aplica tanto al sitio desarrollado como a la plantilla utilizada.

La entrega por dropbox debe realizarse subiendo una carpeta con la siguiente denominación:

2016_dg3_web-institucional_Nombre-Apellido

Esta carpeta deberá incluir en su raíz únicamente dos carpetas y un archivo html:

• web
• plantilla
• entrega.html

Ejemplo de la estructura de la carpeta:

Mantener las denominaciones mencionadas. El archivo «entrega.html» deberá ser editado para incluir los datos del alumno y los links al sitio publicado y al preview del template utilizado.

Descargar el archivo «entrega.html»

A quien le resulte más fácil subir todo el contenido de la carpeta zipeado, por supuesto que puede hacerlo. Solamente les pedimos asegurarse de que al descomprimir el archivo el resultado incluya la carpeta con la denominación solicitada. Obviamente, el zip deberá tener mismo nombre que la carpeta. Por ejemplo: 2016_dg3_web-institucional_Nombre-Apellido.zip

El plazo máximo para subir los archivos de la entrega al dropbox es el lunes 5 de septiembre a las 18 Hs.

6. Recursos útiles para realizar el ejercicio

Ver trabajos de alumnos de años anteriores

Tutoriales en video necesarios para el ejercicio:

Tutoriales en video para quienes quieran aprender sobre el tema, más allá del ejercicio:

Software para editar código:

  • Brackets (gratuito, para Mac y Windows)
  • Atom (gratuito, para Mac y Windows)
  • Koala (preprocesador CSS gratuito, para compilar LESS y SASS, para Mac y Windows)

Referecia técnica de código para consultar en caso de ser necesario (a quienes puedan leer en inglés, les recomendamos utilizar las referencias en ese idioma, ya que son mejores y más actualizadas que las que están en español):

Plantillas HTML5:

Hosting gratuito:

  • Jun 29 / 2016
  • Comentarios desactivados en Programa del ejercicio evento efímero 2016*
Diseño III, Programas, Sin categoría

Programa del ejercicio evento efímero 2016*

Ejercicio
Identificación y comunicación de una feria, festival o evento efímero similar.

1. Objetivos pedagógicos a cumplir
Que cada estudiante diseñe el sistema de identificación y comunicación para un evento temático, en tiempo real de trabajo profesional y con alto componente de autocorrección.

2. Contenidos principales

  • La identificación y los medios gráficos de identificación.
  • Comunicación e identificación visual de eventos y mensajes temporales.
  • Los códigos promocionales y persuasivos. El registro informativo y legal.
  • Llamado de atención y singularidad.
  • Unidad estilística en los sistemas gráficos de piezas. Constantes y variables.
  • Secuencia de lectura, llamado de atención, adaptación a distintos tamaños y formatos.
  • Legibilidad.
  • Jerarquización y organización de la información.
  • Tipologías de promociones y sus estilos.

3. Pedido de diseño
Cada estudiante diseñará un sistema de piezas de carácter promocional para un evento efímero.
El diseño tendrá el objetivo de otorgarle identidad y personalidad gráfica al evento; informar correctamente acerca de los motivos, precios, lugar, fechas, y, fundamentalmente, persuadir al público destinatario para que concurra.
Se adjudicará un tema específico de cada evento y el estudiante deberá completar la información básica del mismo.

El sistema de la promoción incluirá, al menos, las siguientes piezas:

  • Afiche de vía pública 110 x 140 cm. (Carteleras municipales). Cada alumno deberá presentar el afiche montado en una cartelera real en el entorno urbano, para eso tendrá que sacar previamente una foto adecuada a este pedido.
  • Gráfica en el frente del edificio o predio donde se realiza. Para esto cada alumno tendrá que sacar una foto del lugar y montar su mensaje sobre las estructuras existentes o simular la situación de montaje.
  • Mini sitio web: solo la página de inicio (para una resolución de pantalla de 1024 x 768 px).
  • Mail promocional: 1200 px
  • Aviso en prensa: página de revista adecuada al caso. Cada alumno elegirá una revista cuyo perfil sea compatible con el evento elegido, y montará su aviso en página impar, pero mostrando la doble página completa (la página par debe ser real de la revista). Formato 20 x 28 cm.
  • Invitación: 10 x 15 cm. (Frente y dorso)
  • Credencial: estandar aprox. 10 x 15 cm

El evento contará con 4 sponsors elegidos por el alumno cuyas marcas deberán ser incluidas en todas las piezas gráficas.

 

4. Pautas principales de evaluación
La evaluación del trabajo tendrá en cuenta:

Capacidad identificatoria:
La adecuada relación de imágenes, cromática, tipografía y misceláneas para otorgarle personalidad propia acorde al perfil del evento.

Carácter sistémico:
La capacidad de las piezas de articularse como partes de un mismo mensaje; correcta relación entre variables y constantes.

Lenguaje promocional:
Adecuación de la propuesta gráfica a los fines del pedido: persuadir al público y provocar –facilitando– acciones de adhesión al mensaje.

Ajuste tipológico y estilístico:
Es la pertinencia de las decisiones formales al tipo de evento y caso específico.

Rendimiento comunicacional:
Clara comprensión de la imagen y el texto principal. Correcta selección de contenido y correcta jerarquización.

 

5. Temas
Los docentes asignarán a los alumnos un tema a desarrollar.


6. Condiciones de la entrega

Se entregará en 3 paneles tamaño A3 montado en soporte rígido, unidos de manera que se puedan plegar.

En ellos, cada alumno deberá aplicar la gráfica desarrollada. La distribución de piezas en los paneles será informada oportunamente por la cátedra.

De ser necesario para una evaluación más precisa (ajuste tipográfico, etc.), algunas piezas que figuran en los paneles se entregarán, además, en hojas sueltas.

 

Ejemplos de años anteriores:

http://catedrabelluccia.com.ar/portfolio/types/imagen-de-un-evento-efimero/

Páginas:12345678...13