informática2017: mayo 2017

lunes, 29 de mayo de 2017

PATTERN

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


<form>
<div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="correo">Email</label>
<input type="email" name="correo" id="correo" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<button type="submit">Enviar</button>
</div>
</form>

jueves, 25 de mayo de 2017

[Fecha de publicación:23-05-2017]

El link de la página cambia de http://coldivinoamor.com/la web/ a http://coldivinoamor.com/espacio_virtual/

Publicación Normal

Para cualquier eventualidad de tiempo del proyecto, favor tener lista la siguiente información.

Leer los manuales publicados.
Tener el blog actualizado con todas las publicaciones de las clases realizadas.
Tener apuntes al dia.
Tener en cuenta los Tips de la materia.
Evaluación Escrita / Oral / Grupal. Tema del periodo(Html, html5, javascript, css, php, mysql, fpdf, servidores windows/linux{Ubuntu/fedora} ).
Es necesario que cada integrante del grado/grupo este preparado, debido a que la selección del representante del sub-grupo es al azar.

Publicación especial 2017-05-22-19:57 p.m., basado en las preguntas realizadas por las estudiantes de los grados A y B del grado Undécimo, en horas de la tarde.

Leer el manual 46(Ejercicio 15-manejo-con-tres-tablas), este ejercicio maneja una base de datos con tres tablas, dos de ellas (color_favorito y canal_tv_favorito), le ofrecen datos a la tabla usuarios.
Ejercicio funcional. Envio dentro del comprimido el archivo sql.
Este ejercicio maneja:

Guardado en la tabla usuarios.
Guarda en un Select Html, la informacion de la tabla color_favorito.
Guarda en un Select Html, la informacion de la tabla canal_tv_favorito.
Visualiza todo el contenido de la tabla usuarios en una pagina Web.
Visualiza todo el contenido de la tabla usuarios en un archivo Pdf.

TOMADO DE:http://coldivinoamor.com/espacio_virtual/a280a068feb81d89cb2e29ccc569a151/publicaciones_undecimo.php

Se continúa el proyecto, al ver que queda poco de tiempo, se decide que un estudiante termine el proyecto y la nota de los que faltaban por pasar, juega según el trabajo de ese estudiante, pero de una vez pasan a presentar el acumulativo.

Cesar Bautista logra terminar el proyecto:

Acumulativo la próxima semana:

Para tener en cuenta y estar Preparado ->> Temas del Acumulativo(Mayo 30 de 2017) (Publicación especial 2017-05-22-06:00 a.m.):

Php, concepto, reglas, ejercicios.
Css, concepto, reglas, ejercicios.
Javascript, conceptos, ejercicios.
Html5, conceptos, ejercicios
Mysql, conceptos(Insert, Select), ejercicios
Repasar los Manuales: 14, 15, 19, 35 y 36. Nota: Los Manuales indicados anteriormente, fueron publicados el 11 de abril(manuales 14 y 15), 24 de abril(manual 19), 08 de mayo(manual 35 y 36).
Recomiendo leer la publicación (2017-04-03) del módulo Principal.
Tener el Blog ACTUALIZADO 100%, se calificará el día viernes 26 de mayo de 2017, 06:01 p.m.Última Calificación
Nota Final: Acumulativo Escrito, sin apuntes, individual.
TOMADO DE:http://coldivinoamor.com/espacio_virtual/a280a068feb81d89cb2e29ccc569a151/publicaciones_undecimo.php

jueves, 18 de mayo de 2017

CONTINUACIÓN DEL PROYECTO

[Fecha de publicación:16-05-2017]

Se realizó los siguientes puntos y un poco del sexto:

4)    Incorporar template (Responsive Design), al diseño creado en el item 3. = MARLON ESPITIA, LAURA GUERRERO

5)    Validadción de la aplicación usando Javascript o Html5 = YENNY ARDILA Y  MARIA PARADA

6)    Guardar en la base de datos los datos capturados en la aplicación , se debe crear la estructura de la base de datos y tablas usando phpmyadmin = LAURA CARRIZOZA Y TATIANA MONSALVE
 Comodin: Ana Montañez (2017-05-09)

TOMADO DE:http://laweb.coldivinoamor.com/a280a068feb81d89cb2e29ccc569a151/publicaciones_undecimo.php

lunes, 15 de mayo de 2017

INICIO PROYECTO

[Fecha de publicación:09—05—2015]
Inicio del proyecto, se instaló el servidor de Linux, ubuntu, se configuró el router y se creó la app en html.
Mayo 10:
DIA E

domingo, 7 de mayo de 2017

INSTALAR LAMP SERVER EN UBUNTU

sudo apt-get install lamp-server^

It’s important to remember the caret (^) at the end of the command.

What is LAMP Server

LAMP Server is a collection of open source software used to create a web server. The collection consists of:

Linux – the operating system
Apache server – the server
MySQL – the database system
PHP – the programming language

Clearly named after the initials of its components, these four applications are all lengthy subjects in their own right. So I won’t go much further on them, but if you have any questions post a comment and I’ll always try help.

Installing Lamp Server components individually

Installing Linux

Installing Linux unfortunately isn’t as simple as one command. But installing Ubuntu is as simple as installing any other operating system. The latest installation .iso can be downloaded here. Ubuntu isn’t the only version of Linux, a list of major distributions can be found at distrowatch.

Installing Apache Server

Apache Server can be installed in one line:

1

sudo apt-get install apache2

You can test the installation by visiting http://localhost/ in a browser, you should see a massage saying “It works!“.

Installing MySQL Server

Installing MySQL is as simple as another one line in the terminal:

1

apt-get install mysql-server mysql-client

This installs:

MySQL Server – to store/serve your database
MySQL Client – a client to access your MySQL server

Be sure to pay attention during the install. You will be asked to create a password for the MySQL root user. You can then access the server in the terminal by typing/copying:

1

mysql -uroot -ppassword

Obviously replace ‘password‘ with the password you just created (leave the ‘-u‘ and ‘-p‘ before your username and password). You should now be logged in and be displaying ‘mysql>‘ on your command line ready for your SQL queries!

Installing PHP

PHP requires 3 packages to be installed, again its only one line:

1

sudo apt-get install php5 libapache2-mod-php5 php5-mysql

You must restart your Apache server now for the changes to take effect:

1

sudo service apache2 restart

To test this, open gedit and type/copy:

1

2

3

&lt;?php

phpinfo();

?&gt;

TOMADO DE:

http://www.sudo-juice.com/install-lamp-server-ubuntu/

CAMBIAR EL ESTILO CSS DE UNA WEB DINÁMICAMENTE

MANUAL 26

Cambiar estilos CSS dinámicamente con JavaScript

Mediante JavaScript obtenemos la capacidad de crear funciones que nos regresen resultados basados en operaciones y cálculos, podemos obtener los atributos de los elementos, nos permite manejar clases predefinidas para tomar directamente datos y utilizarlos como condicionales, e incluso nos da la posibilidad de obtener información de APIs o Webservices, para que en base a los datos recibidos podamos cambiar el estilo de nuestro sitio, sin necesidad de usar bases de datos o hosting sofisticado.

Supongamos que hemos sido requeridos para desarrollar una página web o blog donde el color del fondo pueda ser elegido por el usuario. Al incorporar a JavaScript al juego del diseño, esta tarea será tan sencilla de codificar que en menos de lo que esperamos será totalmente funcional.

El primer paso es conocer la estructura que utiliza JavaScript paraa manejar el estilo CSS de todos aquellos elementos que cuentan con una id asignada, a los que llamaremos objetos. Un objeto tendrá varios atributos los cuales podemos llamar adhiriendo un punto al nombre del objeto, seguido del nombre del atributo que queremos obtener o modificar (objeto.atributo), por ejemplo si tenemos un elemento “div” cuyo “id” es “header”, al momento de escribir “header.style” estamos llamando al atributo “style” de dicho elemento.

También podemos mandar llamar con el nombre de la etiqueta del elemento, en el caso del ejemplo anterior, si escribimos “div.style” llamaremos a todos los elementos “div” que se encuentran en nuestro código, dentro de los cuales también se encuentra el “div header”.

Para modificar los atributos de estilo CSS existen dos formas básicas, la primera es recurrir al atributo “style” y la segunda modificar el atributo “class”. En lo personal me inclino más por utilizar la segunda opción pues es más fácil de manejar, controlar y estandarizar el estilo de esa manera.

Como nuestro objetivo es modificar el fondo de toda la página, entonces debemos adaptar la sintaxis para que modifique directamente el elemento “body”, para lo que podemos recurrir al elemento “document” de JavaScript.

Tomando en cuenta todos los factores, la estructura quedará conformada como alguna de las siguientes maneras, “document.body.style.backgroundColor” o “document.body.className=’nombre’”.

Ahora debemos determinar de que manera el usuario podrá elegir el color de fondo, puede ser mediante elementos de formulario como un “select box” donde elija una opción, un campo de texto donde inserte el nombre, o podemos recurrir a un elemento más visual y hacerlo mediante un menú que muestre los colores de fondo disponibles.

Si utilizamos el atributo “style” nuestro código debe quedar estructurado de la siguiente manera:

<html>

<head>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

</style>

<script>

function cambiar_fondo_con_style(colorsel){

var color = document.getElementById(colorsel).style.backgroundColor;

document.body.style.backgroundColor= color;

}

</script>

</head>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id = "1" style = "background-color: #999;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "2" style = "background-color: #333;" onclick = "cambiar_fondo_con_style(id)"></div>

<div id = "3" style = "background-color: #666;" onclick = "cambiar_fondo_con_style(id)"></div>

</body>

</html>

Agregamos los estilos necesarios para agregar color al cuerpo y letras de la página, así como para darle una medida estándar a los recuadros del menú donde elegiremos el color.

>>> Puedes ver el ejemplo funcionando aquí <<<

Creamos una función para el cambio dinámico de fondo, a la cual le enviaremos como parámetro el “id” de los recuadros. Dentro de esta función guardamos en una variable de nombre “color” el código que corresponde al color de ese recuadro y finalmente asignamos ese código al fondo del elemento body.

Dicha función será llamada mediante un evento “onclick” agregado en cada elemento “div”, para que al momento de dar click con el puntero del Mouse sobre algún recuadro, automáticamente tome el color de éste como fondo.

Pero si deseamos utilizar class en vez del atributo “style” lo que debemos hacer es estructurar nuestro código de la siguiente manera:

<html>

<head>

<style>

body    {

background-color: #000000;

color: #FFFFFF;

padding: 20px;

font: 18px Arial, Tahoma;

}

div {

width: 50px;

height: 50px;

border: 1px solid #FFFFFF;

}

.fondo1 {

background-color: #999;

}

.fondo2 {

background-color: #333;

}

.fondo3 {

background-color: #666;

}

</style>

<script>

function cambiar_fondo_con_class(id){

document.body.className='fondo'+id;

}

</script>

</head>

<body>

<p>Da click en un recuadro para cambiar el fondo de la página</p>

<div id="1" class ="fondo1" onclick="cambiar_fondo_con_class(id)"></div>

<div id="2" class ="fondo2" onclick="cambiar_fondo_con_class(id)"></div>

<div id="3" class ="fondo3" onclick="cambiar_fondo_con_class(id)"></div>

</body>

</html>

>>> Puedes ver el ejemplo funcionando aquí <<<

De esta manera nos ahorramos utilizar el atributo dentro de cada elemento y la función de JavaScript queda mucho más limpia.

TOMADO DE:http://www.lawebera.es/como-hacer/ejemplos-css/cambiar-estilo-css-web-dinamicamente-i.php