Hoy hablamos de...
Preparando el aula: Como se articula este aula de programación web
"En resolución, él se enfrascó tanto en su lectura, que se le pasaban las noches de claro en claro, y los días de turbio en turbio, y así, del poco dormir y del mucho leer,se le secó el celebro..."
Capítulo I del Quijote
Si no sabes el autor, vete de aquí.
(Sonidos incongruentes que forman un fuerte ruido de fondo. Tonos de notificación de whatsapp, risas inconexas sobre chiste inaudibles. Un amplio espectro de timbres de voz… ruidos de arrastre de pupitres, cachos de tiza que impactan el encerado… Primer día de clase en un aula de cualquier parte…..
Entra alguien que empieza a intuírse como profesor porque se dirige directo a la mesa que mira hacia los pupitres. No se fía y mira su silla… )
- ¡A ver!… ¡¡lo de las chinchetas está muy visto…!! (muestra la chincheta que acaba de recoger en la silla)
(prosigue el murmullo que decae un tanto mientras se propaga por la clase la sensación de que alguien pretende manifestarse como profesor…)
- ¡¡¡un poco de atención… !!!, esos del fondo, ¿quieren ir apagando los móviles, ¡¡por favoooor!!?…. Hay inhibidor de frecuencias, ¿me obligarán a activarlo?…..
(El ruido desciende a un nivel mínimo en un par de minutos… Al profesor siempre le parecen docenas y docenas esos minutos, pero, por fin, se alcanza ese punto crítico de silencio en el que el profe tienen esa oportunidad única y efímera de hacerse con la clase… )
- ¡Buenos días, Soy Juan Carlos y soy el profesor de desarrollo web.
Hoy es el primer día y os voy a contar brevemente como vamos a organizar el curso y espero que mañana os presentéis con ganas de trabajar porque empezaremos a saco con “el lado cliente” y los primeros pasos con html y css…
Esta es la antigua escuela unitaria de Terzas en Cartelle (Ourense)
Las escuelas unitarias constaban de una o dos aulas en la que un solo profesor atendía a todos los alumnos del nivel primario. Solían ser de dos plantas. En la baja estaba el aula y en la superior la residencia del maestro. Fue una gran solución para llevar la educación al alcance de los habitantes del medio rural.
En esta escuela, la profesora Doña Herminda impartíó clases haste el curso del año 1974. Actualmente, los vecinos de Terzas hemos rehabilitado la escuela para uso lúdico. Especialmente hacemos fiestas gastronómicas con cualquier excusa que se nos presente.
Es muy sencillo: vamos a aprender a escribir documentos de hipertexto con el lenguaje de marcas “html5”, a dar estilos y dotar de funcionalidades dinámicas a esos documentos con “css3”.
También vamos a estudiar como establecer un sitio web para alojar estos documentos y ponerlos a disposición del público. Es decir, crear un sitio web.
También aprenderemos a programar con el lenguaje PHP versión 7, lo que nos permitirá que, ademas de tener magníficos documentos de hipertexto, podamos tratar información que nos envíe el usuario y hacer que los documentos html sean mucho mas que simples documentos de texto e imágenes.
Cuando hayamos estudiados los tres componentes propuestos (html, css, php) el alumno será perfectamente capaz de crear un sitio como este en el que estamos, con todas sus funcionalidades, estilos, dinámicas, etc.
Pero no nos quedaremos aquí. Cuando ya sepamos programar con soltura, estudiaremos algunas herramientas de ayuda al desarrollador y al diseñador tanto del lado cliente como del lado servidor. Por ejemplo: frameworks como jQuery o bootstrap, CMS como wordpress o Joomla y otras interesantes herramientas.
arriba -- índicePara seguir este curso, un alumno debe tener a su disposición algunos medios técnicos (pocos, pero imprescindibles) y un cierto nivel de formación e interés como usuario de informática. No es necesario conocimientos previos de programación. (sin duda un programador tendrá ciertas ventajas, pero el curso ha sido construido pensando que el alumno no es programador). Veamos estos mínimos requisitos:
Lo primero que necesitas es un ordenador. ¿qué ordenador tienes?
bueno… Este en concreto va a ser un poco… como lo diría…. Insuficiente. A ver, yo tuve uno como ese hace 30 años y era fantástico, pero ahora queda ligeramente obsoleto….
A ver, busca algo un poco mas potente.
¡¡Vaya…!! Este es un poco demasiado grande para meter en tu casa o en tu oficina… Bueno, ya lo quisiera yo, pero es que resulta algo carillo: unos millones de dólares…
En serio:
Necesitas un ordenador actual en el que corra cualquier navegador web actualizado y una conexión a Internet. Lo mas importante es que sea un ordenador portátil o de sobremesa CON UN BUEN TECLADO y una pantalla que te resulte cómoda de leer.
Si tenías planeado seguir el curso en tu tablet o tu móvil, te lo desaconsejo:
- primero porque, si realmente te propones aprender, tendrás que tener abiertos a la vez el navegador, un editor de textos, varios directorios, etc. y tendrás que ir escribiendo código y probando resultados a medida que vayas estudiando cada tema.
- segundo porque, para escribir una página web, hay que escribir cientos y cientos de líneas de código y, ¿cómo te diría yo…?, si no dispones de un teclado con el que teclear rápidamente pues mal te veo… Por cierto: ¿que tal andas de mecanografía?. Si das menos de 150 o 200 pulsaciones por minuto deberías plantearte hacer un curso de mecanografía.
Prueba “mecawin”. Es un clásico desde 1995 para aprender mecanografía en teclados de ordenador:
Sigamos viendo mas requisitos materiales:
- Vamos a tratar en tres grandes bloques el curso:
- bloque uno: html y css para este bloque necesitarás tan solo de tu ordenador y de un poco de software:
1- dos o tres navegadores para probar los resultados de tus programas en varios soportes diferentes.
Te aconsejo estos:
2- Un editor de texto plano. Sirve tu block de notas. Pero mejor usa un editor como este
Descárgalo e instálalo y juega con él a ver si eres capaz de darle un aspecto parecido a este que te muestro:
Este pantallazo es del editor de texto plano que uso yo. No es notepad++ porque yo utilizo LINUX y uso un editor aún mas simple que notepad. En el tema dos, veremos el editor notepad con mas detalle.
arriba -- índice- En el blque dos aprenderemos a programar con PHP, y en el tres manejaremos herramientas de desarrollo. Para ello necesitaremos UN SERVIDOR. Tendremos dos opciones: Un servidor real y un dominio (para eso dedicaremos un tema a estudiar algunas ofertas y enlazaremos a artículos de otros autores donde estudian distintos servidores), o el servidor LOCALHOST, que residirá en nuestro propio ordenador y que sólo tendrá la desventaja de que tan solo nosotros podremos ver lo que hagamos. (así que no podremos presumir ante nuestros amigos de las redes sociales porque no tendrán acceso)
LOCALHOST ya está instalado en tu ordenador y se ocupa de comunicarse con tu router. Pero, para probar nuestros programas necesitaremos añadir algún software (en concreto, xampp. Búscalo e infórmate sobre él. Pero no lo instales de momento. Ya veremos en su momento como configurarlo)
NOTA: habrás observado que no he mencionado para nada “internet explorer ni Edge”. Ni lo haré. Yo evito, por principios personales, usar cualquier software de Microsoft. De hecho ni siquiera uso Windows. No he probado mi sitio con los navegadores de Microsoft, así que no sé si funciona bien o no y, por otra parte, me trae sin cuidado.
Sin embargo en nuestra aula aprenderemos a conocer el prefijo “-ie-” para que los estilos funcionen con explorer y edge y hablaremos cuando sea necesario de las diferencias entre éstos y los demás.
- No necesitas ser programador ni tener conocimientos previos de diseño web. PERO…
- es necesario que tengas mucha soltura como usuario de ordenador. Que seas capaz de instalar un programa, que sepas organizar tu árbol de carpetas o directorios, que manejes con soltura tu navegador, que manejes con soltura tu procesador de textos, hoja de cálculo, etc. Vuelve a la imagen de mi editor de texto plano. Si eres capaz de descargar notepad++, instalarlo y lograr que muestre un aspecto similar a mi editor (con números de línea) entonces estarás listo para seguir este curso.
Una pista para notepad: prueba a copiar alguna parte del texto que ves en el pantallzo de mi editor, sobretodo las palabras que aparecen entre “<” y “>” y luego guardalo con un nombre como este: “prueba,html” o “prueba.php”. Verás como entonces las palabras que van entre los símbolos cambian a azul.
- también es necesario que seas un gran lector y que tengas capacidad para redactar textos y relatar. Ten en cuenta que en este curso vamos a aprender tres lenguas: html, css y php. Tienen todos los elementos de una lengua, a saber, vocabulario, ortografía, sintaxis, semántica, … Además, como lenguas, son muy sencillas. Hablamos de un vocabulario inferior a 300 palabras y reglas sintácticas y semánticas mucho mas sencillas que los de la lengua en que nos estamos comunicando ahora mismo.
- Ultimo, y mas importante, requisito: paciencia y constancia. Ensaya una y otra vez los ejercicios que te propongo en cada tema y varía los contenidos de cada ejercicio. Esto te dará soltura y seguridad.
arriba -- índiceVeamos ahora como se estructura el curso:
El curso está dividido en tres bloques:
Estudiaremos simultáneamente html y css porque ambos funcionan juntos para dar el aspecto que ves a esta página.
Normalmente se estudia html primero y, a continuación css. Sin embargo yo creo que son inseparables porque, mientras que html organiza los contenidos que queremos mostrar en el navegador, css los dota de estilo, posición y dinamismo.
Así que aquí veremos cada etiqueta html y la dotaremos, no solo de las propiedades que les corresponden, si no también de estilos css desde el primer momento. Esto lo he ensayado ya con alumnos presenciales y funciona mucho mejor que el estudio separado.
Serán de contenido teórico.
Pasearemos en el primero por Internet para ver dónde está cada cosa y como nos conectamos a los contenidos y veremos qué es y donde está un dominio y un alojamiento.
En el segundo intentaremos comprender como opera el mal llamado “navegador web”. Veremos que se le llama “navegador” porque permite ir (si sabemos a donde ir) a lugar donde está un documento de hipertexto (dentro o fuera de nuestro ordenador) y traerlo temporalmente a nuestro ordenador. Pero eso es solo parte de la tarea. La otra tarea que hace es “renderizar” documentos de hipertexto, imágenes, video, etc.. ¿Has notado que no he utilizado el verbo “buscar”…?. Ha sido deliberado. Ya veremos en el tema dos por qué.
Estarán llenos de ejercicios y mas ejercicios. De una forma totalmente práctica iré construyendo una página paso a paso y te mostraré el código y las pertinentes explicaciones. En concreto construiremos un sitio como el mío.
arriba -- índiceCuando comencemos con el bloque dos nos habrá surgido una necesidad: habremos hehco un bonito diseño de página pero tendrá una grave limitación: No hace nada mas que mostrar contenido estático y, lo que es peor, hemos hecho estupendos formularios, tablas y listas para recoger y mostrar todo tipo de datos y ni se recogen datos ni se muestran mas datos que los fijos que hemos utilizado para hacer los formatos…
Es hora de aprender qué es lo que pasa en el servidor y de aprender a hacer programas para tratar la información.
- Abordaremos la instalación del LOCALHOST “Apache” (xampp) en nuestro ordenador.
- También aprenderemos a crear un dominio y a contratar un alojamiento en Raiola networks y a cargar la primera página (index.html). Ya podremos presumir ante los colegas de lo que hacemos.
- habrá una propuesta de trabajo para los que estén interesados para contratar entre varios un único dominio y alojamiento (así se reparte el coste entre todo el equipo) y crear subdominios para uso individual (los subdominios no tiene coste)
- haremos una lista de servidores gratuitos por si alguno prefiere ese tipo de servicio. (pero recuerda; si te dan un servicio gratis es porque el producto eres tú. ¡¡cuidado!!)
Hasta que no lleguemos a este tema no sabrás contratar un dominio ni tener un alojamiento. Ni tampoco utilizarás el LOCALHOST porque no es necesario para ejecutar archivos que solo contienen html y css. PEEROOOO! Tal vez quieras ir mostrando tus contenidos a tus contactos a medida que vas aprendiendo a hacerlos. Así que te plantearás tener un dominio y un servidor.
Yo puedo hacerte ese trabajo y prepararte una carga inicial. Consultarme por correo. Ah… por cierto si te hago este trabajo te tendré que cobrar una pequeña cantidad.
(si ya tienes un sitio web te ayudo a crear un subdominio para que metas tus ensayos y te enseño a usar cPanel o Filecilla para cargar los archivos. A bajo coste.)
Del bloque uno hemos arrastrado un proyecto que ahora nos tocará, tema a tema, desarrollar con los programas funciones y objetos que sea preciso. Cuando iniciemos este bloque entraremos mas en detalle sobre la organización.
No te contaré de qué va esto hasta que sea el momento. Solo te diré que, para entonces sabrás conducir bien y te propondré sentarte al volante de un ferrari. ¿qué te parece?
Ahora veamos un breve apunte sobre los recursos metodológicos con los que realizaremos el desarrollo del aula.
Videos, audios y otro material de ese tipo. Los video tutoriales constituyen un recurso metodológico eficaz para explicar pequeños procedimientos y tareas. Pero no los considero un recurso útil para un programa completo de formación de un programador. Además no tengo un autentico estudio de vídeo y no pienso poner un material de dudosa calidad en mi sitio web.
Acaban de saltarle todas las alarmas y están fibrilando mis amigos marketeros….
Tampoco habrá versión del sitio para móvil.
Varios marketeros, los mejores, acaban de fallecer. Que en paz descansen.
Porque si quieres realmente aprender tendrás que leer y releer una y otra vez el contenido mientras ensayas los ejercicios propuestos. ¿realmente vas a andar con el “play” adelante y atrás…?
Lo lógico es que tengas abierto el tema que estás estudiando en una pestaña mientras tienes abierto el notepad, y en otras pestañas del navegador vas viendo el resultado de lo que estás haciendo…
¡Vale!. Pues aquí los tienes:
Se llaman “miriada X” y son increíblemente buenos.
Prueba con ellos. Tienen de todo: Programación, marketing, motivación… También tocan las pseudociencias (programación neuro-linguistica, coaching, meditación…). Ah…. Y ¡¡gratis!!
Prueba algún tema de este sitio y establece tu propia comparativa. Solo tú puedes saber lo que te va mejor.
- Ejercicios, ejercicios, ejercicios.
- pantallazos y mas pantallazos.
- esquemas, cuadros sinópticos, notas destacadas, enlaces a otros sitios…
- y… el mejor recurso que tiene un profesor desde hace mas de 200 años:
La pizarra:
- Cada tema será descargable en versión PDF que podrás leer en tu pantalla o imprimir.
- También tendrás a tu disposición un servicio de clases particulares mediante el correo electrónico, teléfono o Skype. Si te fijas, arriba a la izquierda de esta ventana, hay un enlace que pone “tu profesor particular” ahí te explico las condiciones y prestaciones de este servicio.
- Si lo deseas, podré encargarme de imprimirte una copia de cada tema, encuadernarla y enviarla contra reembolso a tu domicilio. Te haré previamente un presupuesto que básicamente consistirá en lo que me cobre la imprenta, los gastos de correos y 10 euros para compensar mi trabajo.
Pero paso a paso se hace el camino. Asi que, si quieres, vamos al primer tema:
Post Data: Este proyecto es largo y costoso. Para poder asfrontarlo estoy consiguiendo diversos patrocinios. Por favor visita los sitios de los patrocinadores que hay en la columna de la izquierda y conoce quien me está ayudando.
Tu también puedes ayudar: Usando el servicio de profesor particular, interesándote por ser patrocinador o, si lo crees oportuno, mediante un donativo. (para donar hay enlace en “tu profesor particular”)
El donativo es una práctica común entre los desarrolladores “open source” y nos permiten dedicarnos al cien por cien a nuestros proyectos con independencia y libertad. El sistema operativo Linux, la Wikipedia, Libre officce, el lenguaje PHP, … son algunos ejemplos significativos de trabajo “open source” y que subsisten con los donativos que reciben y con los servicios de pago que ofrecen para completar el producto que ofrecen.
También puedes colaborar escribiendo un artículo para “info -herejías” o un tema que titularé “suplemento” con tu nombre y tu sitio bien visible y que publicaré en el aula.
O Juan de Terzas
©Juan Carlos Martínez Álvarez
Everything You Need To Be Aware Of Boat Accident Case boat accident
lawyer
Recomienda visitar: https://highwave.kr/bbs/board.php?bo_table=faq&wr_id=1913265
NOTAS:
- Si incluyes tu correo electrónico recibirás notificaciones de los nuevos comentarios de este hilo exclusivamente.
- Si solo quieres seguir el hilo pero no comentar, no escribas en la caja de comentarios pero indica tu correo.
- Si ya has comentado o seguido antes el hilo no hace falta que pongas tu correo de nuevo.
- Reservado el derecho de moderación: Aunque tu comentrio se publica automáticamente, después será revisado y puede ser eliminado o editado si no cumple con la politica de uso de este sitio. Si se modera, se publicará un aviso en su lugar indicando las acciones de moderación realizadas.
O Juan de Terzas
©Juan Carlos Martínez Álvarez
