INSTITUTO SUPERIOR

TECNOLOGICO PRIVADO “BITEC”

INFORME DE PRACTICAS INTERMEDIAS PRE PROFESIONALES DE LA

ESPECIALIDAD DE COMPUTACION E INFORMATICA

Autor:
Alum. CASTRO VALENTIN GARDIS GLENI

CHIMBOTE – PERÚ
2011
 ÍNDICE

DEDICATORIA ..........................................................................................................ii
INTRODUCCION ..................................................................................................... 3
1.1 Nombres y apellidos: ...................................................................................... 4
1.2 Institución ........................................................................................................ 4
1.3 Especialidad ..................................................................................................... 4
2. DATOS GENERALES DE LA EMPRESA ..................................................... 4
2.1 Razón social ..................................................................................................... 4
2.2 Dirección del centro de practicas .................................................................. 4
2.3 Periodo de practicas........................................................................................ 4
2.4 Total de horas ejercidas ................................................................................. 4
2.5 Área de trabajo ............................................................................................... 4
2.6 Supervisor de área .......................................................................................... 4
3. ACTIVIDADES REALIZADAS ....................................................................... 5
3.1 Mantenimientos de equipos informáticos. .................................................... 5
3.2 Diseño de formularios en front-end .............................................................. 6
3.3 Desarrollo de interfaces web. ......................................................................... 9
4. CONCLUSIONES ............................................................................................ 14
5. RECOMENDACIONES .................................................................................. 15

i
 DEDICATORIA

A Dios todopoderoso por darme Sabiduría y vida.

A la empresa WEB PERU 360 por

brindarme la oportunidad de realizar mis
Prácticas pre Profesionales intermedias.

A los docentes del Instituto Tecnológico

BITEC de la carrera de Computación e
Informática, por brindarme su apoyo y
capacitarme en cada clase.

Al Jefe de Prácticas pre Profesionales:

por apoyarme en todo momento y
enseñarme como se implementan los
sistemas web.

ii
 INTRODUCCION

Las Practicas pre – profesionales alimentan nuestros conocimientos a través de las

diferentes actividades que se pueden ejercer en este Periodo de Prueba.

En WEB PERU360 se realizaron diferentes actividades pasando por el área de

soporte, diseño web y programación. Donde se aprendió a diseñar formularios web de
lado cliente aplicando métodos estandarizados para el diseño de dichos formularios, a
programar interfaces web con el lenguaje de programación PHP y de manera muy
estructurada. Acumulando un total de 450 horas de prácticas, horas necesarias para
completar y culminar mis practicas pre – profesiones nivel intermedia.

Además, permitió tener más experiencia en el área de soporte ya que daba soluciones
a los equipos informáticos que presentaban fallas, también conocer más de cerca cómo
se desarrollan sistemas y páginas web en la realidad.

3
1. DATOS GENERALES DEL PRACTICANTE
1.1 Nombres y apellidos:
Castro Valentín Gardis Gleni
1.2 Institución
Instituto Superior Tecnológico Privado Bitec
1.3 Especialidad
Computación e Informática

2. DATOS GENERALES DE LA EMPRESA

2.1 Razón social
WEB PERU 360
2.2 Dirección del centro de practicas
Departamento: Lima
Provincia: Lima
Distrito: San -miguel
Dirección: av. la paz cuadra 12
2.3 Periodo de practicas
Fecha Inicio: 29-08-2016
Fecha Termino: 04-01-2017
2.4 Total de horas ejercidas
450 horas
2.5 Área de trabajo
Diseño y Programación
2.6 Supervisor de área
Ing. Elvis Castro

4
3. ACTIVIDADES REALIZADAS
3.1 Mantenimientos de equipos informáticos.
El mantenimiento de equipos informáticos constituye una acción, o
serie de acciones necesarias, para alargar la vida útil del equipo e
instalaciones y prevenir la suspensión de las actividades laborales por
imprevistos. Tiene como propósito planificar periodos de paralización
de trabajo en momentos específicos, para inspeccionar y realizar las
acciones de mantenimiento del equipo, con lo que se reducen
significativamente las reparaciones de emergencia
Gran parte de los problemas que se presentan en los equipos de cómputo
se pueden evitar o prevenir si se realiza un mantenimiento periódico de
cada uno de sus componentes.
Revisión Técnica Computadora Área Diseño:

5
 Revisión Técnica Laptop Toshiba Área administrativa

Mantenimiento laptop Hp g42 área Atención al Cliente.

3.2 Diseño de formularios en front-end

Como he comentado en la introducción los formularios sirven para
enviar información al servidor, ya sea para actualizar datos de alguna

6
cuenta, realizar una búsqueda en algún sitio web, cambiar los datos de
nuestro perfil. Cualquier gestión de este tipo se hace a través de
formularios y prácticamente cualquier web que no sea de consulta de
información contiene uno como mínimo.
Los ejemplos más típicos de usos de formularios son:
 Para iniciar sesión o registrarse en una web. Los formularios de
inicio de sesión de Facebook o Twitter.
 Para chats. Como el campo de enviar mensaje de la versión de
WhatsApp para web
 Los procesos de compra. Todos los formularios para introducir
tu dirección, el número de tarjeta, etc.
 La barra de búsqueda que hay en la página de Google.

7
8
 3.3 Desarrollo de interfaces web.
El concepto de interfaz es muy amplio y se refiere a todo sistema que
permite el contacto y la funcionalidad entre dos sistemas diferentes.
Por ejemplo, los botones y la pantalla del teléfono celular conforman la
interfaz, ya que permite que el usuario pueda emplear las funciones que
este aparato ofrece.
En definitiva, la interfaz web es el conjunto gráfico que permite la
presentación y la navegación del sitio.
Esto se consigue con la inclusión de elementos comunes a toda la web
que son estándares, haciendo que los usuarios tengan completo control
sobre las funcionalidades del sitio desde el momento mismo de entrar a
él sin que para ello deba tener amplios conocimientos ni preparación
anterior alguna.
Una página web puede contar con los mejores contenidos en el género
que se desarrolla, pero indefectiblemente fracasará si su interfaz no
permite un rápido y cómodo acceso a los mismos por parte de los
usuarios.
Por el contrario, una página web cuyos contenidos sean de menor
calidad (sin que éstos sean malos, por supuesto) pero cuya interfaz
permite que sus usuarios naveguen en forma sencilla, tengan acceso en
forma inmediata al contenido que desean e interactúen de forma fluida,
tendrá un mayor éxito.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la
WEB">
<link href="http://dominio.com/hoja-de-estilos.css"
rel="stylesheet" type="text/css"/>
</head>
<body>
<header>

9
 <h1>Título de la WEB</h1>
</header>
<nav>
<a href="http://dominio.com/seccion2.html">IR
SECCIÓN 2</a>
<a href="http://dominio.com/seccion2.html">IR
SECCIÓN 3</a>
</nav>
<section>
<article>
<h2>CONTENIDO PRINCIPAL</h2>
<p>Este es el contenido principal de mi web</p>
<div>
<p>Aquí tenéis una imagen.</p>
<img src="http://dominio.com/imagen.jpg"
alt="paisaje">
</div>
</article>
</section>
<aside>
<h3>Banner de publicidad</h3>
<a href="http://dominio-externo.com">
<img src="http://dominio.com/banner-
publicidad.png" alt="banner de publicidad">
</a>
<h3>Testimonios</h3>
<p>Me gusta mucho esta página.</p>
</aside>
<footer>
<h4>Avisos legales</h4>
<a href="http://dominio.com/aviso-legal">Política
de cookies</a>
<h4>Redes sociales</h4>
<a href="http://facebook.com/mi-pagina-de-
facebook">Mi Facebook</a>
</footer>
</body>
</html>

Anatomía del código HTML5 – Las partes y su significado.

DOCTYPE
<!DOCTYPE html>
La etiqueta doctype declara el tipo de documento, por lo que esta está
señalando que este es un documento HTML.

10
HTML
<html></html>
Delimita el documento HTML.
Atributo a destacar
LANG
<html lang="es"></html>
Indica el lenguaje de contenido del código.
HEAD
<head></head>
El elemento head delimita la cabecera del documento, entre sus
etiquetas contiene información como scripts, metadatos, estilos,
ubicación de documentos de estilos, título de la página, etc.
META
<meta name="description" content="Descripción de la WEB">
Las meta etiquetas se utilizan para identificar propiedades del
documento como por ejemplo el autor, el título y la descripción que
mostrarán los buscadores, etc.
META CHARSET
<meta charset="UTF-8">
Establece el tipo de codificación del documento.
META TITLE
<meta name="title" content="Título de la WEB">
Contiene el titulo que se mostrará en los buscadores.
META DESCRIPTION
<meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet"
type="text/css"/>
Esta etiqueta contiene un link a una hoja de estilos externa, la cual se
utilizará en este documento.

11
Atributo a destacar
HREF
Especifica la url donde se localiza la hoja de estilo.
BODY
<body></body>
La etiqueta body delimita el cuerpo del documento y contiene todo
aquello que podremos ver en nuestro navegador. Imágenes, textos,
enlaces, video, etc…
HEADER
<header></header>
El contenido de esta etiqueta debe ser la cabecera de nuestra página
donde se suele encontrar el título, el logotipo y poco más.
NAV
<nav></nav>
Esta etiqueta sirve para delimitar el menú de la página, donde
colocaremos los enlaces internos para movernos entre nuestras
diferentes secciones del sitio web.
A
<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>
Representa un enlace o hipervínculo.
Atributos a destacar.
HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6
<h1>Título de la WEB</h1>
<h2>CONTENIDO PRINCIPAL</h2>
<h3>Testimonios</h3>
<h4>Avisos legales</h4>
Estas etiquetas establecen los encabezados. Se organizan por niveles
siendo H1 el más importante y H6 el menos importante.
SECTION

12
<section></section>
La etiqueta section engloba una sección de texto, imágenes y otros
elementos que guardan cierta relación entre ellos. Normalmente
siempre le podremos poner un título o encabezado.
ARTICLE
<article></article>
La etiqueta article se suele encontrar dentro de una etiqueta section y
sirve para dividir y ordenar los contenidos en su interior.
DIV
<div></div>
Otra forma de dividir contenido para posteriormente aplicarle clases y
modificar su estilo.
P
<p></p>
Entre las etiquetas P colocaremos un párrafo de texto.
IMG
<img src="http://dominio.com/imagen.jpg" alt="paisaje">
Esta etiqueta coloca una imagen en el documento mediante un enlace.
Atributos a destacar.
ALT
Representa el texto alternativo, muy importante para que los buscadores
puedan obtener información de la imagen.
SRC
URL donde se encuentra la imagen.
ASIDE
<aside></aside>
Contiene información no vital o que no está estrechamente relacionada
con el contenido principal de la página como podrían ser banners de
anuncios, citas o enlaces externos.
FOOTER
<footer></footer>

13
 Aquí encontraríamos el código perteneciente al pie de página, donde se
suelen colocar los enlaces a textos legales, el copyright, etc.

4. CONCLUSIONES

Para que un sitio web sea efectivo y exitoso, debe lograr que uno como usuario
podamos acceder sin problemas, podamos tener facilidad de manejo de la página
y todos sus componentes y sentirse cómodo en forma permanente.

En cierta preparación y diseño se debe poner mucha y especial atención, ya que

una gran parte de éxito y fracasos de los sitios web depende de este elemento del
diseño.
La Usabilidad y Experiencia de Usuario (UX – User Experience), (dentro del
campo del desarrollo web) es la disciplina que estudia la forma de diseñar sitios
web para que los usuarios puedan interactuar con ellos de la forma más fácil,
cómoda e intuitiva posible.

La mejor forma de hacerlo es realizando un diseño centrado en el usuario,

diseñando para y por el usuario, en contraposición a lo que podría ser un diseño
centrado en la tecnología o uno centrado en la creatividad u originalidad.

14
5. RECOMENDACIONES
 Por encima de todo tienes que saber quiénes son tus usuarios, por dentro y
por fuera. Eso significa conocer todos los datos demográficos que una
aplicación analítica puede extraer. Pero lo que es más importante es saber
lo que necesitan y lo que les impide alcanzar sus metas.

 Define cómo las personas van a usar tu interfaz. Antes de diseñar debes
definir la usabilidad. Con la creciente prevalencia de dispositivos basados
en una pantalla táctil es una preocupación más importante de lo que podrías
pensar. Basta con mirar a Tinder: la experiencia de usuario de la aplicación
se define literalmente por la facilidad y la impulsividad de un simple toque.

 Establece expectativas. Muchas interacciones con un sitio o una aplicación

tienen consecuencias: hacer clic en un botón puede significar gastar dinero,
borrar un sitio web o hacer un comentario despectivo. En cualquier
momento hay consecuencias y también hay ansiedad

15
16