martes, 11 de julio de 2017



MANUALES:

Instalación del Panel de control del Xampp en Ubuntu:

¿Qué es el panel de control? Es una herramienta que nos va a permitir arrancar y parar el Xampp, sin necesidad de utilizar la ventana de terminal.

Su instalación:

1) Crear una aplicación llamada “Xampp-Control-Panel”; la cual se anclará en nuestro menú de herramientas, para tenerlo a mano siempre que queramos arrancar y parar los servicios Web de nuestro servidor, sin necesidad de utilizar líneas de comando.

2) Teclea el siguiente comando para instalar los paquetes necesarios para su funcionamiento:

$  sudo  apt-get install python-glade2

3) Abrir el panel de control:
$  sudo  /opt/lampp/share/xampp-control-panel/xampp-control-panel

Botones de arranque de los servicios. Pulsa sobre el boton “Start Xampp: servicios arrancados.

4) crear una pequeña aplicación que vamos a llamar xampp-control-panel, para abrir directamente el programa desde el menú de aplicaciones. Para ello, cierra el panel de control.

5) Abre el terminal y teclea lo siguiente para editar un archivo llamado “xampp-control-panel.desktop” en /usr/share/applications:

$  sudo  gedit /usr/share/applications/xampp-control-panel.desktop

6) Pegar el siguiente código:

[Desktop Entry]
Comment=Start/Stop XAMPP
Name=XAMPP Control Panel
Exec=sudo /opt/lampp/share/xampp-control-panel/xampp-control-panel
Icon[en_CA]=/opt/lampp/xampp.png
Encoding=UTF-8
Terminal=true
Name[en_CA]=XAMPP Control Panel
Comment[en_CA]=Start/Stop XAMPP
Type=Application
Icon=/opt/lampp/xampp.png


7) Guarda y cierra.

Nota: Respecto a las líneas “icons”, hay que descargarse el icono y guardarlo en la ruta que te dice el fichero (opt/lampp/xampp.png).

Icono: Crea el lanzador del programa, tamaño 96*96 (tamaño de la imagen de descarga).

Pasos para el icono:  

1) Descargar la imagen.
2) Guardo la imagen como: xampp.png
3) Con el navegador de ficheros selecciono la carpeta donde quiero que se guarde: /opt/lampp.

Permisos de la carpeta /opt.

1) Dar  guardar como y los descargo en la carpeta Descarga.

2) Abro el terminal (CTL +ALT+T) y lo muevo a /opt/lampp/ y me situó en la carpeta descargas:

$  cd  Downloads
$  sudo  mv xampp.png /opt/lampp/xampp.png

3) Abro el lanzador de Xampp que hemos configurado y lo anclo al menú de inicio (barra lateral izquierda).

Buscar el Xampp-control-panel recién creado:

1) Ir al menú de navegación izquierdo.
2) Icono (primero) el de una ruedita buscamos el programa “Xammp”

Solucionar problema del Icono:

1) Actualizo los packetes dpkg.

2) Abro terminal (CTL+ALT+T) y teclear:
sudo dpkg --configure -a
sudo apt-get install -f
sudo apt-get update

3) Ir al menú de herramientas y buscar el Xampp-control-panel.

4) Se ven errores en la terminal: write error: broken pipe en varias lineas (491, 98, 148, 182).

El error  es en relación al gksudo, funciona cambiando 2 lineas del exec= del programa creado.

5) Abrir la terminal y pegar el siguiente código:

$  sudo  gedit /usr/share/applications/xampp-control-panel.desktop

6) Pegar el siguiente código en el archivo:

[Desktop Entry]
Comment=Start/Stop XAMPP
Name=XAMPP Control Panel
Exec=sudo /opt/lampp/share/xampp-control-panel/xampp-control-panel
Icon[en_CA]=/opt/lampp/xampp.png
Encoding=UTF-8
Terminal=true
Name[en_CA]=XAMPP Control Panel
Comment[en_CA]=Start/Stop XAMPP
Type=Application
Icon=/opt/lampp/xampp.png
FINAL:
Reconoce dos programas de Xampp.

Anclar el programa al menú de navegación: Me sitúo con el ratón sobre el icono del Xampp y con el botón derecho, selecciono “anclar a la barra de herramientas”




MANUALES:

Manual de Xampp para UBUNTU.

Xampp: Servidor web, linux. Servidor web en Linux para pruebas y aprendizaje. Hace parte del entorno popular para el desarrollo de PHP.

¿Qué es Xampp?: Distribución de Apache, completamente gratuita y fácil de instalar, contiene MariaDB (sistema de gestión de base de datos), PHP y perl (lenguajes de programación).

PHP: Lenguaje estándar de las plataformas web, como wordpress, Joomla, Drupal, Prestashop, etc.

Para el funcionamiento de una web se necesita una base de datos la cual guardará todo el contenido de la Web.

Se requiere: Un servidor web, PHP y gestor de base de datos para la instalación de una plataforma web. Se utiliza la herramienta -

Xampp: herramienta multiplataforma que incluye el servidor web Apache, el intérprete de código PHP, Gestor de Bases de Datos SQL y brinda una configuración automática.

El servidor se suele contratar a una empresa de Hosting.


INSTALACIÓN EN LINUX (UBUNTU 16.04 LTS)

1) Descarga de Xampp; versión Linux ( V.5.6.20).

2) Ubicar la carpeta de descarga, archivo ejecutable con extensión .run, se necesitan permisos de ejecución y se realiza con botón derecho del ratón y propiedades.

3) Abrir terminal en la carpeta, autenticarnos como root con el comando “sudo su” y escribir  ./nombre_del_archivo para ejecutarlo.

./xampp-linux-x64-5.6.20-0-installer.run

Un truquito: si escribes ./x y pulsas TAB debería autocompletarse el nombre del archivo.



4) Instalación de Xampp.

5) Next para continuar.

6) Se dejan los componentes a instalar por defecto.

7) Ruta de instalación de Xampp: /opt/lampp



8) Omitir las páginas patrocinadoras de Bitnami, pulsando next.

9) Inicio de instalación.

10) Para arrancar el servidor, marcar la casilla Launch XAPP y pulsamos en Finish.

Arrancar, Detener y Reiniciar el servidor desde una terminal:

Arrancar: Abrir una terminal, tecleamos (con permisos de root) :
/opt/lampp/lampp start



Detener: /opt/lampp/lampp stop



Reiniciar: /opt/lampp/lampp restart




Para verificar si está correcto el servidor, abrir el navegador y teclear la dirección http://localhost


martes, 13 de junio de 2017



VACACIONES DE MITAD DE AÑO

Receso escolar desde el 9 de junio del 2017 hasta el 10 de julio del 2017.

En la semana del 12 de junio al 16 de junio se estarán realizando las correspondientes nivelaciones (II bimestre).

jueves, 8 de junio de 2017


[2017-07-06]

CLASE  17:

El miércoles se realiza el ENGLISH SONG FESTIVAL, por lo tanto no hay clase; jornada especial.

Jueves 08: Se dan a conocer las definitivas por parte del Docente y los puntos extras que se obtuvieron en el periodo.

Nota Definitiva ( Segundo Bimestre ): 100
(1) Extra.

Se entregan los acumulativos y las notas que correspondían para algunos (estudiantes) como parte de la primera habilidad del tercer bimestre.




jueves, 1 de junio de 2017


[2017-31-05]

CLASE  16:

Se dan a conocer las notas de los indicadores y el promedio de cada estudiante, indicando los exentos del acumulativo según el correspondiente corte de notas que haya obtenido.

Materia (nota) = 100.

El acumulativo se basaba en:

1) Color input: 
<input name="color" type="color" />

2) Mostrar Mes: 

<input type="month" name="mes">

3) Rango 20-50:

<input type="range" min="20" max="50">





jueves, 25 de mayo de 2017


[2017-24-05]

CLASE  15:

Se continua la realización del proyecto y se avanza desde la 2da Base hasta la quinta. (inicio de la sexta).

2. Basado en el algoritmo anterior, se crea el pseudocódigo.

DIGITADOR: cod.26 Juan Pedraza

3. Construcción del código HTML, necesario para empezar a crear la aplicación, según el enunciado del item 1.

DIGITADOR: cod.13 Juan Franco

4. Basado en el código HTML anterior, se le aplica un Template tipo Html / Responsive desing.

DIGITADOR: cod.10 Maria Duarte

5. Entregado el paso anterior se realiza dos copias, la primera se validará con Html5.

DIGITADOR: cod.28 Sebastian Ramirez

Se realiza clase extra el [2017-25-05] en la cual se Finaliza el proyecto de grupo y se entrega el resultado de las tres últimas bases:

6. Y la segunda se validará con Javascript.

DIGITADOR: cod.33  William Rodriguez

7. Utilizando el mismo diseño del template se crea un segundo archivo(formulario.html), donde se debe visualizar cajas de texto, cajas de selección de los campos (nombre, e-mail, teléfono fijo, Teléfono celular, observación de la atención), lo anterior es para crear un PQRSF (Peticiones, Quejas, Reclamos, Sugerencias y Felicitaciones).Todo este item (el 7 ), debe ir validado.

DIGITADOR: cod.18 Leonardo Gonzalez

8. Basado en todo lo anterior, se debe programar el ejercicio propuesto por el Docente, utilizando todo lo desarrollado desde el punto 1 hasta el 7. Todo debe ser programado en JavaScript.

DIGITADOR: cod.31 Laura Rodriguez

Tomado de: www.coldivinoamor.com/espaciovirtual

Código base de la etapa 8:

<script>

function validar(){
var name1=document.getElementById("nombre").value
var time2=document.getElementById("tiempo").value
var date3=document.getElementById("calendario").value
var male4=document.getElementById("maletas").value
var destinity5=document.getElementById("dest").value
var transport6=document.getElementById("trans").value
var transpo=transport6.charAt(0)
var delboton=document.getElementById("enviar")

if(name1.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] ingresar su nombre');
return false
}
else if (time2.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] El campo debe tener una hora');
return false
}
else if (date3.length==0) {
// Si no se cumple la condicion…
alert('[ERROR] El campo debe tener una fecha');
return false
}
else if(document.getElementById("enviar")){
alert("Tiquete vendido")

}

if(destinity5.length==13){
var precioinicial=40000
precioinicial=parseFloat(precioinicial)
}
else {
var precioinicial=100000
precioinicial=parseFloat(precioinicial)
}

if(male4.length==7){
var pasaje=(precioinicial*2)/100
pasaje=precioinicial+parseFloat(pasaje)
}
else if(male4.length==5){
var pasaje=(precioinicial*5)/100
pasaje=parseFloat(precioinicial)-parseFloat(pasaje)
}
else{
var pasaje=(precioinicial*25)/100
pasaje=precioinicial-parseFloat(pasaje)
}

if(transpo=="C"){
document.body.style.backgroundColor = "#1495ce";
var preciofinal=(pasaje*10)/100
preciofinal=parseFloat(pasaje)-parseFloat(preciofinal)
}
else if(transpo=="B"){
document.body.style.backgroundColor = "#17c762";
var preciofinal=pasaje*5/100
preciofinal=parseFloat(pasaje)-parseFloat(preciofinal)
}
else{
document.body.style.backgroundColor = "white";
var preciofinal=pasaje
}
alert("El precio inicial era de"+ " "+ precioinicial)
alert("Precio despues de considerar el numero de maletas"+ " " +pasaje)
alert("Valor a pagar" + " " + preciofinal)
}

</script>

martes, 23 de mayo de 2017


MANUALES (Continuación) :

AÑADIENDO ESTILO CON FONT AWESOME

Las webfonts, nos permiten incluir diseño gráfico de forma muy sencilla, fácilmente reutilizables y con una muy baja penalización en el rendimiento web.
Nuevamente voy a volver a utilizar CSS y Font Awesome para incluir algo más vistoso en la validación. Para ello incluyo en el header la página un link a Font Awesome.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
A continuación incluyo el siguiente código HTML después de cada input, con el icono check que me proporciona Font Awesome.
<i class="fa fa-check check-ok"></i>
Incluir las siguientes lineas CSS que me permiten por medio del selector de siblings (hermanos o parientes) mostrar el check cuando el contenido del input sea válido u ocultarlo cuando no.
.check-ok {
  color: lime;
}
 
input:invalid ~ .check-ok {
  display: none;
}
 
input:valid ~ .check-ok {
  display: inline;
}

Muestra además un check al lado del campo en cuanto los datos introducidos sean válidos.
TOMADO DE: