Proyecto final
Junto con tus compañeros de exposición, elaboren un producto Web basado en el contenido temático de la materia.
Deberán organizar su tiempo y actividades a realizar, generando estrategias para coordinarse y colaborar en equipo.
Tipo de proyecto
El proyecto a realizar puede ser una de dos opciones (tipo a / b). Depende de tu preferencia y del dominio de tecnología:
Sitio informativo - Proyecto tipo A
El proyecto tipo "A", consiste en crea un sitio informativo en una de las siguientes categorías:
- Temático sobre gustos y/o afinidades
- Para un negocio real
- Basado en un sitio / negocio / personaje
Con base en la categoría de sitio que elijan, deben proyectar la seriedad del trabajo que realicen. Manifestar congruencia y equilibrio en la parte estética y estructural del sitio.
Los elementos que debe cubrir el proyecto final son los siguientes:
- Organizado
- Congruente
- Limpio
- Estético
- Estructurado
- Integración de los temas del curso:
- Configuración de fondo y texto
- Colores en HTML, colores seguros para la Web
- Configuración y organización del texto en la página
- Efectos simples y avanzados en el texto
- Secuencias especiales
- Separación de bloques de texto
- Tablas
- Párrafos
- Enlaces
- Encabezados
- Formularios
- Sangrías
- Fuentes externas
- Metaetiquetas
- Listas en CSS
- Galería de imágenes
- Crear una cuenta en Google
- Implementar Google Analytics
- Implementar Search Console - Herramientas para Webmaster de Google
- Ícono (favicon) del sitio Web
- Seccion y formulario de contacto
- Tiempo de descarga menor a 3 segundos
- Validar el sitio Web con W3C
- El sitio Web deberá ser adaptable a smartphones
- Deberá contener al menos 10 páginas internas el sitio Web
El sitio Web deberá subirse a Internet en un Hosting
Ejemplos de proyectos
Trabajos realizados por alumnos del Profesor
Sistema Web - Proyecto tipo B
El proyecto tipo "B", consiste en digitalizar un comprobante físico, a través de formularios en HTML con PHP y MySQL. Para guardar, editar y eliminar registros en una base de datos.
Una vez digitalizado el formato físico, realiza un sistema CRUD, a través del siguiente procedimiento:
- Crear una base de datos
- Crear tablas, campos dentro de la base
- Agrega registros a la tabla
- Enviar datos de la base a las páginas
- Crear una interfaz Web
- Agrega formularios con los campos necesarios a llenar
- Valida los formularios
- Conectar PHP con MySQL
- Enviar datos a la base a través de formularios
- Editar registros desde la página web
- Eliminar registros desde la página web
- Subir el sistema a Internet a un hosting gratuito/paga
- Hacer pruebas del sistema en línea
El sistema CRUD deberá subirse a Internet en un Hosting
Ejemplos de proyecto final
Compañera Sayra
Compañero Jadai
Modo de entrega del proyecto:
La presentación será presencial en el aula y tendrá una duración máxima de 10 minutos por equipo. El día de entrega es el 16 de Mayo.
Presentación de Proyectos
Fecha de entrega: 16/05/2024
Tipo de actividad: Grupal
El líder del equipo presentará a los integrantes del proyecto y ofrecerá una breve introducción del trabajo realizado. Posteriormente cada integrante compartirá sus actividades realizadas en el proyecto.
La presentación de proyectos se realizará en el salón de clases el día 16 de Mayo de 2023 a la 1:00 pm., el orden será por equipos de exposición bajo la siguiente dinámica:
Tiempo | Actividad |
---|---|
1:00 pm | Acceso a la reunión |
1:05 pm | Inicio de la reunión |
1:06 pm | Pasar lista de asistencia |
Exposición por orden de equipos |
|
10 min. | Presentación del proyecto |
2 min. | Observaciones, sugerencias y preguntas por alumnos y profesor |
2 min. | Defensa del proyecto |
Cierre de las presentaciones |
|
2:50 pm | Conclusión y finalización de la presentación |
Exposición
Realizaremos una única exposición por cada equipo para concluir la teoría correspondiente a nuestra materia. A continuación se presenta la formación de equipos así como la repartición de temas.
Listado de equipos para exposición
Equipo 1:
- Francia Mardueño Soltero líder
- Leonardo Morales López
Temas:
- Cookies en PHP
- Sesiones en PHP
- Archivos de texto en PHP
- Bucles en PHP
- Fundamentos de bases de datos
- Creando la primera base de datos
- Altas, bajas, modificaciones y consultas en MySQL
- Tipos de datos en MySQL
Equipo 2:
- Abraham Ortiz Padilla líder
- Abraham Ponce Avila
Temas:
- Diseño Web Responsive
- Dreamweaver
- Bootstrap
- CMS
- WordPress
- Accesibilidad Web
- Usabilidad Web
- Estándares Web
- Web Semántica
- Diseño del sitio
- Psicología del color
- Redes Sociales
- Sitio Web Vs Redes Sociales
Indicaciones para la exposición
Mandarán por equipos un único video con la exposición de los temas, ya sea adjunto en Classroom ó con un enlace a Youtube.
Procuren cuidar los siguientes aspectos generales durante el video:
- Presentación
- Dominio del tema
- Coordinación
- Tono, volumen y velocidad de voz
- Dicción
- Léxico
- Seguridad, sinceridad y entusiasmo
- Lenguaje no verbal
- Iluminación
Cada uno de los integrantes del equipo deberá de salir a cuadro explicando los temas asignados.
Puedes apoyarte de recursos visuales para reforzar la exposición, tales como:
- Mapas conceptuales
- Cuadros sinópticos
- Gráficas
- Fotografías
- Dibujos y pinturas
- Infografías
- Emoticones y gifs
- Garabatos
- Textos
- Etc.
Son a la libre creatividad de uso.
La duración mínima del video será de 15 minutos.
El líder del equipo coordinará la exposición y enviará el video junto con el nombre de los participantes dentro de la fecha límite.
Ejemplos de exposiciones
Comparto con Ustedes, algunos ejemplos de alumnos que subieron a Internet su exposición:
- Introducción a PHP por Jorge Ibarra
- Definición de contenidos por Jazmín Carrillo
- Valor de los contenidos por Orlando Torres
Actividad 3
Hola muchachos, buenos días ¿Cómo están?
Espero se encuentren bien, agradezco el esfuerzo al realizar su síntesis y gráfico para la parte teórica del curso.
Les comparto la tercera actividad, la cual consistirá en:
- Instalación de Software
- Formación de equipos
Instalaremos programas necesarios para llevar a cabo nuestras prácticas y ejercicios.
a) Instalación de Software
Tipo de actividad: Individual
Procederemos con la instalación de programas necesarios para poder realizar nuestros ejercicios del curso.
- Sublime text
- Navegador Web (chrome, firefox, edge, etc.)
- Editor gráfico (photoshop, fireworks, paint, etc.)
- Filezilla (versión cliente)
- XAMPP
- Dreamweaver (de preferencia la última versión)
- Bootstrap
- WordPress (sólo descargar)
Como recomendación, procura optar por el uso de Software libre.
b) Formación de equipos
Fecha de entrega: 2/2/2024
Tipo de actividad: Equipo
Consoliden grupos compuesto de mínimo 2 y máximo 4 integrantes para:
- Exposición
- Trabajos colaborativos
- Proyecto Final
Asignarán a un líder, quien será responsable de coordinar las actividades del equipo y me enviará el listado de los integrantes a más tardar el 2 de Febrero en la plataforma Classroom.
No se permitirá realizar las actividades de equipo en forma individual.
Mi intención es que aprendamos a colaborar a distancia y adquirir habilidades de:
- Comunicación
- Coordinación
- Negociación
- Compañerismo
- Honestidad
- Comprensión
- Paciencia
- Cordialidad y
- Compromiso
Son aptitudes y valores necesarios para cualquier trabajo en el sector Profesional.
Para los trabajos que son en colaboración a distancia, los invito a ser pacientes, cuidar la cordialidad, generar participación, comunicación y atención con sus compañeros de equipo.
Actividad 2
Hola chicos, buen día
Espero se encuentren bien, agradezco su participación en responder a la primera actividad a través de la plataforma Classroom.
La segunda actividad es individual y consistirá en:
- Lectura, análisis y síntesis
- Representación gráfica
Ambas tareas podrán entregarlas adjunto en la plataforma Classroom.
Les deseo que tengan un buen inicio de semana!
a) Lectura, análisis y síntesis
Fecha de entrega: 26/01/2024
Tipo de actividad: Individual
Llevar a cabo la lectura, análisis y comprensión de los siguientes temas y hacer una síntesis (no resumen) sólo en formato físico:
Historia y evolución de Internet
- Beneficios de tener una página Web
- Historia de Internet
- Evolución de la Web
- Elementos de un sitio Web
- Nombre de dominio
- Alojamiento Web
- Estándares Web
- World Wide Web
- Historia de HTML
- HTML, XHTML y HTML5
Estructura de la síntesis:
- Presentación
- Idea principal o directriz
- Explicaciones o justificaciones
- Argumentos
- Conclusión
El trabajo estará compuesto mínimo de 2 páginas escritas en papel, puedes tomar fotografías del trabajo o escanear tus documentos y enviarlos en un sólo archivo adjunto.
Agrega tu nombre en cada hoja, ejemplo de trabajo
Referencia de ayuda: ¿Cómo elaborar una síntesis?
La síntesis debe de ser clara, concisa y comprensible.
b) Representación gráfica
Fecha de entrega: 26/01/2024
Tipo de actividad: Individual
Con base en tu síntesis realizada, crea una representación gráfica, relacionando las ideas y conceptos principales de los temas analizados.
Utiliza una sola técnica de estudio, aquella con la que te sientas más familiarizado, por ejemplo:
- Mapa conceptual
- Esquema de llaves
- Diagramas
- Mapa mental
- Gráficos conceptuales
- Dibujos / Animación
- Otro
Para esta actividad, ten la libertad de utilizar cualquier instrumento físico ó digital, por ejemplo:
- Cmap Tools
- Xmind
- SmartDraw
- Word
- Power Point
- Prezi
- Draw.io
- LucidChart
- Hoja de papel en libreta
- Otro
Lo anterior tiene como intención obtener una visión integral de los temas, ordenar el conocimiento procesado y hacer evidentes los conceptos clave.
Presentación
Estimados alumnos:
¡Hola! ¿Cómo están? espero que se encuentren bien, me da gusto saludarlos.
Mi nombre es Hugo Delgado, este semestre seré su profesor en la materia Programación Web. Sean bienvenidos al ciclo escolar 2024A.
¿Cómo será la forma de trabajar?
El curso es online:
- ETAPA 1: Teoría, ejercicios, exposición y prácticas
- ETAPA 2: Desarrollo de proyecto y examen
¿Qué esperar del curso?
Diseñarás documentos web utilizando estándares de la industria como XHTML, HTML5 y CSS. Aplicar los conceptos de calidad en contenidos para la web (Accesibilidad, Portabilidad).
Programa de estudio y contenidos temáticos de la materia
¿Cómo será la comunicación con el Profesor?
La comunicación la haremos a través del correo institucional que nos ha proporcionado la Universidad de Guadalajara, así como la plataforma Google Classroom.
Comunicación por correo
Para poder identificar a qué materia perteneces, tus correos deberán de tener los siguientes puntos a considerar:
- Hacer uso de correo institucional
- Campo asunto: Número y nombre de la actividad - Nombre del alumno - Carrera
- Pie del mensaje: código, nombre, materia y carrera del alumno
¿Cómo se llevarán a cabo las actividades durante el semestre?
Comenzaremos conociendo los principios básicos de nuestra materia a través de lecturas de investigación.
Una vez habiendo estudiado los antecedentes, aplicaremos la teoría con ejercicios prácticos propuestos a lo largo del semestre. Serán ejercicios complementarios a las lecturas realizadas.
Por último, toda la teoría y ejercicios hechos los usaremos en un producto integrador a modo de proyecto.
Las actividades se realizarán bajo los siguientes criterios:
- Puedes utilizar cualquier instrumento, herramienta, tecnología o método para llevar a cabo las actividades propuestas
- Las actividades teóricas como: síntesis, mapas conceptuales, etc. serán realizados en físico con papel
- Puedes tomar fotografías del trabajo o escanear tus documentos y enviarlos adjunto, ejemplo: hojas resumen alumno
- Algunas actividades se realizarán de forma individual y otras en equipo
- La calificación de actividades y promedios del curso se publicarán en evaluación del curso
Entrega de actividades
Los trabajos se entregarán en la plataforma Classroom dentro de las fecha que se indique como límite de entrega.
Documentos adjuntos
En caso de que adjuntes una actividad en la plataforma Drive, considera brindar permisos a mi correo para acceder a tu tarea. No borres tu trabajo hasta finalizar el semestre.
Tiempos de entrega
La fecha límite para la recepción de actividades se indicará por correo, también se mostrará en esta misma sección y en la plataforma Classroom.
¿Cómo serán las asignaciones prácticas?
Consistirá en la solución de ejercicios prácticos, complementarios a la teoría que estudiaremos en el semestre.
¿Cómo será el examen?
Se realizará un único examen en línea al cierre del ciclo escolar. Les avisaré con anticipación, la fecha y procedimiento a seguir.
¿Dónde podré ver mis calificaciones?
Se ha creado una sección donde se agregarán las calificaciones de tus actividades en el semestre:
Comprueba que se encuentre tu nombre registrado.
¿Será necesario instalar Software?
Sí. Los programas a utilizar en el semestre son:
- Sublime text
- Navegador Web (chrome, firefox, edge, etc.)
- Editor gráfico (photoshop, fireworks, paint, etc.)
- Filezilla (versión cliente)
- Dreamweaver
- Bootstrap
¿Cómo es la forma de evaluación?
- Examen teórico 30%
- Actividades 40%
- Proyecto 30%
Recursos digitales
Herramientas y bibliografías
Artículos académicos
He preparado más de 500 artículos digitales que están a tu disposición en esta misma plataforma:
Videotutoriales
Se creó un canal en YouTube con 70 videos explicando los temas de clase que veremos en el semestre.
Presentación del Curso
Aprender a diseñar páginas web responsivas, atractivas y con posicionamiento en los primeros resultados de Google.- Tecnologías: HTML5, CSS, JavaScript, PHP, MySQL y WordPress
HTML5 y CSS
Lenguaje de Marcado de HipertextoPrimera página Web
Estructura HTMLColores HTML
Colores para fondo y textoPárrafos HTML
Saltos de línea en HTMLComentarios HTML
Con ejemplos ¿Para qué sirven?Formatos de texto
Negrita, cursiva y subrayadoTipografías HTML
Cambiar la fuente de la páginaAcentos HTML
Acute - Caracteres especialesLínea horizontal HTML
Tag <hr>Contenedor div
Organizar las cajas en HTMLListas HTML
Ordenadas y desordenadasEnlaces - Hipervínculos
Links internos y externosTablas HTML
Tag <table>Formularios HTML
Entrada de datos del usuarioIframe HTML
Incrustaciones multimediaAudio y video en HTML
Técnicas y formatosMeta tags HTML
Title, descripcion y keywordsMaquetación de página Web
Estructura de un sitio WebCómo subir una página Web a Internet
Elegir un hosting para mi sitioBootstrap
Qué es, para qué sirve y cómo instalarloPHP y MySQL
Creación de páginas Web dinámicas del lado del ServidorInstalación de XAMPP
Emulador de Servidor WebCombinar PHP y HTML
Primeros pasos con PHPInclude y Require PHP
Constructores de páginas WebComentarios en PHP
Documentar el código fuenteAlmacenar datos en PHP
Temporales y permanentesVariables en PHP
¿Para qué sirven?Comillas en PHP
Dobles o sencillasConcatenación en PHP
¿Para qué sirve?Constantes en PHP
¿Cómo se declaran?Enviando datos con PHP
Enlaces y formulariosFundamentos de Bases de Datos
Parte I - IntroducciónConectar PHP a MySQL
Parte II - ABMC / CRUDInsertar información en una Base de Datos
Parte III - Enviar datos de PHP a MySQLAprender WordPress
Sistema de Administración de Contenidos CMSInstalar WordPress en Servidor Local
Instalación y configuraciónEntorno de trabajo de WordPress
Configuración y personalizaciónInstalación de Plantillas y Plugins con WordPress
Configuración de WidgetsInstalar WordPress en Servidor Web
Instalación y configuración paso a pasoPublicar contenido en WordPress
Caso práctico con cliente realAprender Programación en Lenguaje C
Estructura Programa en Lenguaje C
El primer programaEntrada y salida de datos en Lenguaje C
Funciones de E/SMetodología para la creación de programas
Pasos en solución de problemasElementos básicos Lenguaje C
Fundamentos de ProgramaciónCondicionales en Lenguaje C
If, else, else if, SwitchBucles y ciclos en Lenguaje C
While, Do while y ForOperadores en Lenguaje C
Asignación, comparación, lógicos y aritméticosArrays y Matrices en Lenguaje C
Conjunto de datos del mismo tipoArchivos de texto en Lenguaje C
Abrir, cerrar, leer y agregar ficheros txtFuentes bibliográficas
- Creación y diseño Web, Matthew MacDonald
- Arrancar con HTML5, Herrera Ríos Manuel
- Diseño Web con CSS, Ralph G. Schulz
- Desarrollo Web con HTML5, Arce Anguiano Francisco Javier
- Diseño que seduce, Anderson Stephen
- Domine HTML y DHTML, José López Quijaldo
- Internet and Word Wide Web, Deitel Paul
- XHTML, Javascript y CSS, Juan Carlos Oros
- Diseño Web con CSS, Ralph G. Schulz
- Programación en Internet, Kris Jamsa, Ken Cope
- JavaScript 3a Edición, José López Quijaldo
- JavaScript & Ajax para diseño web, Tom Negrino
Herramientas digitales
- Biblioteca Digital de la Universidad de Guadalajara (4 millones de libros digitales)
- W3C School
- W3C Validator
- php.net