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

Presentación del tema: "Curso-Taller: Fundamentos de programación web multi-dispositivos"— Transcripción de la presentación:

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

2 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.

3 [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]

4 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.

5 INTRODUCCIÓN Does it make sense?

6 Introducción

7 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

8 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.

9 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 = 'df21e130d211cfc94d9b a7c0f' + '1e3d39e33b eea76'; 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( ' + 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: A continuación, CTRL+SHIFT+P -> install package -> HTML5

10 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

11 <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

12 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)

13 ¿CÓMO VAMOS? Continuemos

14 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

15 BOOSTRAP

16 ¡Que esperamos para bajarlo!
Bootstrap (2) ¡Que esperamos para bajarlo!

17 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.

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

19 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.

20 LLUVIA DE PREGUNTAS 15 minutos mas y un receso breve

21 NUEVA PÁGINA WEB

22 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.

23 Calle Colorines #2 Col. Bello Horizonte, Cuautlancingo, Puebla.
DIRECCIÓN GENERAL Calle Colorines #2 Col. Bello Horizonte, Cuautlancingo, Puebla. Tels: (222) /