Showing source for: https://www.terzas.es/temas/tema000.php
Duration: 0.128427s
<!DOCTYPE html>
<html lang="es">
<head>
<!-- ++++++++++++++++++++++++++++++++ NO OLVIDAR MODIFICAR LOS METAS CON EL NUEVO NOMBRE PHP -->
<meta charset="utf-8">
<meta content="O Juan, Tema cero, presentamos la organización de 'Un aula desde terzas' donde podrás aprender a programar en la web y discutir sobre la web de forma alternativa y hereje En este tema vemos como se organiza nuestra aula " name="description">
<meta content="Juan Carlos Martinez [email protected]" name="author">
<meta content="2017-05-16T16:47:52.256607402" name="created">
<meta content="desarrollo de aplicaciones con tecnología web, proyectos web, asesoría web, redaccion de textos, análisis funcional y orgánico, estudios de viavilidad web, programacion, psocion crítica, aula de programadores" name="keywords">
<meta content="https://terzas.es/temas/tema000.php" property="og:url">
<meta content="website" property="og:type">
<meta content="O Juan de Terzas, Desarrollo web. Aula online de programación web html css y php, clases particulares a distancia de programacion web" property="og:title">
<meta content="O Juan, Un aula desde terzas, donde podrás aprender a programar en la web con html, css y php, y discutir sobre la web de forma alternativa y hereje. En este tema vemos como se organiza nuestra aula " property="og:description">
<meta content="https://terzas.es/cannis.jpg" property="og:image">
<title>
O Juan, Tema cero, Organizando Un aula desde terzas, aula online de html css y PHP.
</title>
<link href="https://terzas.es/temas/E_ancho.css" media="(min-width: 800px)" rel="stylesheet">
<link href="https://terzas.es/E_mediano.css" media="(min-width: 500px) and (max-width: 799px)" rel="stylesheet">
<link href='https://terzas.es//E_estrecho.css"/' media="(max-width: 499px)" rel="stylesheet">
<link href="https://terzas.es/temas/ESTILOt.css" rel="stylesheet" type="text/css">
<!-- Place this tag in your head or just before your close body tag. -->
<script async="" defer="" src="https://apis.google.com/js/platform.js">
{
lang: 'es';
}
</script>
</head>
<body>
<div id="fb-root">
</div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- botonera ++++++++++++++++++++ recordar PONER NUEVAS DIRECIONS HTTPS en los botones de las redes +++++++++++++++++++++++++ -->
<div class="portador">
<div style="margin-top:.5em;">
<div class="g-plusone" data-annotation="inline" data-href="https://www.terzas.es/temas/tema000.php" data-size="tall" data-width="120">
</div>
</div>
<div>
<a class="twitter-share-button" data-url="https://terzas.es/temas/tema000.php" href="https://twitter.com/share">
Tweet
</a>
<script>
!function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</div>
<div style="margin-top:.25em;">
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: es_ES;
</script>
<script data-counter="right" data-url="https://terzas.es/temas/tema000.php" type="IN/Share">
</script>
</div>
<div style="margin-top:.25em; text-align:center;">
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0/deed.es_ES" rel="license" style="font-size:.5em; line-height:.55em;" target="_blank" title="El sito terzas.es y su contenido están bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional, Y son obra de Juan Carlos Martinez Alvarez ([email protected])">
<img alt="Licencia de Creative Commons" src="https://i.creativecommons.org/l/by-nc-nd/4.0/88x31.png" style="border-width:0; width:80%">
</a>
<br>
<span style="font-size:.5em;">
©
<a href="https://terzas.es/contacto.html" rel="nofollow">
Juan Carlos Martínez
</a>
</span>
</div>
</div>
<!-- fin botonera -->
<!-- clases particulares -->
<div class="portador2">
<a class="portador3" href="clases.php" rel="nofollow" style="font-size:1.4em; text-align:center;" target="_blank" title="Este enlace se abre en una pestaña nueva para que no pierds de vista el tema que estás estudiando">
tu profesor
<br>
particular
<br>
</a>
<a class="portador3b" href="clases.php" rel="nofollow" style="font-size:.9em; text-align:center;" target="_blank" title="Este enlace se abre en una pestaña nueva para que no pierds de vista el tema que estás estudiando">
<b>
!!informate!!
</b>
</a>
</div>
<!-- fin clases particulares -->
<div class="faldon">
<h2>
O Juan D Terzas
</h2>
</div>
<div class="can">
<img src="https://terzas.es/cannis.png" style="height:100%;">
</div>
<div class="detras">
Estás viendo:
<b>
El Aula >> TEMA 0, Organizando...
</b>
<br>
<br>
<br>
<br>
Desarrollador web indpendiente
<br>
Contacto:
<a href="mailto:[email protected]">
[email protected]
</a>
</div>
<div class="menu">
<a class="opcion" href="https://terzas.es/index.php" rel="nofollow" title="Regresar a la portada">
<b>
ir a la portada
</b>
</a>
<a class="opcion" href="https://terzas.es/conoce.html" rel="nofollow" title="Quien soy y qué hago, y la descripcion de qué te vas a encontrar en mi sitio. Pulsa para ver">
<b>
C o n ó c e m e
</b>
</a>
<a class="opcion" href="https://terzas.es/legal.html" rel="nofollow" title="Todo sobre la política de uso de este sitio, el tratamiento de datos y la LOPD">
<b>
Uso y aviso legal
</b>
</a>
<a class="opcione" href="https://terzas.es/curso.php" rel="nofollow" title="Aprende a programar en HTML, CSS y PHP y líbrate de la tirania de los CMS, plugins, ...">
<b>
¡ MAS TEMAS DEL AULA !
</b>
</a>
<a class="opcion" href="https://terzas.es/hereje.php" rel="nofollow" title="Un blog donde encontrarás opiniones sobre informática y recursos muy poco ortodoxas">
<b>
Info - herejías
</b>
</a>
<a class="opcion" href="https://terzas.es/contacto.html" rel="nofollow" title="Las vías de contacto y los servicios que pongo a tu disposición">
<b>
Contacto y servicios.
</b>
</a>
</div>
<!-- Tira del lado izquierdo -->
<div class="izqui">
<div id="indice">
</div>
<div>
<div class="fb-like" data-action="like" data-href="https://terzas.es/temas/tema000.php" data-layout="button" data-share="true" data-show-faces="true">
</div>
<!-- ++++++++++++++no olvidar nuevo https parq facebook. -->
</div>
<div style="clear:both;">
<br>
<a class="opciond" href="contacto.html" rel="nofollow" title="Las vías de contacto y los servicios que pongo a tu disposición">
<b>
¡Suscribete!
</b>
</a>
</div>
<div class="papel2">
<div>
<p>
Hoy hablamos de...
<br>
<b>
Preparando el aula:
</b>
Como se articula este aula de programación web
</p>
<h2>
Indice:
</h2>
<a class="papel2b" href="presentacion.php">
Tema anterior:
<b>
Linea editorial
</b>
</a>
<a class="papel2b" href="#linea">
Primer día de clase
</a>
<a class="papel2b" href="#objetivos">
Objetivos de este curso
</a>
<a class="papel2b" href="#requisitos">
Medios y requisitos del alumno
</a>
<a class="papel2b" href="#estructura">
Estructura metodológica
</a>
<a class="papel2b" href="#recursos">
Recursos de método
</a>
<a class="papel2b" href="#comentario">
Ir a los comentarios
</a>
<a class="papel2b" href="#caja">
Ir a la caja de comentar
</a>
<a class="papel2b" href="tema001.php">
Proximo tema:
<b>
TEMA I, ¿Dónde estamos?
</b>
</a>
<br>
</div>
<b>
¡¡¡¡Gracias patrocinadores...!!!!
</b>
Sin vosotros este sitio web no hubiera sido ni sería posible.
<div style="width:85%; margin:auto;">
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="https://www.facebook.com/pg/Concello-De-Cartelle-1237256396361829/photos/?ref=page_internal" rel="nofollow" target="_blank" title="Gracias al equipo de gobierno del municipio de Cartelle por vuestro apoyo y ánimo constante a este proyecto.">
<img src="patrocina/cartelle2.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="http://deltapci.com/" rel="nofollow" target="_blank" title="DeltaPC es un referente para Toda la provincia de Orense en formacicón y preparación en tecnologías informáticas y de diseño. Gracias DeltaPC por vuestro apoyo">
<img src="patrocina/deltapc.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="https://sila-ribadavia.es/" rel="nofollow" target="_blank" title="Gracias SILA, repostería tradicional, y gracias comercio local de la provincia, entre todos haremos que Orense ocupe su merecido lugar en el mapa.">
<img src="patrocina/silah.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="https://sila-ribadavia.es/pal.html" rel="nofollow" target="_blank" title="Gracias Pal Santos y a tu marca Bedoya Suite, , y gracias comercio local de la provincia, entre todos haremos que Orense ocupe su merecido lugar en el mapa">
<img src="patrocina/pal.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="http://www.cogami.es/" rel="nofollow" target="_blank" title="Gracias COGAMI (confederación galega de persoas con discapacidade) por vuestro constante apoyo y ayuda en mi trayectoria personal y profesional.">
<img src="patrocina/cogami.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="https://www.facebook.com/cafebar.bellomonte" rel="nofollow" target="_blank" title="Gracias Bar bellomonte (Os Cubanos de Outomuro) por vuestro apoyo y vuestras inmejorables pizzas, y gracias comercio local de la provincia, entre todos haremos que Orense ocupe su merecido lugar en el mapa">
<img src="patrocina/cubanos.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
<div padding:0;="" style="width:90%; margin:.3em auto; border-radius:.5em">
<a href="https://plantarium-noroeste.es/" rel="nofollow" target="_blank" title="Gracias PLANTARIUM NOROESTE, criadores de arboleda ornamental ,y gracias comercio local de la provincia, entre todos haremos que Orense ocupe su merecido lugar en el mapa.">
<img src="patrocina/plantarium.jpg" style="width:100%; border-radius:.6em">
</a>
</div>
</div>
<div style="text-align:center;">
<br>
<small>
Publicidad Google
</small>
</div>
<div style="border:1px solid rgb(255,200,200); border-radius:.25em; width:99%; margin:auto;)">
<!-- codigo para google adsense -->
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<!-- terzasadaptado -->
<ins class="adsbygoogle" data-ad-client="ca-pub-9665723316718059" data-ad-format="link" data-ad-slot="1529157250" style="display:block">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
});
</script>
</div>
<!-- fimn de google -->
<div style="font-size:.85em; text-align:center; clear:both; width:85%; margin:auto;">
<br>
Mi alojamiento:
<a href="https://gestiondecuenta.eu/aff.php?aff=1178&especial=hosting" target="_blank" title="Hosting SSD">
<img alt="Hosting SSD" src="https://serv1.raiolanetworks.es/banners/300x250_Hosting_SSD.jpg" style="width:100%">
</a>
</div>
<div>
<h3>
Enlaces de interés para este tema:
</h3>
<a class="papel2b" href="https://www.mozilla.org/es-ES/firefox/new/" rel="nofollow" target="_blank">
Enlace a descargas de Mozilla FIREFOX
</a>
<a class="papel2b" href="https://www.google.es/chrome/browser/desktop/" rel="nofollow" target="_blank">
Enlace a descargas de Google CHROME
</a>
<a class="papel2b" href="http://www.opera.com/es" rel="nofollow" target="_blank">
Enlace a descargas de OPERA
</a>
<a class="papel2b" href="https://notepad-plus-plus.org/download/v7.3.3.html" rel="nofollow" target="_blank">
Enlace a descargas de NOETPAD++
</a>
<a class="papel2b" href="https://miriadax.net/home" rel="nofollow" target="_blank">
Visita MIRIADA X, te sorprenderá
</a>
</div>
<div style="text-align:center; font-size:1.1em;">
<h1>
TABLÓN DE ANUNCIOS
</h1>
</div>
<div style="width:90%; margin:auto;">
<img src="patrocina/tablon1.jpg" style="width:100%;">
</div>
<div style="width:90%; margin:auto;">
<img src="patrocina/tablon2.jpg" style="width:100%;">
</div>
</div>
<!-- fin clase papel -->
</div>
<!-- fin izquierda -->
<!-- Tira central -->
<div class="centro">
<div class="papel1">
<!--
*********************************************
TEXTO DE LA PRESENTACIÓN
*********************************************
-->
<div style="background-color:rgb(255,239,239); padding:.3em; border-radius:.5em;">
<!-- div color sepia -->
<div id="arriba" style="font-size:.85em; color: maroon;">
Dieciocho de mayo de 2017.
</div>
<div id="linea" style="color:maroon;">
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:45%; padding:.5%; margin:1em; float:right; font-size:.9em;">
<img src="tema000/tema000.jpg" style="width:60%; float:left; padding:.5em; border-radius:1em;">
<p style="text-align:left;">
"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..."
</p>
<p style="text-align:right;">
<b>
Capítulo I del Quijote
</b>
<br>
<small>
Si no sabes el autor, vete de aquí.
</small>
</p>
</div>
<!-- ++++++++++++++++++++++++++++++++++++++++++++ NO OVIDAR CERRAR EL DIV ID LINEA AL TERMINAR EL PRIMER BLOQUE DE TEXTO ++++++++++++ -->
<!-- aqui va el texto de la entrada -->
<h1>
TEMA 0, Organizando el Aula
</h1>
<p>
(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…..
</p>
<p>
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… )
</p>
<p>
- ¡A ver!… ¡¡lo de las chinchetas está muy visto…!!
(muestra la chincheta que acaba de recoger en la silla)
</p>
<p>
(prosigue el murmullo que decae un tanto mientras se propaga por
la clase la sensación de que alguien pretende manifestarse como
profesor…)
</p>
<p>
- ¡¡¡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?…..
</p>
<p>
(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… )
</p>
<p>
- ¡Buenos días, Soy Juan Carlos y soy el profesor de desarrollo
web.
</p>
<p>
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…
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:85%; padding:.5%; margin:1em auto; font-size:.85em;">
<img src="https://terzas.es/temas/tema000/escuela.jpg" style="width:48%; border-radius:1em; margin-left:1em; float:right;">
<h3>
Curiosidad histórica:
</h3>
<p>
Esta es la antigua escuela unitaria de Terzas en Cartelle (Ourense)
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
</div>
<div id="objetivos">
<h1 class="western">
Objetivo de este curso:
</h1>
<p>
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”.
</p>
<p>
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.
</p>
<p>
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.
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.9em;">
<p>
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.
</p>
</div>
<div style="clear:both;">
</div>
<p>
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.
</p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
</div>
<div id="requisitos">
<h1 class="western">
Requisitos de formación y medios que debe tener
el alumno.
</h1>
<p>
Para 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:
</p>
<h3 class="western">
Requisitos materiales:
</h3>
<p>
Lo primero que necesitas es un ordenador. ¿qué ordenador tienes?
</p>
<div style="border-radius:.5em; width:55%; padding:.5%; margin:1em auto; font-size:.9em;">
<img src="https://terzas.es/temas/tema000/foto1.jpg" style="width:100%;">
</div>
<p>
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….
</p>
<p>
A ver, busca algo un poco mas potente.
</p>
<div style="border-radius:.5em; width:55%; padding:.5%; margin:1em auto; font-size:.9em;">
<img src="https://terzas.es/temas/tema000/foto2.jpg" style="width:100%;">
</div>
<p>
¡¡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…
</p>
<p>
En serio:
</p>
<p>
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.
</p>
<p>
Si tenías planeado seguir el curso en tu tablet o tu móvil, te
lo desaconsejo:
</p>
<p>
- 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.
</p>
<p>
- 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.
</p>
<p>
Prueba “mecawin”. Es un clásico desde 1995 para aprender
mecanografía en teclados de ordenador:
</p>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="http://www.lawebdelprogramador.com/nprogramas/enlace.php?id=101&idp=777&texto=windows" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Enlace para descargar MECAWIN
</a>
</div>
<p>
Sigamos viendo mas requisitos materiales:
</p>
<p>
- Vamos a tratar en tres grandes bloques el curso:
</p>
<p>
-
<b>
bloque uno: html y css
</b>
para este bloque necesitarás tan solo de
tu ordenador y de un poco de software:
</p>
<p>
1- dos o tres navegadores para probar los resultados de tus
programas en varios soportes diferentes.
</p>
<p>
Te aconsejo estos:
</p>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="https://www.mozilla.org/es-ES/firefox/new/" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Enlace a descargas de Mozilla FIREFOX
</a>
</div>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="https://www.google.es/chrome/browser/desktop/" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Enlace a descargas de Google CHROME
</a>
</div>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="http://www.opera.com/es" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Enlace a descargas de OPERA
</a>
</div>
<p>
2- Un editor de texto plano. Sirve tu block de notas. Pero mejor
usa un editor como este
</p>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="https://notepad-plus-plus.org/download/v7.3.3.html" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Enlace a descargas de NOETPAD++
</a>
</div>
<p>
Descárgalo e instálalo y juega con él a ver si eres capaz de
darle un aspecto parecido a este que te muestro:
</p>
<div style="border-radius:.5em; width:55%; padding:.5%; margin:1em auto; font-size:.9em;">
<img src="https://terzas.es/temas/tema000/mousepad.jpg" style="width:100%;">
</div>
<p>
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.
</p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
<p>
-
<b>
En el blque dos aprenderemos a programar con PHP, y en el tres
manejaremos herramientas de desarrollo.
</b>
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)
</p>
<p>
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)
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.85em;">
<p>
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.
</p>
<p>
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.
</p>
</div>
<div style="clear:both;">
</div>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
<h3 class="western">
Requisitos de conocimientos:
</h3>
<p>
- No necesitas ser programador ni tener conocimientos previos de
diseño web.
<b>
PERO…
</b>
</p>
<p>
- 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.
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.85em;">
<p>
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.
</p>
</div>
<div style="clear:both;">
</div>
<p>
- 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.
</p>
<p>
-
<b>
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.
</b>
</p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
<p>
Veamos ahora como se estructura el curso:
</p>
</div>
<div id="estructura">
<h1 class="western">
Estructura metodológica:
</h1>
<p>
El curso está dividido en tres bloques:
</p>
<h2 class="western">
Bloque uno: html, css.
</h2>
<p>
Estudiaremos simultáneamente html y css porque ambos funcionan
juntos para dar el aspecto que ves a esta página.
</p>
<p>
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.
</p>
<p>
Así que aquí
<b>
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.
</b>
Esto lo he ensayado ya con alumnos
presenciales y funciona mucho mejor que el estudio separado.
</p>
<h3 class="western">
Primer y segundo tema:
</h3>
<p>
Serán de contenido teórico.
</p>
<p>
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.
</p>
<p>
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é.
</p>
<h3 class="western">
Los otros temas del bloque uno:
</h3>
<p>
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.
</p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
<h2 class="western">
Bloque dos: PHP.
</h2>
<p>
Cuando 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…
</p>
<p>
Es hora de aprender qué es lo que pasa en el servidor y de
aprender a hacer programas para tratar la información.
</p>
<h3 class="western">
Primer tema del bloque dos:
</h3>
<p>
- Abordaremos la instalación del LOCALHOST “Apache” (xampp)
en nuestro ordenador.
</p>
<p>
- 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.
</p>
<p>
- 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)
</p>
<p>
- 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!!)
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.9em;">
<p>
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.
</p>
<p>
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.
</p>
<p>
(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.)
</p>
</div>
<div style="clear:both;">
</div>
<h3 class="western">
Los demás temas del bloque dos:
</h3>
<p>
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.
</p>
<h2 class="western">
Bloque tres: herramientas del desarrollador.
</h2>
<p>
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?
</p>
<p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
</p>
<p>
Ahora veamos un breve apunte sobre los recursos metodológicos con
los que realizaremos el desarrollo del aula.
</p>
</div>
<div id="recursos">
<h2 class="western">
Los recursos metodológicos esenciales:
</h2>
<h3 class="western">
1. lo que no habrá:
</h3>
<p>
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.
</p>
<p style="color:maroon;">
Acaban de saltarle todas las alarmas y están fibrilando mis amigos
marketeros….
</p>
<p>
Tampoco habrá versión del sitio para móvil.
</p>
<p style="color:maroon;">
Varios marketeros, los mejores, acaban de fallecer. Que en paz
descansen.
<!--Escuchemos el toque del silencio in memoriam:
<div style="text-align:center">
<iframe width="280" height="158"
src="https://www.youtube.com/watch?v=253aGgk7NSE"
allowfullscreen></iframe>
</div> -->
</p>
<h3 class="western">
2. ...pero…. ¿por qué….?
</h3>
<p>
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…?
</p>
<p>
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…
</p>
<h3 class="western">
3. ...pero… ¡¡yo quiero videos, multimedia,
florituras, adornos….!!
</h3>
<p>
¡Vale!. Pues aquí los tienes:
</p>
<p>
Se llaman “miriada X” y son increíblemente buenos.
</p>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="https://miriadax.net/home" rel="nofollow" style="font-size:1.25em; padding:1em 2em;" target="_blank">
Visita MIRIADA X, te sorprenderá
</a>
</div>
<p>
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!!
</p>
<p>
Prueba algún tema de este sitio y establece tu propia
comparativa. Solo tú puedes saber lo que te va mejor.
</p>
<h3 class="western">
4. ...Entonces ¿qué?
</h3>
<p>
- Ejercicios, ejercicios, ejercicios.
</p>
<p>
- pantallazos y mas pantallazos.
</p>
<p>
- esquemas, cuadros sinópticos, notas destacadas, enlaces a otros
sitios…
</p>
<p>
- y… el mejor recurso que tiene un profesor desde hace mas de
200 años:
</p>
<p style="font-size:1.25em;">
<b>
La pizarra:
</b>
</p>
<div style="border-radius:.5em; width:55%; padding:.5%; margin:1em auto; font-size:.9em;">
<img src="https://terzas.es/temas/tema000/foto3.jpg" style="width:100%;">
</div>
<h3 class="western">
5. y… ¿Qué más…?
</h3>
<p>
- Cada tema será descargable en versión PDF que podrás leer en
tu pantalla o imprimir.
</p>
<p>
- 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.
</p>
<p>
- 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.
</p>
<p>
Pero paso a paso se hace el camino. Asi que, si quieres, vamos al
primer tema:
</p>
<div style="width:60%; margin:1em auto;">
<a class="papel2b" href="tema001.php" style="font-size:1.25em;">
Proximo tema:
<b>
TEMA I, ¿Dónde estamos?
</b>
</a>
<br>
</div>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.9em;">
<p>
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.
</p>
<p>
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”)
</p>
<p>
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.
</p>
</div>
<div style="clear:both;">
</div>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:75%; padding:.5%; margin:1em; float:right; font-size:.9em;">
<p>
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.
</p>
</div>
<div style="clear:both;">
</div>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
</div>
<!-- Aqui acaba el texto de la entrada -->
<p style="text-align:center;">
<br>
<span style="font-family:CELTG; font-size:1.2em; color:maroon;">
O Juan de Terzas
</span>
<br>
<small>
©Juan Carlos Martínez Álvarez
</small>
</p>
<div style="clear:both;">
</div>
</div>
<!-- Fin del div sepia -->
<!--
*********************************************
FIN DEL TEXTO DE LA PRESENTACION
*********************************************
-->
<div id="comentario">
<h2>
1 comentarios:
</h2>
<p>
<a class="papel2b" href="#caja">
Ir a la caja de comentarios
</a>
</p>
<div style="background-color:rgb(239,239,239); color:black; border-radius:.5em; width:94%; padding:.5%; margin:.5em auto; font-size:.9em;">
C.1: 20/05/24
<br>
<b>
Deborah
</b>
dice:
<br>
<p>
Your Liberty Travel getaway professional can make it occur.
</p>
<p>
Recomienda visitar:
<a href="https://www.protopage.com/sulannk72i
" target="_blanK">
https://www.protopage.com/sulannk72i
</a>
</p>
</div>
<!-- formlario -->
<div id="caja" style="width:90%; margin:auto; background-color:rgb(255,225,225); border:1px solid rgb(255,200,200); border-radius:.85em; padding:1em; font-size:.95em">
<form action="/temas/tema000.php" method="POST" name="alta">
<input name="ruta" type="hidden" value="comentario04337.txt">
<h4>
Caja para comentar:
</h4>
<p style="width:90%; margin:auto;">
Nombre o alias:
<br>
<input name="nombre" placeholder="Nombre real o un alias para dirigime a tí" required="" style="width:100%; padding:.5em;" type="text">
</p>
<p style="width:90%; margin:auto;">
<small>
Si no has comentado antes este hilo y deseas enterarte de los nuevos comentarios escribe tu correo.
</small>
<br>
<input name="correo" placeholder="Y, por favor, tu email" style="width:100%; padding:.5em;" type="email">
</p>
<p style="font-size:1.25em; padding:1em 2em;">
Tu comentario:
<br>
<textarea name="texto" rows="6" style="width:100%; padding:.5em;"></textarea>
</p>
<p style="width:90%; margin:auto;">
<small>
<b>
puedes incluir un enlace
</b>
, si lo deseas. escribe la URL o copiala y pega desde la barra de direcciones de tu navegador
</small>
<br>
<input name="enlace" placeholder="Un enlace para compartir." style="width:100%; padding:.5em;" type="text">
</p>
<p style="text-align:center;">
<input name="suscribe" style="padding:.85em; font-size:1.25em;" type="submit" value="Enviar comentario">
</p>
</form>
<p style="font-size:.90em;">
<b>
NOTAS:
</b>
<br>
- Si incluyes tu correo electrónico recibirás notificaciones de los nuevos comentarios de este hilo exclusivamente.
<br>
- Si solo quieres seguir el hilo pero no comentar, no escribas en la caja de comentarios pero indica tu correo.
<br>
- Si ya has comentado o seguido antes el hilo no hace falta que pongas tu correo de nuevo.
<br>
-
<b>
Reservado el derecho de moderación:
</b>
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.
</p>
<small>
<a href="#arriba">
arriba
</a>
--
<a href="#indice">
índice
</a>
</small>
</div>
<!-- fin formulario -->
</div>
<!-- fin de dcomentarios -->
<p style="text-align:center;">
<br>
<span style="font-family:CELTG; font-size:1.2em; color:maroon;">
O Juan de Terzas
</span>
<br>
<small>
©Juan Carlos Martínez Álvarez
</small>
</p>
</div>
<!-- fin de papell 1 -->
</div>
<!-- fin centro y tira centarl -->
<div style="clear:both;">
</div>
</body>
</html>