1

Aplicación Web

Didactas y Bl0gs.net

Universidad de Sonora

Rosario Arellanes Villegas

Hermosillo,Sonora 13 de Abril del 2012

2

Índice 1. Introducción 3

2. Descripción del área 5

3. Justificación del proyecto 7

4. Objetivos del proyecto 9

5. Problemas planteados para resolverlos 11

6. Alcances y limitaciones en la solución de los problemas 14

7. Fundamentos teóricos de las herramientas y conocimientos aplicados 16

8. Procedimientos empleados y actividades desarrolladas 20

9. Resultados obtenidos 30

10. Conclusiones y recomendaciones 34

11. Retroalimentación 35

12. Referencias bibliográficas y virtuales 37

3

1. Introducción

En la actualidad, las tecnologías de la información son unas de las herramientas

más importantes, ya que en los últimos años su desarrollo y el conocimiento mas

detallado de las mismas, han facilitado la realización de las actividades diarias del

ser humano en todos los aspectos.

Es una rama la cual es casi interminable, ya que siempre esta en constante

crecimiento y no se sabe su alcance en un futuro.

Los Sistemas de información (SI) en conjunto con las Tecnologías de información

(TI) se han convertido en un ente imprescindible para cualquier empresa que

desea alcanzar un alto grado de competitividad en el mercado. La fusión SI/TI

posee un alto grado de complejidad al momento de elegir cual TI es la misma

adecuada para el funcionamiento optimo de un SI y viceversa, es por ello que los

SI y las TI están íntimamente ligadas es por ello, el funcionamiento de una

dependerá de la aplicación correcta del otro [1] [2].

Es importante señalar que SI y TI también forman parte importante en el ámbito

del desarrollo y aprendizaje de las personas, eh por ello que los que se plasma en

el siguiente documento va planteado al desarrollo de las TI con fin educativo con

las plataformas educativas, así como el fomento de información por medio de

blogs.

Entonces podemos entender como plataforma educativa un sitio en la Web, que

permite a un profesor contar con un espacio virtual en Internet donde sea capaz

de colocar todos los materiales de su curso, enlazar otros, incluir foros, wikis,

recibir tareas de sus alumnos, desarrollar, promover debates, chats, obtener

estadísticas de evaluación y uso, todo esto a partir de un diseño previo que

permite establecer actividades de aprendizaje y que ayude a sus estudiantes a

lograr objetivos planteados.[4]

4

Un blog es un sitio web que recopila cronológicamente textos o articulo de uno o

varios autores, apareciendo primero el mas reciente.

Habitualmente, en cada articulo, los lectores pueden escribir sus comentarios y el

autor darles respuestas de forma que es posible establecer un dialogo. El uso o

temática de cada blog es particular, los hay de tipo personal, periodístico,

empresarial, corporativo, tecnológico, educativo, etc. [N]

En el presente documento se vera plasmado la labor desarrolla por su servidor en

las practicas profesionales realizadas en lo que es Didactas y Bl0gs.net, en donde

se trabajo con diferentes herramientas, como son base de datos y algunos

lenguajes de desarrollo web.

5

2. Descripción del área Didactas y Bl0gs.net

El lugar en el cual se me permitió el poner en prácticas los conocimientos

adquiridos durante mi estancia en la universidad, fue en la empresa de Didactas

que actualmente es una organización en pleno crecimiento y desarrollo, por tal

motivo, solo cuenta con área de gerencia y desarrollo de sistemas.

La ubicación del lugar es:

Calle Américas #14 esq. Privada Cero, colonia La Huerta, C.P. 83208, en la

ciudad de Hermosillo, Sonora México, lugar donde se desempeñaron las

actividades correspondientes.

Como se menciono en dicho lugar se cuenta con la participación de 2 personas

que cumplen con diferentes funciones y actividades para el pleno funcionamiento

de la empresa.

José Joaquín Palacios Mendoza Molina (Gerente General)

Encargado de cuestiones administrativas

Toma de decisiones

Verificar y controlar los procesos dentro de la organización

6

Relaciones publicas

Realizar evaluaciones periódicas acerca del cumplimiento de las

funciones de los diferentes departamentos.

Crear y mantener buenas relaciones con los clientes y proveedores

para mantener el buen funcionamiento de la empresa.

Rosario Arellanes Villegas

Desarrollo y diseño de bases de datos

Análisis y diseño de sistemas

Elaboración de sistemas

Implementación de sistemas

Documentación de trabajo

Mantenimiento de programa

Soporte a usuario

Actualmente lo que se realiza en las oficinas de Didactas el desarrollo de software

educativo así como las mejoras al mismo, también se le brinda soporte a clientes

con los que hoy en día se cuentan.

Didactas es una organización que actualmente se encuentra solo en el ámbito

local, sin embargo, el objetivo a mediano plazo de dicha empresa es estar

presente en varias ciudades de la Republica Mexicana y como objetivo a largo

plazo es estar cubriendo todo el país.

7

3. Justificación del proyecto

Con la introducción de practicantes en esta área de la empresa, que es el

desarrollo, se permite que los prestadores de la estancia puedan desarrollarse en

un nivel de fuerza laboral, esto permitiendo desarrollar habilidades durante el

proceso de practica y así poner en funcionamiento los conocimientos adquiridos

en el transcurso de sus estudios, esto viéndolo del punto de vista del practicante.

Por otra parte, el departamento adquiere fuerza de trabajo lo cual es de utilidad en

el desarrollo de actividades cotidianas, ya que en cierto punto facilita la carga de

trabajo en la organización.

En la ingeniería de software se denomina aplicación web a aquellas aplicaciones

que los usuarios pueden utilizar accediendo a un servidor web a través de Internet

o de una intranet mediante un navegador. En otras palabras, es una aplicación

software que se codifica en un lenguaje soportado por los navegadores web en la

que se confía la ejecución a navegador. [3]

Las aplicaciones web son populares debido a lo práctico del navegador como

cliente ligero, a la independencia del sistema operativo, así como la facilidad para

actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de

usuarios potenciales. [4]

Es importante mencionar que una página web puede contener elementos que

permiten una comunicación activa entre el usuario y la información. Esto permite

que el usuario acceda a los datos de modo interactivo, gracias a que la página

responderá a cada una de sus acciones, como por ejemplo rellenar y enviar

formularios, participar en juegos diversos y acceder a gestores de base de datos

de todo tipo. [3]

8

Las razones de él porque utilizar una aplicación web fueron las siguientes de

realización de investigación:

Velocidad

Utilidad instantánea

El software es un medio

Aplicación programable

Aplicación limpia

Las técnicas de enseñanza tecnológica deben ser y son adoptadas por muchos

teóricos que acertadamente señalan como las escuelas virtuales son de gran valor

para asegurar la cultura en lugares en los cuales de otra manera podría ser casi

inaccesible. En el estado mexicano, durante tiempos de la reforma educativa, fue

precisamente la instauración de la tecnología educativa lo que le permitió a la

emergente federación el garantizar en cierta medida la educación de los

connacionales. En cual quiera de sus variaciones, las tecnologías educativas han

sido una herramienta valiosa para la impartición de enseñanza. [A]

9

4. Objetivos del proyecto

Como objetivo general del proyecto se puede establecer que se busca mantener

un correcto funcionamiento de la red de comunicación entre alumnos, maestros,

padre y administrativos donde actualmente se encuentra en funcionamiento dicho

sistema.

Dentro de los objetivos específicos se puede contar con mantener satisfecho a los

usuarios de la red institucional, como los son alumnos, profesor, directivos, así

como la sociedad en general que hace uso de la plataforma.

Dentro de didactas uno de los objetivos es brindar herramientas de comunicación

e información a cualquier persona involucrada en el proceso educativo.

Generalmente los cursos o comunidades virtuales reúnen un gran número de

personas que buscan un objetivo común, que en la mayoría de los casos es el

aprendizaje y obtención de conocimientos.

También se busca facilitar a los educadores las herramientas para gestionar y

promover el aprendizaje de los estudiantes de una manera fácil y dinámica, lo cual

provoca un mayor interés por parte de todos los medios que interactúan con

didactas.

La finalidad de una plataforma educativa dependerá de las necesidades que

tengan los usuarios, previamente señalados por la institución que la requiera. Si

bien es cierto, el objetivo universal de Didactas es facilitar el proceso de

enseñanza, aprendizaje en los estudiantes, hay casos en los que se restringe su

utilidad al hecho de solo facilitar contenidos y materiales de aprendizaje, en este

caso se les identifica como gestores o plataformas para difundir recursos de

aprendizaje.

10

En otro caso se busca brindar las facilidades para el desarrollo del trabajo

colaborativo entre los estudiantes.

En todos los casos existe el peligro de que se altere el objetivo de origen de la

plataforma, el usuario que no encuentra las características exigidas: facilidad,

rapidez y eficiencia, puede que migre a otras plataformas que si las ofrezca, es por

esta razón que Didactas debe contemplar cuidadosamente la demanda de cada

uno de sus usuarios.

11

5. Problemas planteados para resolverlos

Primeramente para poder encontrar los problemas o dificultades, que se tiene, y

poder realizar un sistema de información capaz de poder solucionar las

problemáticas o necesidades que se tienen en estas área en cuestión de

educación, se llevo a cabo todos los procedimientos que se siguen para realizar

un sistema de información.

Se hicieron los pasos pertinentes que conlleva consigo el ciclo de desarrollo de

sistemas de información, los sistemas de información realizan un ciclo de vida que

se cumple en varias fases:

Fase 1- Requerimientos: Esta fase fundamental para que la estrategia

informática encaje dentro de las metas de la empresa, ya que en ella se

cumplen las funciones del modelaje del negocio y planificación de sistemas;

esto con el fin de proyectar las estrategias del negocio y determinar de esta

forma sus requerimientos de información [5].

Fase 2- Análisis / Diseño: El objetivo de esta fase es desarrollar el diseño

arquitectónico de los sistemas, utilizando los requerimientos obtenidos en la

primera fase. En el diseño arquitectónico se engloban dos componentes:

los datos y los procesos, los cuales serán analizados y diseñados desde

una perspectiva conceptual a una física, dentro de las cuatros actividades

que se encuentran en esta fase [5].

Fase 3- Codificación: Dentro de esta fase se hace todo lo referente a la

programación del sistema de información que se desea implementar.

Fase 4- Pruebas: Esta fase, da inicio luego de que las diferentes unidades

de diseño han sido desarrolladas y probadas por separado. Durante su

desarrollo, el sistema se emplea de forma experimental para asegurar que

12

el software no falle, es decir que funcione de acuerdo a sus

especificaciones y a la manera que los usuarios esperan que lo haga, y de

esta forma poder detectar cualquier anomalía, antes de que el sistema sea

puesto en marcha y se dependa de él. Para evaluar el desenvolvimiento

del sistema, en esta fase se llevan a cabo varios niveles de prueba [5]:

Funcional: Prueba desde el punto de vista de los requerimientos

funcionales.

De Sistema: Prueba desde el punto de vista de los niveles de calidad del

sistema y de desempeño

De integración: Prueba de interfaces

De Aceptación Técnica: Prueba de manejo de condiciones extremas.

Fase 5- Producción / Mantenimiento: En la etapa de producción se asegura

que el sistema funcione correctamente en la mayoría de los casos, y con

intervención mínima de los administradores del sistema. Para esto se

realizan nuevas pruebas, se revalúan los resultados y se hacen

refinamientos del sistema, los cambios necesarios deberán ser introducidos

sin afectar a los usuarios, y deberá conseguirse la máxima confianza de los

usuarios. El resultado de esta etapa un sistema listo para su operación [5].

Basándonos en los puntos anteriores entre los problemas mas frecuentes con los

que nos encontramos dentro del colegio son:

A la hora de recibir tares los profesores todo es por medio de papel lo cual

es algo tedioso en ocasiones, así mismo se podrían producir errores a la

hora de calificar trabajos.

La escuela no cuenta con pagos en línea, lo cual provoca que los mismos

se lleven de una manera más compleja y de forma presencial.

Los medios de difusión de información son de manera escrita u oral, lo que

provoca que no todos implicados se enteren.

13

Falta de una fuente donde alumnos, maestros y padre pudieran en estar en

contacto constante.

Integración de herramientas para la toma de decisiones capaces y

eficientes.

No se tiene un control de las actividades de los alumnos en el salón de

clases.

Se tenia la necesidad de tener toda la información de los alumnos lo mas

detallada posible, esto quiere decir la posibilidad de explotar o manipular a

su totalidad los recursos de datos e información de los alumnos para así

poder detectar patrones, escenarios futuros, o siempre mente llevar a cabo

un análisis acerca de los alumnos.

Otros problemática con la que se cuenta con el modulo ya aplicado que es

sistema de vialidad es que en algunas ocasiones se reportaron quejas

principalmente de profesores, en las cual su equipo no se conecta a

internet, así como problemas de conexión en los equipos de computo de los

laboratorios donde los alumnos realizan sus actividades.

14

6. Alcances y limitaciones en la solución de los

problemas

Dentro de los alcances que se obtienen tenemos:

Como sabemos Internet permite obtener acceso a Didactas a cualquier hora del

día y el día que se quiera, sin necesidad de moverse de casa en ocasiones. Lo

que permite que el acceso a nuestra información sea de forma simple y dinámica.

Al tener acceso a internet se pueden facilitar los trámites y actividades de los

diferentes usuarios, por lo que de esta forma los padres de familia podrán hacer

sus pagos desde casa, esto con el fin de hacer su trámite de una forma más

sencilla y dinámica.

Facilitar la estancia de los alumnos y proveerles los medios para darle una mejor

preparación y lograr así el objetivo de Didactas la cual es formar alumnos con alto

nivel de conocimientos.

Que los maestros tengan la oportunidad de calificar, informar y revisar las

actividades de sus alumnos.

Dentro de las limitaciones que tenemos son:

La falta de experiencia por parte del practicante en muchos de los casos, lo cual

se ve reflejado en ocasiones en errores de ejecución de las actividades.

De igual manera nos podemos encontrar con la poca cooperación por parte del

personal administrativo lo cual puede ser una limitante para tener acceso a toda la

información requerida en determinado momento.

15

La resistencia al cambio por parte del personal en las instituciones, en este caso

instituciones educativas lo cual puede ser reflejado en el mas uso de la plataforma.

El equipo con el que se cuente en la institución puede estar obsoleto y a la hora

de realizar una propuesta se tenga que considerar la actualización de los sistemas

de cómputo generando a la institución un gasto mayor.

16

7. Fundamentos teóricos de las herramientas aplicadas

A continuación se vera brevemente algunas herramientas aplicadas durante la

realización de proyecto Didactas y Blogs.Net

HTML + CSS (Cascada Sheet Styles)

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de

Hipertexto), es el lenguaje de marcado predominante para la elaboración de

páginas web. Es usado para describir la estructura y el contenido en forma de

texto, así como para complementar el texto con objetos tales como imágenes.

HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>).

HTML también puede describir, hasta un cierto punto, la apariencia de un

documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar

el comportamiento de navegadores web y otros procesadores de HTML. [7]

El nombre hojas de estilo en cascada viene del ingles Cascading Style Sheets, del

que se toma sus siglas. CSS es un lenguaje usado para definir la presentación de

un documento estructurado escrito en HTML o XML (y por extensión XHTML)). El

W3C (World Wide Web Consortium) es el encargado de formular la especificación

de las hojas de estilo que servirán de estándar para los agentes de usuario o

navegadores. [16]

Siendo un sistema orientado a aplicaciones web y todos sus beneficios, estos

lenguajes son indispensables para la creación y elaboración del diseño de las

diferentes partes del sistema. Primero se definieron los estilos, dimensiones y

colores para después crear las hojas de estilo predeterminadas.

JavaScript

JavaScript es un lenguaje de programación interpretado, dialecto del estándar

ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo

y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side),

17

implementado como parte de un navegador web permitiendo mejoras en la interfaz

de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del

lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones

externas a la web. [8]

Siguiendo con las tecnologías orientadas a web tenemos el uso de JavaScript

para el manejo dinámico de los elementos mostrados en las diferentes secciones

del sistema. También se manejó la interacción entre el CSS y JavaScript para

hacer diseños dinámicos e interactivos para el usuario. La parte de DOM se utilizó

en todos los scripts generados con el fin de lograr un ambiente más dinámico para

la interacción entre el usuario con el sistema.

AJAX

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y

XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA

(Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir,

en el navegador de los usuarios mientras se mantiene la comunicación asíncrona

con el servidor en segundo plano. De esta forma es posible realizar cambios sobre

las páginas sin necesidad de recargarlas, lo que significa aumentar la

interactividad, velocidad y usabilidad en las aplicaciones. [9]

La creación de objetos tipo Ajax fue manejado junto con JavaScript con el objeto

de lograr mejorar visualmente las acciones que toman mucho tiempo en procesar

(rutinas, carga de datos) por el servidor. Además de ayudar con el contenido

general de la página.

MySQL y TOOLS para MySQL

MySQL es un sistema de gestión de bases de datos relacional, multihilo y

multiusuario con más de seis millones de instalaciones. MySQL desde enero de

2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle Corporation

desde abril de 2009 desarrolla MySQL como software libre en un esquema de

licenciamiento dual. [6]

18

Herramienta principal de base de datos. Software gestor de base de datos

altamente eficiente. Todos los esquemas fueron creados con herramientas del

mismo software incluyendo diagramas relacionales como la base de datos en sí.

Entre las diferentes herramientas utilizadas están: MySQL Query Browser, MySQL

WorkBench y MySQL Administrador. Toda consulta, procedimiento, vistas y

rutinas fueron creados con este software.

NetBeans 6.9.1

NetBeans es un entorno de desarrollo, hecho principalmente para el lenguaje de

programación Java. Existe además un número importante de módulos para

extender el NetBeans IDE. NetBeans IDE es un producto libre y gratuito sin

restricciones de uso. NetBeans es un proyecto de código abierto de gran éxito con

una gran base de usuarios, una comunidad en constante crecimiento, y con cerca

de 100 socios en todo el mundo. Sun MicroSystems fundó el proyecto de código

abierto NetBeans en junio de 2000 y continúa siendo el patrocinador principal de

los proyectos [11].

Nuestro ambiente para desarrollo en el que se escribió todo el código

independientemente del lenguaje en el cual se programara. Básicamente aquí fue

donde se programó todas y cada una de las secciones del sistema, clases, scripts,

hojas de estilo etc.

Adobe Photoshop CS4

Adobe Photoshop es el nombre o marca comercial oficial que recibe uno de los

programas más populares de la casa Adobe, junto con sus programas hermanos

Adobe Illustrator y Adobe Flash, y que se trata esencialmente de una aplicación

informática en forma de taller de pintura y fotografía que trabaja sobre un "lienzo" y

que está destinado para la edición, retoque fotográfico y pintura a base de

imágenes de mapa de bits (o gráficos rasterizados). Su nombre en español

significa "taller de Fotos". Su capacidad de retoque y modificación de fotografías le

ha dado el rubro de ser el programa de edición de imágenes más famoso del

mundo. [13]

19

Se optó por utilizar esta herramienta de adobe, para tratar las imágenes que se

utilizarían en la aplicación web, también para crear todo lo que sería el diseño de

la misma.

20

8. Procedimientos empleados y actividades

desarrolladas

Procedimientos

Como se ah mencionado a lo largo de este capitulo los procedimientos en cada

una de las diferentes direcciones del sistema de blogs son muy parecidos.

Entonces como se explico con anterioridad se aplicó ente los diferentes lenguajes

JavaScript, el cual es un lenguaje del lado del cliente, es casi una obligación en

cualquier web que se vea, sobre todo gracias a los frameworks, que permiten

definir tareas, estilos, efectos de animación, barras de menú de forma fácil y ligera.

Lo que se busco es que el visitante tenga todas las herramientas posibles para

que localice lo que busca dentro del sitio, y así engancharlo con el contenido,

promocionando la información, es por ello que fui importante la inclusión de un

buscador, herramientas de retroalimentación y comunicación, por medio de

formularios para comentarios, sugerencias. Hoy es fundamental ofrecer vías de

seguimientos de la información que nos interesa, es por ello que se implemento él

envió de boletines vía correo electrónico y seguimiento a través de las redes

sociales.

Pero nada de lo anteriormente mencionado pude funcionar sin antes tener claro

que se quiere hacer y cual es el funcionamiento que se esta buscando.

Es por ellos que es importante trazar un esquema con todo aquellos que se

ocurra para la aplicación, en este caso se plantearon bosquejos realizados en

papel, donde así la forma y aspecto que se deseaba para la pagina.

El primer paso con el cual se inicio las actividades fue con el estudio e

investigación de los requerimientos necesarios para la creación de un sistema de

blogs, así como la creación de nuestra plataforma educativa. Después de analizar

21

los requerimientos se paso a la creación de la base de datos enfocada

principalmente al modulo de Bl0gs.net que es el que esta casi concluido hasta el

momento.

No esta de más mencionar que se compro un dominio con el fin de poder que

nuestra página este accesible para todo el mundo, se paga una licencia mensual

por la prestación del servicio, este es prestado por ipower.

Estructura de la Base de Datos

La base de datos implementada para Bl0gs.net cuenta actualmente con 14 tablas

en las cuales se aloja información referente a cada uno de los usuarios, así como,

datos de cada uno de los blogs creados por los mismos. A continuación se explica

de una manera breve las tablas con las que se cuenta.

Blogs: En esta tabla se guarda todo lo referente a los distintos blogs

creados por los usuarios, donde se ve el titulo del blog, url, tags entre otros

aspectos relacionados con el blog creado.

Comentarios: Guarda cada uno de los comentarios que se hace en un blog

por parte del dueño del mismo o por partes ajenas a este.

Kaizen: Es implementada para la recolección de sugerencias por parte de

los usuarios, las cuales son vitales para brindar un servicio de mayor

calidad.

Palabras1_en_español: Como se sabe, en muchas ocasiones las personas

suelen hacer comentarios ofensivos, por lo que se creo esta tabla con la

finalidad de que la palabras ofensivas no pueden ser publicadas.

Palabras2_en_ingles: Se creo con la misma finalidad de la tabla anterior

pero esta bloquea las palabras anti sonantes escritas en el idioma ingles.

Post: Almacena los post acerca de un blog.

Respuesta_comentarios: Guarda información de los usuarios que comentan

un blog determinado.

22

Subscripciones: Almacena usuarios que desean subscribirse o seguir algún

blog en particular, con la finalidad de recibir actualizaciones entro otros

aspectos.

Tbl_opciones: Sirve para guardar la posición del menú, ya que cada usuario

tiene la posibilidad de dar una posición a sus botones de inicio.

Temp: Almacena de manera temporal texto

Users_Facebook: En ocasiones hay personas no registradas que les puede

interesar una publicación, por lo que pueden ingresar desde su página de

Facebook y los datos se registraran automáticamente en esta tabla.

Users_google: Tiene la misma finalidad de la tabla anterior pero con la

diferencia de que registra a los usuarios por medio de google.

Users_twiter: Guarda información de los usuarios que ingresaron a través

de su cuenta de twitter.

Usuarios: Podemos encontrar todos los datos correspondientes al registro

de una persona.

Una vez creada la base de datos se procedió a la creación de nuestro sitio web,

en donde se cuenta con diferentes módulos:

Index.php: Es la pagina por donde el usuario podrá ingresar a la pagina

principal de home.php, se creo una nube de etiquetas las cuales favorece y

ayuda a los usuarios encontrar información sobre sus temas de interés, se

muestra los logotipos de las diferente redes sociales (Facebook, twitter,

google) para que se pueda acceder a la pagina como usuario de una de

estas redes mencionadas

Home.php: En este modulo el usuario tiene la capacidad de administrar sus

blog de una manera fácil y dinámica. A partir de un clic puede seleccionar

entre las diferentes opciones de edición con las que cuenta que van desde

la creación de un nuevo blog, hasta la eliminación de otro de ellos.

23

Editar_perfil.php: En esta pantalla se encuentra todo lo relacionado al

usuario, desde sus datos personales, hasta los datos de su organización en

caso que cuente o dirija una. También tendrá la capacidad de elegir que

datos quiere compartir con el público en general y que datos son privados.

Crear_blog.php: Juega un rol importantísimo para lo que es Bl0gs.net,

puesto que será su forma de difusión. Se tiene la capacidad de crear un

blog a través de llenar un formulario, donde los requerimientos en todos los

casos son necesarios, por lo que no se creara un blog si no se tiene el

formulario completamente lleno.

Ver_Blog: Permite al usuario ver un blog en particular, donde podrá ver

cada publicación con la que cuenta, así como los comentarios, likes, etc.

Editar_blog: El usuario tendrá la posibilidad de manipular sus publicaciones

y editarlas cuando el crea conveniente hacerlo, esto va desde cambiar el

nombre del blog, hasta el cambio del contenido del mismo.

Eliminar_blog: Mediante este link el usuario tendrá la posibilidad de eliminar

un blog que crea que ya no es necesario mantenerlo dentro del servidor.

Estructura de Home de Bl0gs.net

Como parte del sitio se decidió dividir la página de home en estructura, la cual

encontramos diferentes estilos que se encuentran definidos en nuestro archivo

style.css a lo que mandamos llamar a través de la etiqueta de link rel: y dichos

estilos fueron nombrados como:

contGeneral

mainConten

header

botones

contenido

24

En el contenido general encontramos en si todo lo que contiene el sitio web.

En mainConten podemos encontrar el diseño con el que se contara mediante

CSS. Este contiene dentro de su estilo lo que son header, botones y contenido.

En header que se puede describir como la parte superior de mainConten, se creo

con la idea de que el usuario pueda ver los diferentes logotipos de las

certificaciones con las que cuenta el blog, estos para proporcionar seguridad al

usuario a la hora de usar el servicio. También se observa el logotipo del Blogs,

Inicio y Cerrar Sesión.

Botones es llamada el área derecha de la hoja de estilo, donde se aprecian dos

botones con las funcionalidades de la creación de nuevos blogs, esto en el caso

del botón 1, y editar perfil en el caso del botón 2. Al hacer clic en cada uno de los

diferentes botones te re direcciona a las paginas de crear blog y editar perfil

respectivamente.

La parte de contenido se decidió dividirlas en tablas las cuales son sin bordes para

una mejor presentación al usuario. Se creo una tabla general la cual no tiene un

scroll de movimiento, esto con la finalidad de que sea una tabla fija.

En la parte superior de la tabla general de contenido esta dividida en 5 columnas

en las que se puede ver:

Foto de perfil de usuario la cual se obtiene de la base de datos en la

columna 1.

Bienvenida al usuario, donde por medio de la id de usuario obtiene tu

nombre el cual proporcionaste a la hora de tu registro. Nos indica con

cuantos blogs contamos, cuantas publicaciones hemos realizado así como

la cantidad de comentarios, todo ello en la columna 2.

En la columna 3 se ven 2 links, con la finalidad del que el primero de ellos

te envié a la pagina de creación de nuevo blog y el segundo sin

funcionalidad a un, con el que se pretende que tengas las capacidad de

diseñar tu blog a tu medida, aplicando diferentes hojas de estilo.

La columnas 4 de nuestra tabla es para la búsqueda de una manera más

fácil y dinámica de nuestros blogs.

En la parte posterior a los ya mencionado se creo otra tabla, esta con la

funcionalidad de scroll, ya que será donde se observen todos los blogs con los que

25

el usuario cuenta, por tal motivo si el usuario cuenta con bastantes podrá hacer su

recorrido a través del scroll.

Esta tabla cuenta con dos columnas en las cuales usamos rowspan para indicar

que nuestras celdas ocuparan un espacio mayor al normal. En dichas columnas

almacenaremos la foto de perfil del blog (Columna 1) y nombre de blog y

publicaciones (Columna 2).

Para llenar esta tabla con los datos correspondientes a los blogs y post que se han

hecho en cada uno de ellos, se hace la consulta en nuestro archivo llamado

“class.php” donde se encuentran todas las operaciones correspondientes a los

blogs y al sistema en si, dichas operaciones son consultas a la base de datos, que

se encuentra en servidor de ipower.

Al lado derecho de la página, se observan anuncios, estos tienen el fin de que el

sitio pueda obtener beneficios económicos a través de ellos por medio de

comisiones.

Para el correcto funcionamiento de los anuncios se manda llamar los diferentes

archivos generales de la página, como son styles.css que nos permite darle el

diseño al estilo que se puede observar. También se usa el archivo anuncios.js

para dar el efecto y dinamismo a los mismos.

Como se menciono con anterioridad en el contenido se puede ver cada uno de los

blogs y post con los que el usuario cuenta, estos aparecen en forma de radio

button, ello con el fin de que al seleccionar un blog o un post te aparezca un menú

de opciones de las diferentes acciones que puedes hacer sobre estos contenidos.

El menú de opciones esta oculto en nuestra pagina con la aplicación de

JavaScript, sin embargo, al hacer clic sobre nuestro botón entre en funcionamiento

JavaScript de nuevo para hacer que aparezca nuestro menú. El diseño esta

26

generado con css y al igual que los demás estilos se encuentra en nuestro archivo

styles.css a través de la id.

El menú que se menciona no es más que simple links, que al hacer clic sobre ellos

toma la id del blog, y después mandarte a las páginas correspondiente a la opción

que elegiste.

Estructura de Index.php

La estructura planeada para el index.php es muy similar a la de home.php, se

crearon diferentes estilos en el archivo de styles.php. Que al igual son llamados

por medio de id. Antes de ello, en el header del documento HTML se hace

referencia a nuestro archivo styles.php con una etiqueta <link rel:> que con la que

referenciamos al archivo y el tipo de documento o lenguaje que es.

También en la parte superior nos encontramos con nuestro header, en donde

aparecen las certificaciones de la pagina como lo son w3 que nuestro validador

de paginas, el cual nos permite conocer e identificar si contamos con errores en la

codificación, y el caso de nuestro certificado que muestra que somos una empresa

sustentable que busca ayudar al medio ambiente. Se ve también, el logo de la

pagina y el link para iniciar sesión.

Pasando al contenido podemos ver del lado izquierdo los que dominamos nube

de etiquetas (Cloud Tag). Estas etiquetas son obtenidas de las base de datos por

medio de nuestra consulta que esta echa en el archivo de class.php. De donde de

las tablas de blog, comentarios y post se extraen los registros de los campos tag

que se encuentran en la tablas antes mencionadas.

Lo que se busca con esta nube de etiquetas es que al hacer clic sobre cada una

de estas te re direccione a blog que tenga que ver con el tema de interés.

En la parte derecha, de Cloud Tag, encontramos el acceso a nuestro home.php,

esto mediante el llenado del formulario que se muestra, en donde se te pide que

27

ingreses tu correo electrónico y contraseña. Al ingresar tus datos se da clic en el

botón de aceptar, el cual cumple con la función de validar el logueo, esto a través

de la función validar_logueo() la cual es mandada llamar desde el archivo

funciones.js desarrollado en JavaScript. De donde hace diferentes consultas a la

base de datos, en la tabla de usuarios. Si alguno de los datos no coincide te lanza

una notificación que se muestra durante 3 segundos. Estas notificaciones están

desarrolladas en jquery notification.

Estas notificaciones varían dependiendo del error que se allá cometido:

Datos en blanco: Le solicitara que ingrese en primer lugar su correo

electrónico.

Correo electrónico, sin contraseña: Le solicitara que ingrese una contraseña

Correo electrónico o contraseña incorrecta: Desplegara un mensaje de

correo electrónico o contraseña incorrecta.

Estructura Crear_Blog.php

Crear_blog como se menciono con anterioridad es fundamental para este sitio

web, ya que es por medio de esta que se podrá crear un blog que es en si la

esencia del sitio.

El procedimiento que sigue dicho formulario es llenar cada uno de los campos con

los que cuenta, los cuales son obligatorios para la correcta creación de un blog.

Primero se te solicita un titulo para tu blog, el cual el cliente elige a su

gusto.

Como segundo requerimiento se encuentra el de subir una imagen que

puede ser desde tu pc, o desde algún url que tu tengas.

Como tercer requerimiento será la selección de la url para tu blog, con el

cual aparecerá en la red.

28

Se tiene como cuarto punto la descripción del blog, que será donde se

comente todo lo relacionado con el tema en especifico que deseas

desarrollar

Selección de categorías las cual eliges a través de una ventana emergente,

esto con la finalidad de hacerlo de una forma mas dinámico.

Tags: A través de este campos tu podrás dar las palabras claves para que

en determinado momento los diferentes usuarios puedan dar con tu blog de

una forma mas fácil y sencilla.

Ventanas Emergentes

Una vez hecho toda la estructura, se decidió utilizar ventanas emergentes, para

los avisos, o alguna otra cuestión que lo ocupara, está compuesta por lo siguiente:

Esta librería se creó en JavaScript, lenguaje que corre en el navegador, se creó un

una caja con un 50% de opacidad de color negro, esta hace la función de fondo y

abarca toda la pantalla del navegador, así no se podrá acceder a las opciones de

la pantalla anterior que solamente se verá atreves del fondo.

Esta librería tiene el método de mostrar emergente que recibe como parámetro el

elemento de caja que se quiere mostrar y este lo posiciona automáticamente en el

centro con una posición del tipo fixed que posiciona la caja sin importar el orden

de las demás cajas. Además se agregó el método cerrar emergente que cierra la

última ventana creada, estas ventanas se guardan en una pila para poder ver la

última que se abrió e ir cerrando una por una. También pusimos métodos para

mostrar mensajes, confirmaciones u otro tipo de ventana que podamos usar como

la de selección mencionada anterior mente.

Entre las principales ventas emergentes que podemos encontrar están:

Seleccionar idioma; este permite que el usuario seleccione el idioma de su

preferencia (ingles o español) con la finalidad que a partir de su elección

puede tener acceso a su página, pero todo en su idioma preferido.

29

Selección de categorías: nos permite seleccionar entre las diferentes

categorías en las que podemos englobar nuestros blog, este con el fin de

hacer una pagina as dinámica y sin tanto contenido escrito.

Seleccionar videos de youtube: Mediante esta pantalla emergente se nos

permite pegar la url de un video de YouTube y así poder agregarlo a

nuestro editor de texto.

Llenar datos de perfil: Cuando eres un miembro no registrado e ingresas

desde alguna red social, no todos los campos de la tabla usuario son

llenados, por lo que es necesario que se edite el perfil para mostrar todos

los datos, es por ello que mientras no se edite, te aparecerá dicha

emergente asta que se cumpla con lo requerido.

30

9. Resultados obtenidos

Figura 1.Index. php

En la figura uno se puede ver la pantalla del index, donde los usuarios ingresan su

correo electrónico y contraseña para acceder al sitio, se puede ver los logotipos de

las redes sociales por si se desea ingresar a través de uno de esos medios.

Figura2. Crear_cuenta.php

31

En la figura dos podemos ver un formulario el cual se creo para el registro de

nuevos usuarios, donde se te pide que los llenes con tus datos personales

Figura 3. Crear_Blog.php

En la figura 3 se aprecia la pantalla para la creación de blog, en donde se te pide

que ingreses los datos correspondientes a tu nueva creación.

32

En la figura 4 se puede apreciar la ventana de editar_ perfil donde el usuario podrá

compartir su información personal con los demás usuarios.

Figura 5. Home.php

Donde el usuario podrá ver cada uno de sus blogs y podrá administrarlos

Figura 6. Blog x

33

En la figura 6 se obtener la vista de cada blog por separado.

Figura7. Editar_blog

Permite al usuario manipular su información cuando sea requerido.

34

10. Conclusiones y recomendaciones

En lo personal, el periodo de tiempo en el cual realicé mis estadías y en el cual me

desenvolví en el área de desarrollo web fue muy grato, ya que siento que logré

aprender un poco más.

Pienso que lo importante de todo esto, fue la práctica, como también el ir

desarrollando día con día, diferentes habilidades, tales como: el trato con las

personas, habilidades manuales, así como intelectuales, que se van adquiriendo

solamente con la práctica del día con día.

También así, me han ayudado a sentirme mas confiado de mis conocimientos

adquiridos. Ya que la práctica, te da la certeza de que al tener un problema,

posiblemente no sea resuelto de manera rápida, pero uno sabe que es posible

resolverlo y buscar la manera de hacerlo.

Mis recomendaciones para la carrera, con respecto a lo dicho anteriormente,

pienso que sería de gran ayuda, el que los profesores tuvieran más esa iniciativa

de la práctica.

Esto es que las materias del plan de estudios principalmente en lo que respecta a

las materias directamente relacionadas con la formación de un ingeniero en

sistemas, fueran mayormente practicas, la teoría también es muy importante en la

formación, pero si esta se queda solamente en teoría, es difícil comprender

completamente y de raíz las situaciones que se presentan ya estando en la

práctica. Por lo que me parece muy importante que se pudieran realizar estos

cambios y darle mayor importancia a la práctica de los conocimientos que se van

adquiriendo en el transcurso del estudio.

35

11. Retroalimentación

Fortalezas:

Yo pienso que algo que me beneficio al tiempo en el cual desarrollaba mis

prácticas, mas que conocimiento sobre la materia, en este caso php, fue la

capacidad que desarrolla uno como alumno para la investigación de nuevos

temas, los cuales no se tienen conocimiento alguno, pero se sabe que tienes la

capacidad para aprenderlo por tus propios medios. Ese miedo que se pierde en el

transcurso de la carrera y de la vida como estudiante es lo más gratificante que

me ha dejado la universidad, el saber que sí se puede aprender. De hecho en la

carrera, se piensa que el maestro tiene la responsabilidad de enseñar todo, lo que

no sabe es que uno mismo es el que terminará por aprender con la práctica y el

estudio, el maestro solo da las bases para ese aprendizaje.

Debilidades

Se puede decir que no es lo mismo ser un estudiante que realiza trabajitos para

determinada clase, a ser una persona que sale al mundo laboral con verdaderos

retos que afrontar. Dentro de las debilidades que experimente fue el poco

conocimiento del tema que hasta ese momento no era de mi total dominio. Lo cual

se vio reflejado en la solución de los problemas de una forma mas lenta de lo que

en realidad era.

Oportunidades

Dentro de las oportunidades que se pueden tomar o destacar es la posibilidad de

poder desarrollarte y crecer como persona y como profesionista con el aprendizaje

de nuevos temas, los cuales no dominabas con anterioridad. También se presenta

la oportunidad de aprender de personas con un amplio dominio de un tema en

especial de los cuales puedes tomar sus consejos ya que son personas con un

dominio mejor al tuyo.

36

Recomendaciones:

Dentro de mis recomendaciones estaría el que la carrera debería de dar mayor

oportunidad de crecimiento en cuanto a materias optativas se refiere, lo que quiero

decir es que el alumno deba de decidir que materias elegir no solamente las

materias que se abren en su departamento las cuales él puede elegir entre varias

materias, sino que también que pueda escoger materias impartidas en otras

carreras y departamentos del campus. Esto con el fin de que el estudiante pueda

relacionar de cierta manera las materias de su carrera con las de otras carreras,

ver las posibles relaciones de tu carrera en ámbitos digamos diferentes.

37

12. Referencias bibliográficas y virtuales

[1] < http://www.monografias.com/trabajos21/sistemas-informacion/sistemas-

informacion.shtml > [Consulta: 26 de Abril de 2012]

[2] < http://es.wikipedia.org/wiki/Sistema_de_informaci%C3%B3n > [Consulta: 26

de Abril de 2012]

[3] < http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web > [Consulta: 26 de Abril

de 2012]

[4] < http://jmpereda.wordpress.com/2007/08/24/definiendo-la-plantilla/ >

[Consulta: Abril de 2012]

[5] < http://www.angelfire.com/cantina/plan/index.htm > [Consulta: Abril de 2012]

[6] < http://es.wikipedia.org/wiki/MySQL > [Consulta: 27 de Abril de 2012]

[7] < http://es.wikipedia.org/wiki/HTML > [Consulta: 27 de Abril de 2012]

[8] < http://es.wikipedia.org/wiki/JavaScript > [Consulta: 27 de Abril de 2012]

[9] < http://es.wikipedia.org/wiki/AJAX > [Consulta: 27 de Abril de 2012]

[10] < http://es.wikipedia.org/wiki/NetBeans > [Consulta: 27 de Abril de 2012]

[11] < http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada > [Consulta: 27

Abril de 2012]

[12] < http://es.wikipedia.org/wiki/Realimentaci%C3%B3n > [Consulta: 27 de Abril

de 2012]