Curso-Taller: Fundamentos de programación web multi-dispositivos

Traer material en texto y fotográfico Consideraciones DESEABLE tener nociones básicas de desarrollo de páginas web HTML CSS Javascript Contar un equipo de cómputo con un microprocesador de 2 núcleos y 2GB en RAM como mínimo para un mejor desarrollo de las prácticas. Contar con mouse óptico (altamente recomendado) Tarjeta inalámbrica de red en buenas condiciones Traer material en texto y fotográfico Estudiantes trabajando en aulas y laboratorios, fotos de los espacios con que cuenta el plantel, foto de la fachada, foto del director del plantel. Información general de los servicios que otorgan en el plantel. Contar con los datos de acceso al FTP del sitio web de su plantel. En caso de ya no contar con ellos, durante la sesión se les pueden volver a otorgar.

[Voy a hacer uso de la sala donde vamos a estar trabajando] Horarios y avisos A las 11 en punto, un receso de 20 minutos para el Coffee Break. A las 14hrs, 30 minutos para comer. [Voy a hacer uso de la sala donde vamos a estar trabajando]

OBJETIVOS GENERAL Desarrollar habilidades básicas de programación de páginas web utilizando tecnologías de vanguardia en el ramo. ESPECÍFICO Publicar la página web del plantel al que pertenece el participante, con la información de mayor relevancia para su región.

INTRODUCCIÓN Does it make sense?

Introducción

Instalación de herramientas Necesitamos 3 elementos Editor de texto plano Navegador web Herramienta de diseño gráfico (opcional) Yo sugiero usar: Sublime Text Google Chrome con el complemento Window Resizer v2 Adobe Photoshop

Primero analizo, diseño, luego programo. HTML5 Primero analizo, diseño, luego programo. A este bosquejo o diseño informal, se le denomina Wireframe y puede incluir botones y textos.

Primer ejercicio CON SUBLIME The simplest method of installation is through the Sublime Text console. View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console. SUBLIME TEXT import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) Más informes: https://packagecontrol.io/installation A continuación, CTRL+SHIFT+P -> install package -> HTML5

Uso del la etiqueta de división <div> Código html Uso del la etiqueta de división <div> Actividad: Traduce tu diseño a código HTML y genera contenido dummie. Prueba el resultado. 5 minutos

<link rel="stylesheet" href=“estilo.css"> AGREGANDO CSS Uso de la etiqueta <link rel="stylesheet" href=“estilo.css"> Asignación de Clases e identificadores CSS Scope Propiedad/valor

CSS Hojas de estilo Actividad: Usa colores de fondo a cada división de acuerdo al diseño que tienes. 10 minutos TIP: Cuando se tiene claro que colores usar en el diseño, usa el código exacto del color directamente de Photoshop, o usa Adobe Kuler (requiere registro para iniciar sesión)

¿CÓMO VAMOS? Continuemos

TIPs para codificar rápido Instalar el paquete EMMET para sublime text. Cierra y vuelve a abrir Sublime Text Prueba! Como aprender todo sobre EMMET en http://emmet.io/

BOOSTRAP

¡Que esperamos para bajarlo! Bootstrap (2) ¡Que esperamos para bajarlo! http://getbootstrap.com/

Agrega estos elementos en algunas de tus divisiones: actividad Vamos a personalizar nuestro sitio utilizando esta framework. Solo hagamos un cambio antes, quita el fondo de las divisiones y agrega bordes finos. Agrega estos elementos en algunas de tus divisiones: Agrega una tabla Agrega una imagen Agrega una barra de navegación Prueba algunos elementos más de la sección COMPONENTS de la framework.

GRID Bootstrap maneja un total de 12 columnas y 4 resoluciones base: xs,sm,md,lg.

Volvamos al código Hagamos que nuestra aplicación crezca para lograr el aspecto deseado en los diferentes dispositivos. Tu página debe ser compatible con un Smartphone, una Tablet y una PC al menos. TIP: Instala el complemento Window Resizer v2 en tu Google Chrome para hacer el test correspondiente.

LLUVIA DE PREGUNTAS 15 minutos mas y un receso breve

NUEVA PÁGINA WEB http://cecytepuebla.edu.mx/demoplantel/

META La plantilla del sitio debe actualizarse con los datos que ustedes traen, y deben adecuar lo necesario para que solo aparezcan datos actualizados de su plantel. El resto de la tarde es el límite. Una vez que terminen, pasan a validar y se sube al ftp el sitio.

Calle Colorines #2 Col. Bello Horizonte, Cuautlancingo, Puebla. DIRECCIÓN GENERAL Calle Colorines #2 Col. Bello Horizonte, Cuautlancingo, Puebla. Tels: (222) 298 28 08 / 409 74 56 www.cecytepuebla.edu.mx