Fase2 Diseño Guion Ovi Ricardo Rodriguez

Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas

Curso: Diseños de Sitios Web Código: 301122
DISEÑO DE SITIOS WEB
Fase 2: Diseño: Crear el Guion y la maquetación para un OVI.
PRESENTADO POR
RICARDO RODRIGUEZ SUAREZ – CÓD. 79697262
GRUPO 301122_18
PRESENTADO A
JOSUE IGNACIO OCHOA
UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD
ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA
INGENIERÍA DE SISTEMAS
CEAD JOSÉ ACEVEDO Y GÓMEZ
MARZO de 2019
OBJETIVOS
Aprender a diseñar un guion para uso de recursos OVI, y realizar maquetación de un

sitio index html.
GION OVI
ACTIVIDAD FASE DE PLANEACION Y ANALISIS
CURSO DISEÑOS DE SITIOS WEB - COD. 301122
FORMATO GUION SITIO WEB DEL OVI
204035 Programación web 1
Diseñado Por: Ricardo Rodríguez
A continuación se presenta el formato de Guion para el desarrollo de la actividad de la

Fase de Planeación y Análisis, revise muy bien las instrucciones para que realice un
correcto diligenciamiento del mismo.
Éxitos!!!
1. Objetivos del OVI (describa mediante el registro de 1 objetivo general y tres

específicos para que se construye este OVI)
Objetivo general:
Implementar las técnicas de configuración de vinculación de bases de datos,

específicamente para Aplicaciones web diseñadas en PHP
Objetivo específico 1:
Aprender a utilizar los conectores a Base de Datos de PHP
Realizar conexiones de Base de Datos en PHP en MY SQL
Probar las conexiones de BD en PHP
2. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

de acuerdo al número de secciones que vaya a crear en el OVI)
Nombre de la sección que se creara en el OVI: BASE DE DATOS
2.1 Objetivo de la sección: Recordar y Repasar el concepto de Base

de Datos
Una base de datos es una colección de información organizada de forma que un

programa de ordenador pueda seleccionar rápidamente los fragmentos de datos que
necesite. Una base de datos es un sistema de archivos electrónico. Para nuestro caso es
importe que nuestros sitios Web diseñados en PHP puedan realizar uso de esas Bases de
Datos para poder almacenar la información, esto a través de los formularios
programados en PHP.
2.2 Recursos de consulta que usara en la sección: (coloque el nombre

del material que usara para crear los contenidos de la sección y el enlace
de descarga de los mismos sean estos Texto, Imágenes, Audios o Vídeos)
Se puede profundizar más en este tema de Base de Datos en:

https://platzi.com/blog/bases-de-datos-que-son-que-tipos-existen/
O Consultar este Video relacionado con la explicación de que es una Base de

Datos
https://www.youtube.com/watch?v=yoeV4Ex8C8U
2.3 Redacte un borrador del contenido de lectura en formato de

texto que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde
a la presentación de la sección o el contenido de lectura de la sección)
Conceptos generales fundamentales de Base de Datos
Base de Datos. Conjuntos de datos interrelacionados entre sí y su fin es servir

a uno o varios usuarios, sin redundancias perjudiciales e innecesarias, es
independiente de la aplicación que la utilice y tiene operaciones específicas.
Sistema de Gestión de Bases de Datos (SGBD). Son software que dirigen

y controlan todas las gestiones que realiza las BD.
Administrador de la BD. Diseñar la organización de la BD, elegir el software

que se va a utilizar, dar mantenimiento a la BD y consultar a los usuarios.
Entidad. Objeto del Mundo Real. Existe información descriptiva sobre él.
Instancia. Es la información contenida en la BD en un momento determinado.
Atributos. Son los que describen la entidad. Se divide en dos grupos:
Identificadores. Identifican de manera única cada instancia.

Descriptores. Identifican las instancias y pueden repetirse.
Clave Primaria. Es la que permite la identificación única de una instancia.
Interrelaciones. Es la que permite relacionar y acoplar dos o más entidades:
Modelo Entidad-Relación.
Es una herramienta para el diseño lógico de BD relacionales es fácil de
interpretar. Consiste en la representación a través de un diagrama de las
entidades y sus Interrelaciones.
3.1 Objetivo de la sección: Pasos en la vinculación de una base de

datos en una página desde PHP.
Para poder realizar la Vinculación de la Una Base de Datos a PHP debemos
seguir los siguientes pasos:
1. Crear la Base de Datos a utilizar.
2. Escribir el código PHP para vincular y/o conectar la DB a PHP. Otra cosa
que vale la pena mencionar es que debes tener un nombre de servidor
(server name) o de host (hostname) correctos del servidor donde
estará alojada la DB.
3. Para nuestro ejemplo vamos a trabajar con Base de Datos MySql, para
ello hay dos métodos para conectarse a una base de datos SQL con
PHP: son MySQLi y PDO.
. Uno de los cambios más importantes es que ambos admiten
“declaraciones preparadas”, que eliminan la posibilidad de ataques de
inyección SQL al realizar cambios en la base de datos. Las funciones
originales ‘mysql_’ están en desuso y no deben utilizarse ya que no son
seguras y ya no se mantienen o desarrollan.
MySQLi significa MySQL Improved (mejorado) y agrega nuevas

características específicamente a la interfaz de MySQL. PDO significa
PHP Data Object (Objeto de datos PHP). La diferencia principal entre
PDO y MySQLi es que PDO es compatible con varios tipos de bases de
datos diferentes (MySQL, MS SQL, Postgre DB) en el mismo script, sin
embargo, solo tienes que escribir funciones relacionadas con los datos
una vez. PDO está ‘orientado a objetos’, la conexión a la base de datos
se crea al crear un objeto variable. Ejemplo de creación de un nuevo
objeto:
$my_Object = new OBJECT();

3.2 Recursos de consulta que usara en la sección: (coloque el nombre

del material que usara para crear los contenidos de la sección y el enlace
de descarga de los mismos sean estos Texto, Imágenes, Audios o Vídeos)
Podemos consultar el siguiente Link para profundizar más en el tema:
https://www.hostinger.co/tutoriales/conectar-php-mysql/
O Consultar este Video relacionado con la explicación detallada de como

realizar una conexión de DB en PHP.
https://www.youtube.com/watch?v=6MJDkSzgmLc
3.3 Redacte un borrador del contenido de lectura en formato de
texto que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde
a la presentación de la sección o el contenido de lectura de la sección)
Se realizara la descripción de los métodos utilizados para la conexión de la

DB en PHP
MySQLi
Aquí está el ejemplo básico de código PHP que se puede usar para establecer
una conexión a una base de datos MySQL usando MySQLi:
El método principal utilizado en este script es mysqli_connect(). Esta es una

función interna de PHP.
Al comienzo de nuestro código, vemos pocas declaraciones de variables y

valores asignados a esas variables. Por lo general, necesitamos cuatro
variables para establecer una conexión adecuada: $servername, $database,
$username y $password. En el código, hemos establecido los datos exactos
de nuestra base de datos como valores para esas variables y más adelante,
en la función mysqli_connect() usamos esas variables para pasar a la
función.
El siguiente paso es la función mysqli_connect(), que intenta establecer una

conexión a una base de datos con los detalles proporcionados y la siguiente
parte del código se ejecuta en función del éxito de la función
mysqli_connect(). Como puedes ver, hemos establecido que si la conexión no
es exitosa, nos mostrará este mensaje:
Aquí se ejecuta una función die(), que básicamente termina nuestro script y
nos da un mensaje que hemos establecido. Por lo tanto, esto mostrará de
manera predeterminada que Falló la conexión (Connection failed): y un
mensaje con el error exacto seguirá para ayudarnos a determinar el
problema.
Si la conexión es exitosa, se ejecutará la siguiente parte del código:
Esto simplemente imprimirá un mensaje de éxito en lugar del mensaje

anterior, ya que tiene una instrucción IF que se activsa en función de una
condición fallida.
La última parte del código es:
Para la opción PDO consultar el siguiente link:

4.1 Objetivo de la sección: Vinculación de DB en PHP con opciones de

consulta, edición,modificación y eliminación de datos
y/o registros.
Para poder realizar la Vinculación de la Una Base de Datos a PHP debemos con
las opciones de consulta, modificación y eliminación de datos, podemos seguir
los siguientes pasos:
1. Realizar una consulta a una tabla
2. Listar datos de una tabla.
3. Insertar, modificar y eliminar datos de una tabla.
4.2 Recursos de consulta que usara en la sección: (coloque el nombre del

material que usara para crear los contenidos de la sección y el enlace de
descarga de los mismos sean estos Texto, Imágenes, Audios o Vídeos)
Para profundizar más en el tema de consulta, modificación y/o eliminación de

registros en PHP consultar el siguiente Link:
http://blog.nnatali.com/2009/02/26/mysql-mostrar-anadir-modificar-o-eliminar-
datos-con-php/
O consulta el siguiente Video de apoyo:

https://www.youtube.com/watch?v=H0G0wNkNoEs
4.3 Redacte un borrador del contenido de lectura en formato de texto

que tendrá la sección: (Sea este la presentación de la sección, el contenido
o ambos; redacte un borrador del texto que publicara como contenido en la
sección coloque un subtítulo para identificar si corresponde a la presentación
de la sección o el contenido de lectura de la sección)
El procedimiento general para realizar una consulta es el siguiente:
1. Conectar con la base de datos (mysql_connect).

2. Escribir la consulta (query).
3. Enviar la consulta a la base de datos (mysql_query).
4. Desconectar de la base de datos (mysql_close).
Listar datos de una tabla.
Variables: $link almacena la conexion a la base de datos, $q almacena

la query, $rs almacena el resultado de ejecutar nuestra query en la
base de datos y $row almacena el recorrido por las filas de nuestra tabla
que cumplen las condiciones indicadas, $row es un array.
Bucle while: Recorre todas las filas de nuestra tabla, mientras se cumpla
la condición especificada en la query.
Echo: muestra / interpreta contenido html dentro de php, para incluir una
variable php dentro de ese html utilizaremos ‘.$variable.’ así podrá
diferenciarla del html.
Para mostrar el contenido de un campo especifico, deberemos
especificarlo en el array $row, por ejemplo si queremos mostrar el
contenido de un campo de nuestra tabla llamado nombre, deberemos
escribir: $row[‘nombre’].
Insertar, modificar y eliminar datos de una tabla
Insertamos los datos texto1 y texto2 en los campos campo1 y campo2.

If: Si el resultado devuelto es false, indica que no se ha ejecutado lo que le
hemos indicado, si es distinto de false significará que se ha ejecutado
correctamente.
Modificamos / actualizamos los datos que contienen campo1 y campo2 por los
nuevos valores texto1 y texto2, siempre y cuando el campo3 contenga los datos
texto3. Esto lo indicamos para que no nos modifique todas las filas de nuestra
tabla.
Eliminamos la fila de nuestra tabla que contenga el valor texto3 del campo
texto3.
Análisis / explicación de las querys.

En los ejemplos anteriores os he puesto las consultas un poco “a lo bruto” sin
explicarlas, así que voy a comentarlas un poquito por si no ha quedado muy
clara la función de cada una.
SELECT * FROM Tabla1 ORDER BY campo1 DESC

El asterisco (*) indica que vamos a seleccionar todos los campos de la tabla
Tabla1 y los vamos a ordenar de manera descendente (Z-A) segun el contenido
del campo1.
En lugar del asterisco podriamos seleccionar campos específicos, la ordenación
es algo opcional, si no lo indicamos se ordenaran de forma ascendente ASC (A-
Z). También podemos limitar a que nos muestre sólo los 2 (o los que queramos)
primeros resultados.
Quedaría asi: SELECT campo1, campo2, campo3, campo4 FROM Tabla1 LIMIT 2
INSERT INTO Tabla1 (campo1, campo2) VALUES (‘texto1′,’texto2’)

Insertamos en los campos campo1 y campo2 de la tabla Tabla1 los valores
texto1 y texto2, debemos poner el valor asignado en el mismo orden que hemos
puesto los campos.
UPDATE Tabla1 SET campo1=’texto1′, campo2=’texto2′ WHERE

campo3=’texto3′
Actualizamos los campos indicados con sus nuevos valores, a cada uno el suyo,
siempre y cuando el valor del campo3 sea texto3, de la tabla Tabla1.
DELETE * FROM Tabla1 WHERE campo3=’texto3

Eliminamos todos los campos de la fila de la Tabla1 en la que coincide texto3

como valor del campo campo3.
Diseño del MOCKUP
Link: http://framebox.org/AidFy
REFERENCIAS
Perdomo Vargas, M. (2016). O.V.I. UNIDAD 1. [Página Web]. Recuperado

de http://hdl.handle.net/10596/9134
GONZÁLEZ, D., & MARCOS, M. (2013). Responsive web design: diseño multidispositivo para mejorar la
experiencia de usuario. Bid, (31), 1-9. Recuperado
de http://bibliotecavirtual.unad.edu.co:2051/login.aspx?direct=true&db=lls&AN=9500
8768&lang=es&site=eds-live
Córcoles Tendero, J. E. (2015). Diseño de interfaces web. Recuperado

de https://bibliotecavirtual.unad.edu.co:2538/lib/unadsp/detail.action?docID=322916
7
Platzi.com, maldeadora ,2019, Bases de datos ¿qué son? ¿qué tipos existen? Lo que necesitas saber como
profesional, recuperado de https://platzi.com/blog/bases-de-datos-que-son-que-tipos-
existen/
Youtube.com , enero 21 de 2018, Base de Datos #1| Conceptos Básicos, recuperado de
https://www.youtube.com/watch?v=yoeV4Ex8C8U
hostinger.co, Marzo de 2019, Cómo conectar PHP con MySQL, recuperado de
Youtube.com, David Reyes, Agosto 9 de2013, Conectar a Base de datos MySql con PHP, recuperado de
https://www.youtube.com/watch?v=6MJDkSzgmLc
Blog.nnatali.com,2019, mysql: mostrar, añadir, modificar o eliminar datos con php, recuperado
de http://blog.nnatali.com/2009/02/26/mysql-mostrar-anadir-modificar-o-eliminar-datos-con-php/
Youtube.com, Munto TI, Nov.10 de 2014, recuperado de
https://www.youtube.com/watch?v=H0G0wNkNoEs
http://framebox.org/AidFy, Mar-2019, Mockup, Ricardo Rodríguez

Fase2 Diseño Guion Ovi Ricardo Rodriguez

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Fase2 Diseño Guion Ovi Ricardo Rodriguez

Încărcat de

Drepturi de autor:

Formate disponibile

Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI

Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas

DISEÑO DE SITIOS WEB

Fase 2: Diseño: Crear el Guion y la maquetación para un OVI.

RICARDO RODRIGUEZ SUAREZ – CÓD. 79697262

JOSUE IGNACIO OCHOA

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA UNAD

ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA

CEAD JOSÉ ACEVEDO Y GÓMEZ

Aprender a diseñar un guion para uso de recursos OVI, y realizar maquetación de un

ACTIVIDAD FASE DE PLANEACION Y ANALISIS

CURSO DISEÑOS DE SITIOS WEB - COD. 301122

FORMATO GUION SITIO WEB DEL OVI

204035 Programación web 1

Diseñado Por: Ricardo Rodríguez

A continuación se presenta el formato de Guion para el desarrollo de la actividad de la

1. Objetivos del OVI (describa mediante el registro de 1 objetivo general y tres

Implementar las técnicas de configuración de vinculación de bases de datos,

Aprender a utilizar los conectores a Base de Datos de PHP

Realizar conexiones de Base de Datos en PHP en MY SQL

2. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

Nombre de la sección que se creara en el OVI: BASE DE DATOS

2.1 Objetivo de la sección: Recordar y Repasar el concepto de Base

Una base de datos es una colección de información organizada de forma que un

2.2 Recursos de consulta que usara en la sección: (coloque el nombre

Se puede profundizar más en este tema de Base de Datos en:

O Consultar este Video relacionado con la explicación de que es una Base de

2.3 Redacte un borrador del contenido de lectura en formato de

Conceptos generales fundamentales de Base de Datos

Base de Datos. Conjuntos de datos interrelacionados entre sí y su fin es servir

Sistema de Gestión de Bases de Datos (SGBD). Son software que dirigen

Administrador de la BD. Diseñar la organización de la BD, elegir el software

Instancia. Es la información contenida en la BD en un momento determinado.

Atributos. Son los que describen la entidad. Se divide en dos grupos:

Identificadores. Identifican de manera única cada instancia.

Descriptores. Identifican las instancias y pueden repetirse.

Clave Primaria. Es la que permite la identificación única de una instancia.

Interrelaciones. Es la que permite relacionar y acoplar dos o más entidades:

Nombre de la sección que se creara en el OVI: BASE DE DATOS

3.1 Objetivo de la sección: Pasos en la vinculación de una base de

1. Crear la Base de Datos a utilizar.

MySQLi significa MySQL Improved (mejorado) y agrega nuevas

$my_Object = new OBJECT();

3.2 Recursos de consulta que usara en la sección: (coloque el nombre

Podemos consultar el siguiente Link para profundizar más en el tema:

O Consultar este Video relacionado con la explicación detallada de como

Se realizara la descripción de los métodos utilizados para la conexión de la

El método principal utilizado en este script es mysqli_connect(). Esta es una

Al comienzo de nuestro código, vemos pocas declaraciones de variables y

El siguiente paso es la función mysqli_connect(), que intenta establecer una

Si la conexión es exitosa, se ejecutará la siguiente parte del código:

Esto simplemente imprimirá un mensaje de éxito en lugar del mensaje

La última parte del código es:

Para la opción PDO consultar el siguiente link:

Nombre de la sección que se creara en el OVI: BASE DE DATOS

4.1 Objetivo de la sección: Vinculación de DB en PHP con opciones de

1. Realizar una consulta a una tabla

2. Listar datos de una tabla.

3. Insertar, modificar y eliminar datos de una tabla.

4.2 Recursos de consulta que usara en la sección: (coloque el nombre del

Para profundizar más en el tema de consulta, modificación y/o eliminación de

O consulta el siguiente Video de apoyo:

4.3 Redacte un borrador del contenido de lectura en formato de texto

El procedimiento general para realizar una consulta es el siguiente: