Bienvenidos a la clase "00"

Introduccion

Bienvenidos, bienvenidas a esta clase: Lo primero que tienes que tomar en cuenta es, que para realizar este curso debes contar con un computador, un lugar confortable y tener conocimiento a nivel de usuarios en el manejo de un ordenador. Lo segundo es descargar ciertos softwares que nos ayudaran a trabajar mas holgadamente. Lo tercero es tener la disposición de aprender, por lo que este curso esta preparado para tres clases de alumnos:

Asistente virtual: Es aquel que asiste al curso en forma libre sin comprometerse con su enseñanza y sin embargo comienza a estudiar con nosotros.

Asistente Inscrito: Es el alumno que se inscribe para recibir material de estudio adicional por E-mail al término del curso.

Asistente Abonado: Es el alumno que abona por el curso y recibe material de estudio adicional, como video por clase y otros documentos para que profundice más sobre el tema

Sea cual sea el asistente, te damos desde ya la bienvenida a este curso y esperamos ser un aporte en tu formacion academica.

La "clase 00" es la forma como esta maquetado este curso, donde veremos videos, descargas ("PDF de la clase") y una biblioteca de apoyo para entender el curso.

Comenzamos el curso y lo primero que vamos hacer es Descargar la plantilla que usaremos y dos programas para personalizarla.:

Aquí descarga la primera plantilla La que usaremos se llama "URBAN", una ves que la descargues la tienes que descomprimir.

Aquí descarga el editor web Brackets es un editor de texto moderno que nos va facilitar hacer los cambiios en la plantilla. No te preocupes si es primera ves que usas un editor, es fácil de usar.

Aquí descarga el editor de imagen PhotoScape es un editor simple y gratuito. Fácil de usar. Este editor lo usaremos para montar las imagenes nuestras.

Ver video

En el video se explica como descargar la primera plantilla que usaremos para este curso. Que como ves no requiere tanto trabajo. Para quienes tienen poca experiencia es importante que la descarga la envía a tu computador en la sección "Dowloads" o tal vez en "Documents". Si tienes personalizado tu computador en español estas serán "Descargas" o "Documentos".

Tambien nos explica como descargar ciertos programas que nos ayudaran crear los nuevos cambios en la plantilla "urban"

Desarrollo del Curso

Al descargar, nos encontamos segun la imagen con lo siguiente: Un archivo RAR que debes descomprimir, una vez hecha esta acción te aparecera una carpeta llamada "urban", al abrir esta carpeta, te encontraras con 2 carpetas y un archivo html llamado "index". La carpeta "assets" contiene 3 carpeta a lo que llamaremos "libreria". La carpeta "images" contiene las imagenes que remplazaremos por las nuestras.

En esta libreria encontramos

1. css:
   En esta carpeta encontramos dos "hojas de cascadas" llamadas CSS que es un archivo de programación que se utiliza para controlar la presentación de los elementos de una página web.El CSS se utiliza en conjunto con el lenguaje HTML, que se encarga de la estructura básica de los sitios web. El CSS se encarga de la apariencia de las páginas, como el diseño, los colores, las fuentes, el posicionamiento, y otros valores estéticos
2. fonts:
   En esta carpeta encontramos un archivo tipo 3 de fuentes que es un bloque @font-face que se incluye al inicio del CSS para especificar los archivos de los tipos de letra que se quieren descargar en una página web
3. js:
   En esta carpeta encontramos 6 archivo JavaScript (.js) estos son archivos de texto plano que contiene scripts de JavaScript y que puede ser modificado con cualquier editor de textos. JavaScript es un lenguaje de programación que se utiliza para hacer páginas web interactivas

Una mirada a la plantilla

Como pudieron notar la plantilla es simple, contiene un archivo index y nosotros debemos crear los otros dos archivos restante por lo que la tarea ahora se nos pone un poco difícil. Pero tranquilos para eso estamos aqui en este curso. Vea por favor la siguiente imagen:

Ahora comenzamos a ver lo que hay que cambiar en el archivo html "index". Pero antes tenemos que hacer un boceto de nuestro proyecto personal para realizar los cambios.

En el ejemplo de este curso, nuestro proyecto tiene que ver con la mirada del santiago centro actual y es necesario contar con un logo atractivo, sin embargo en esta plantilla no será una imagen, sino que, el nombre "Urban by TEMPLATED".

Según la imagen "Urban" tiene un color cuyo codigo es #3498DB, que seria como un celeste y "by TEMPLATED" tiene otro codigo de color que es #FFFFF, que seria un blanco. Tambien notamos que estos cambios estan entre "Header", ya hasta acá vemos dos cosas interesantes:¿Donde cambio el color del nombre? y que ¿es Header?.

Vamos por pasos

Paso Uno: Cambiar el nombre a la carpeta: Desde ahora se llamará "santiago"

Paso Dos: Los archivos HTML "generic" se llamara "mirada_imagen" y el "elements" se llamará "contacto"

Paso Tres: Abrir "index" con Brackets (Editor de texto)

Paso Cuatro: Cambiar en "title" el nombre de la página por "Santiago Centro - Una mirada diferente"

No olvide descargar el PDF de esta clase, para entender los pasos.

CLASE 01

Bienvenidos a la clase "01" Esta clase es la base principal de todo el curso

Si ya estas preparado ENTRA A LA CLASE CLASE "01"