dg0952 03o. Descripción inicial para examen de Diseño de páginas web. Ecc Diseño de páginas web. Estructura de páginas. Escuela de la Camara de Comercio. Material de soporte para docencia. Licenciatura en diseño gráfico

1. Escuela Comercial
Cámara de Comercio
Desarrollo Web
Proyecto Final
2015
Entrega 20 de Agosto 2015
Diseño de portafolios de
trabajo en línea.
Objetivo:
El alumno diseñará un portafolios de trabajo donde
expondrá al menos 10 trabajos de lo más destacado
realizado en la carrera.
El proceso de diseño comenzará desde la
comprensión de temas generales de internet, a
través de la instalación y parametrización de una
herramienta de gestión de contenidos (CMS)
1

2. Proyecto
Diseño de portafolios de
trabajo en línea.
Actividades:
1. Hosting
2. Acceso a Hosting
3. Descarga e Instalación
4. Configuración inicial
5. Personalización
6. Generación de contenido
7. Publicación
Hosting:
El alumno creará una cuenta nueva en
un servicio de hospedaje de sitios
gratuito.
( http://www.000webhost.com/ )
Es un servicio de hospedaje, el cuál
presenta publicidad en su plan gratuito.
Al firmarse en el plan gratuito, el alumno
definirá un dominio provisional,
ingresando el nombre del sitio desado
en el campo:
“ or, I will choose your free subdomain
(recommended) "
Ingresará su nombre, correo electrónico
y asignará una contraseña
Al dar click en el botón “Create my
Account” se detonará un correo a la
cuenta de correo proporcionada, para
confirmar la cuenta.
Una vez confirmada, el alumno tendrá
acceso a los datos del servidor FTP.
2

3. Proyecto
Diseño de portafolios de
trabajo en línea.
Acceso al Hosting:
Con una herramienta de transferencia
de datos FTP ingresará a la estructura
de carpetas del Servidor.
Esta herramienta puede ser “Fire FTP”,
Extensión para el navegador Firefox que
se puede Intalar desde la opción de
“Extensiones” en el menú del explorador.

4. Proyecto
Diseño de portafolios de
trabajo en línea.
Descarga e Instalación:
Desde la página de Wordpress
( http://es.wordpress.org/ ) descargará el
sistema de CMS a su computadora, y
descomprimirá la estructura de archivos.
En esa misma página
( http://es.wordpress.org/ ) son
presentadas las opciones de Instalación.
Seguir las instrucciones sólo de ese
apartado. Las opciones de “Instalar solo
el idioma” no son necesarias.

5. Proyecto
Diseño de portafolios de
trabajo en línea.
Descarga e Instalación:
Para instalar el sitio en el servidor
Es necesario entrar al “cPanel” que es la
página de configuración del hosting. (
http://members.000webhost.com/login.p
hp )
Dentro del “Cpanel” en el apartado
“Software/Services” dar click al icono de
“MySql"
Ahí se creará una nueva BASE de
DATOS ingresando: NombreDeLaBase
(con el nombre que el alumno decida, se
recomienda “MiWordpress”), se asignará
un Usuario y una Contraseña.
Con esos datos será necesario abrir los
archivos de configuración (que
mencionan las instrucciones de
Wordpress), en Dreamweaver.
wp-config-sample.php a wp-config.php
Posteriormente es necesario estar
conectados a su servidor vía FTP, e
ingresar los archivos dentro de la
carpeta “public_html”.
NO es necesario crear una carpeta de
“portafolio"
No subir los documentos en raiz (donde
se encuentra un archivo que dice
“DO_NOT_UPLOAD_HERE”). Ahí no.

6. Proyecto
Diseño de portafolios de
trabajo en línea.
Configuración inicial:
Completar los datos de instalación en la
dirección de SU sitio, diagonal el archivo
indicado por las instrucciones de
Wordpress:
/wp-admin/install.php
Crear un nombre de sitio
Crear un Usuario y Contraseña
Confirmar datos
Entrar al panel de control
Personalización:
El alumno buscará un “Tema" de acuerdo
a sus necesidades de diseño.
Buscará un “Tema" relativo a portafolios
de diseño o galería de imáganes, en el
apartado de "Apariencia".
Instalárá y activará el “Tema".
Lo personalizará en cuanto a gama de
colores y si el tema lo requiere, generará
una imagen de cabecera para vestir el
sitio.

7. Proyecto
Diseño de portafolios de
trabajo en línea.
Personalización:
De ser necesario, el alumno puede ver el
código fuente y hojas de estilo de un
tema, presionando el botón derecho del
mouse sobre un elemento, y seleccionar
la opción “inspeccionar Elemento”, esto
utilizando el explorador Firefox.
De ese modo puede ver el estilo, y la
línea en la hoja de estilos que podrá
editar, si así lo desea, en la opción
“Editor” dentro de el menú “Apariencia”
del panel de Wordpress. Esta última
acción, es opcional.

8. 8
Proyecto
Diseño de portafolios de
trabajo en línea.
Generación de Contenido:
El alumno seleccionará al menos 10 de
los trabajos realizados en el año y
generará imágenes de un tamaño
estandarizado para las portadillas o
“ímágenes detacadas” de cada “Entrada”
que vaya publicar.
La “Entrada", en el cuerpo de texto
contendrá texto descriptivo, que será el
objetivo del proyecto. Ejemplo:
Cuando el alumno tenga el material
debidamente exportado y reunido para
el sitio, creará una “Entrada" para cada
trabajo.
Cada entrada será categorizada con
“etiquetas”.
Por medio de el módulo de “Widgets”,
sólo ingresará el widget de “Núbe de
Etiquetas” el título de este Widget será
“Especialidad”.
Título: Agua Embotellada
Tipo de proyecto: Composición digital
Descripción: A través de el uso de
Photoshop, el objetivo era crear una
composición donde se creara un fondo y
se montara una botella recortada, se
ponía atención en integrar los bordes y
reflejos para un efecto realista, también
por medio de opacidad se le dio una
apariencia de producto Frío, jugando con
los blancos.
Se integraron textos calados a modo de
logotipo, proyectando sombras.

9. 9
Proyecto
Diseño de portafolios de
trabajo en línea.
Entrega
El alumno enviará al profesor la
dirección electrónica de su Portafolios
para revisión previa a la Entrega final.
La entrega se realizará el día 20 de
Agosto de 2015 a las 9:00 am en el
laboratorio de cómputo.
En esta entrega, el alumno abrirá la
dirección de su Portafolio, y explicará la
experiencia que tuvo en la publicación
del mismo.
Se evaluará:
La capacidad de entender un
requerimiento de Diseño
El entendimiento de un proyecto Web
desde su planeación hasta su publicación
La capacidad de diseño a partir de
herramienta de personalización,
mezclado con conocimientos de hoja de
estilo.