Hola bienvenidos a una nueva clase como ven ya tengo Sam corriendo y he ingresado al local Jost listo.
Esto se lo dejamos preparado para empezar a trabajar pero les quiero mostrar algo.
Miren yo he elegido dos páginas y tienen unas particularidades muy marcadas.
Miren esta es la página de Samsung sin ánimos de hacerle propaganda a nadie es simplemente un ejemplo
y como podemos ver yo creería que la mayoría de esta web es de contenido estático.
O sea cuando yo ingreso a Samsun puntocom simplemente veo una serie de textos imágenes descripciones
que son estáticos o sea salvo que Samsung haga una actualización de su web o cambia algún producto.
Esto es siempre lo mismo y no importa cuántas veces entre.
Por lo general va a estar todo igual.
A esto lo llamamos contenido estático es una típica web plana no hay mucha diferencia entre esta web
y un documento de Word al que le escribimos el texto y le ponemos fotos.
Pero miren ahora esta otra web que también elegí al azar esta web tiene muy poco contenido estático
y la mayoría de su contenido es dinámico la mayoría del contenido de esta web es generado a partir de
consultas supongo a servicios de meteorología pero es muy probable que si yo actualizo dentro de 15
minutos lo que yo veo acá es totalmente diferente.
De hecho a cada minuto va a ser diferente porque ya de entrada estoy viendo que me dice la hora.
Por ende cuando actualice dentro de un minuto esto va a cambiar.
O sea que acá no tengo todo contenido estático como les decía Por el contrario la mayoría cambia va
avanzando todo el tiempo me muestra un montón de información en tiempo real.
Entonces quería marcar estas diferencias entre una página estática y una página que tiene gran contenido
dinámico.
Y si bien desconozco a ciencia cierta qué sistema están utilizando por detrás para solventar todo todos
estos datos que se obtienen en tiempo real sospecho que puede ser PHP.
Pero más allá de eso nosotros cuando desarrollemos este tipo de páginas vamos a utilizar PHP para generar
todos estos datos que se forman a partir de consultas estimo yo que esta página por detrás en realidad
funciona de la siguiente manera.
Sí tiene algunas partes estáticas como es el logo.
A lo mejor el casillero este a donde se busca una ciudad o provincia y poca cosa más.
Luego el sistema lo que hace es generar con PHP probablemente a bases de datos o a otros servicios generar
consultas para ir rellenando todos los datos que van cambiando minuto a minuto a medida que se modifica
el clima.
Estos van a ser los desafíos que vamos a emprender nosotros.
Ahora bien no importa si hablemos de este caso o no importa si hablamos de este caso.
En ambos está involucrado de manera principal el HTML y el HTML.
Si bien muchos dicen que es lenguaje muchos dicen que está mal mal decir que es un lenguaje bueno creo
que técnicamente es un sistema de etiquetado el HTML es en definitiva una especie de Word a donde voy
a poder escribir texto o poner imágenes y formatear Flash hacer el texto más grande decir dónde va a
estar ubicado.
Eso es lo que arma cualquiera de estas webs.
La diferencia es que está dentro del HTML si hay parámetros que son llenados gracias a PHP por ejemplo
de manera dinámica.
Entonces bueno vamos a proceder a empezar a meternos en este mundo del HTML porque es fundamental que
conozcamos aunque sea un poco para poder avanzar sobre PHP.
Es una herramienta que necesitamos
así que me vengo a la parte izquierda a donde ya tengo Atom abierto me voy a ir a Phil a Prosoc folder
vamos a agregar una carpeta con la que vamos a trabajar.
Ahí vamos a tener todos nuestros proyectos.
Cuál va a ser esta carpeta de proyecto.
Bueno creo que va a ser cómodo que pongamos a HT docx ahí entonces acá ingreso.
Ustedes tienen una ruta diferente seguramente ya elegí HT docx le doy a abril y miren me aparece acá
a la izquierda en Atom un árbol de proyecto a donde tengo todas las carpetas.
Se acuerdan en Samguk hicimos una carpeta curso que de momento está vacía.
Bueno vamos a empezar a poner nuestros ejemplos correr corregir algo que no me quedó del todo bien para
que nuestras direcciones sean más amigables.
Lo que vamos a hacer es renombrar esta carpeta curso de click derecho rincãn le vamos a poner cursos
pero con minúscula.
Listo.
Hemos mejorado algo bueno adentro de esta carpeta curso vamos a ir haciendo nuestras prácticas.
Entonces como esta práctica es de HTML vamos a hacer clic derecho en curso y lo voy a poner New Folder
o voy a crear otra carpeta dentro de curso me voy a pedir el nombre y le voy a poner no sé ver HTML
nada más ya tengo bien con este signo de mayor que de espliego ya tengo la carpeta HTML creada me voy
a posicionar acá les voy a dar click derecho
New fail vamos a crear un nuevo archivo y lo vamos a poner prueba junto a HT m l listo.
Bueno observen algo de Atom.
Yo voy a tratar de transferirle todas las ventajas que le he encontrado a este editor de código.
Recuerden son todos buenos los últimos editores de código que han salido son excelentes Atom brackets
B.C coged cualquiera nos sirve suplentes.
Yo de momento Sotón y voy a tratar de contarles todos los trucos y tips que tienen.
Yo voy a aprovechar esta ventana esta pestaña que tengo acá para achicar la barra y que me quede más
espacio para trabajar bueno HTML.
Vamos a empezar con algo simple HTML es tan noble que siempre va a tratar de funcionar aunque nos equivoquemos
aunque no seamos prolijos.
Entonces miren yo voy a escribir acá a donde tendría que empezar a escribir el código de mi página o
poner algo simple.
Hola bienvenidos.
Pongo esto porque me resisto a poner el Hola Mundo.
Es muy básico en el mundo curs.
Miren cada vez que yo modifico el archivo presten atención acá arriba ven ahí que si saco el mouse se
ve un puntito azul eso me está indicando de que los cambios no han sido grabados.
Entonces no saquen la mirada del puntito azul.
Yo voy a presionar.
Ese es el Mac contra el S en Windows para grabar.
Miren cómo cuando Bravo desaparece el punto 1 2 3.
Listo.
Yo tengo la certeza de que esto está grabado.
Muchas veces pasa que yo me vengo aquí al lado a ver cómo funciona en mi código y no funciona.
No se modificó nada y fácilmente lo que hago es ver si tengo un puntito y digo Ah me olvidé de grabar.
Van a ver que es algo muy útil.
Bueno entonces me vengo a la derecha entro en curso me dice que no encuentra curso por qué y porque
eso lo había renombrado entonces tengo que actualizar.
Y miren como ahora sale con minúscula como corresponde bien vuelvo a darle curso tengo la carpeta HTML.
Miren todo tiene su lógica acá hasta HTML.
Entonces voy a entrar HTML y aparece nuestro archivo nuestra página que estamos creando.
Debía hacer click y ahí está nuestra primera web.
Aunque no lo crean prácticamente es simplemente texto.
No he puesto en ninguna etiqueta ningún código extraño para nuestros ojos pero vamos que HTML es mucho
más que esto en HTML.
Estas etiquetas que vamos a ver a continuación nos ayudan a formatear a posicionar dentro de la web
un código una imagen me va a permitir incorporar archivos de audio de video.
Veamos de qué se trata.
Por ejemplo vamos a citar alguna etiqueta y de paso a mostrarles que noble es Hatton.
Hay una etiqueta que se llama H1 o las etiquetas H que son para hacer encabezados.
En definitiva son distintos tipos de letra más grande o más pequeño H1 es la que hace el título más
grande y HD2 un poco más chico y H3 un poco más chico.
Cómo son las etiquetas.
Se conforman con un signo menor.
Ahora escribo el nombre de la etiqueta.
Estaba hablando justamente de la H1 y después un signo mayor para cerrarlas.
Bueno yo voy a decir que esto es una etiqueta de apertura H1.
Ahora necesito una etiqueta de cierre de etiqueta de cierre.
Es igual pero tiene una barra un slash antes del H1.
Entonces todas las etiquetas que abren se escriben así y las que cierran así por qué digo que abre y
cierra.
Claro porque entremedio es el texto que voy a poner a mi decir esto es un H1 y miren un buen programador
aprende a copiar y pegar eficientemente.
Copio y pego y voy a cambiar.
Voy a poner H2 y acá tengo que cambiar también H2.
Esto es un H2 y voy a escribir abajo.
Esto es sin nada.
Para que tengamos un muestrario digamos grave vieron desaparecio y puntito actualizo y miren esto es
un H1.
Este es un H2 esto es sin nada.
Se dan cuenta cómo viene la cosa.
Miren por ejemplo esto es sin nada que agregar.
Hola mi nombre es entonces miren hay una etiqueta que es una vez de Bold de negrita.
Si es así con esa Avro y con ésta cierro grabo y me voy a venir a ver acá los resultados actuales se
dan cuenta cómo a dónde abre nombre se pone en negrita y dónde la cierro.
Es donde termina el efecto de negrita.
En definitiva sería como cuando vamos a Word y pintamos a esto lo quiero en negrita en realidad por
detrás pasa algo parecido a esto
voy a cerrar acá para tener más espacio.
Bueno veamos alguna otra etiqueta
una etiqueta que vamos a usar muchísimo es la llamada Vive y acá aprovecho para contarles otra cosa
de Atom antes de entrar al Atom Atom es muy noble como todos los editores de código modernos y nos brindan
ayudas.
Una es miren cuando yo quiero hacer una etiqueta H1.
Simplemente escribo H1 enter y ya me lo abre y me lo cierra con qué pasa lo mismo.
Elijo acabé enter y ya me abrió me abrió y me cerró la etiqueta be larga.
Entonces yo les quiero mostrar ahora una etiqueta que se llama Drive de orientar y miren ya me pone
una propiedad que es class la clase que le vamos a dar.
Eso se lo vamos a ver más adelante no se preocupen.
Pero esta etiqueta Dir. van a ver que no tiene mayor efecto.
Hola probando voy a poner grabo el texto sale igual pero si sirve para generar divisiones dentro de
mi página partes.
Y a esas partes afectarlas con un formato en especial.
De todos modos poco a poco vamos a ir viendo esto.
Yo lo que quiero es que tengamos las herramientas básicas para trabajar.
Bueno cuando hacemos una página web miren en realidad la estructura es un poco más compleja pero como
les decía es tan noble el HTML que los navegadores siempre van a intentar responder a lo que hayamos
querido hacer y mostrar
un resultado coherente.
Por qué les digo esto.
Miren en realidad la estructura de la web o esqueleto se le suele llamar es mucho más complejo una web
tiene una estructura un esqueleto como el siguiente también basado en etiquetas como por lo general
es complejo y no lo sabemos de memoria.
Este esqueleto Atom nos ayuda.
Yo escribo HTML ya aparece la opción HTML presiona Enter y ahí lo tenemos.
Este es el esqueleto de una web básica si bien ya vamos a ver algunos detalles de que para qué sirve
cada una de estas etiquetas vamos a tener esta etiqueta title taichí como le quieran decir a donde entre
la apertura y el cierre vamos a escribir por ejemplo prueba HTML.
Voy a grabar porque les quiero mostrar el resultado.
Actualizo y qué cambio acá arriba.
El título de la pestaña ya sabemos que dentro de las etiquetas title lo que estamos modificando es el
título superior de la pestaña.
Hay otros parámetros que tenemos como el juego de caracteres que usamos el idioma sorbido poner que
mi página es en español para que el navegador sepa en qué idioma está.
Y si necesitáramos traducirla el navegador en este caso Google Crom sepa cómo traducirla.
Pero bueno no nos vayamos por las ramas.
La página en sí el contenido lo tengo que poner entre estas etiquetas Bodhi esta lo abre y cierra.
Cómo.
Cómo les podría ser si no tuvieran.
Si yo no tuviera las etiquetas Bodhi escribo Body enter y ahí está se abre se cierra y me lo deja listo.
Es como que no hay excusas es fácil.
Estas cosas están hechas para eso para que nos ayude.
Entonces el contenido de mi página se lo voy a cortar de acá abajo y lo voy a insertar donde en realidad
va Bravo.
Bueno ya tengo una página más formal más como se debe hacer.
Sin embargo cuando yo le doy a actualizar no cambia nada.
Por eso que les decía HTML es muy noble.
Los navegadores también y aunque tengamos errores van a tratar de representar lo más correctamente el
contenido bueno y algo importante.
Seguramente cuando yo pegué el esqueleto te habrás asustado decís Yo me acordaré de todo esto.
Te ponés a pensar.
Eso me pasó a mí.
Uy qué complicado que es cuántas cosas me tengo que aprender todo esto no es muy probable que con el
tiempo se te lo aprendas de memoria.
Pero ya casi nadie se lo sabe de memoria simplemente venimos HTML y ya está.
Tenemos el esqueleto.
No te asustes.
Bueno voy a volver como estaba el ejemplo porque por las dudas quiero dejar esto también en el área
de contenidos de esta clase y a ver no me quiero ir sin mostrarles otras etiquetas que hay muchas pero
jugando también con no abrumar.
No quiero mostrarles demasiada información todavía con respecto a las etiquetas y los aliento por supuesto
a profundizar si tienen ganas.
Hay una etiqueta super importante que es Fórum mediante y esto es un formulario porque porque acá adentro
voy a poder poner otra etiqueta como ésta imput escribí Im y ya me la está proponiendo a Tom.
Bueno qué es.
Le doy enter y ya se me armó la etiqueta imput por qué quería mostrarles esta etiqueta porque hay excepciones
en cuanto al tema de que toda etiqueta tiene una apertura y un cierre una apertura como acá y un cierre
hay excepciones por ejemplo form tiene apertura pero también tiene un cierre cierra acá abajo las etiquetas
imput no tienen cierre son una excepción simplemente se ponen así imput.
Cómo ven cada etiqueta tiene ciertas propiedades que yo puedo aceptar cuando sea el turno.
Veremos de qué sirve para qué sirve cada una de ellas.
No es para nada complejo pero les quiero mostrar qué es esto y para qué sirve.
Miren desgrabar me vengo acá a la derecha y que apareció acá un casillero.
Esto es el típico casillero que usamos para rellenar por ejemplo un formulario de contacto o donde más
se usa esto.
Mirá cómo dónde a dónde más yo entro a cualquier página como Facebook y con lo que me encuentro es con
formularios para poner usuario y contraseña para registrarme.
Y si no miren un clásico si voy a Google.
Qué es esto que tengo acá y un imput de un formulario.
Miren vamos a ver si esto es cierto o estoy inventando algo.
Le doy click derecho acá hago inspeccionar si me va a abrir esta barra a la derecha que me va a permitir
inspeccionar el código HTML con el que esté hecho esta página y miren lo que me marca imputen obviamente
tiene un montón de características especiales porque es nada más y nada menos que un imput de Google.
Pero en definitiva es un input bueno volvamos a nuestro ejemplo miren qué otras etiquetas dentro de
un formulario puedo poner un botón porque medio sin botón no hacemos nada.
Esta sí tiene de apertura y de cierre.
Y acá entre medio proponer enviar.
Miren lo que pasa acá al lado.
Ya grabé actualizo.
Listo.
Esto es típico para ponerle una contraseña.
Aprieto enviar y se envía.
Bueno así se arman las páginas.
Una etiqueta que también se suele usar es ésta.
Be Here se le puedo ser así solita sin más nada sin cerrar o se puede usar la de cierre sola también.
A mí me gusta usar esta miren para qué sirve.
Con el masajista respondo cada una de estas etiquetas.
Deja un salto de línea un espacio en blanco.
Por eso miren cómo puse estas etiquetas entre el casillero y el botón mirais apareció acá una separación.
Bueno creo que ya tenemos los conceptos básicos para empezar a trabajar con PHP apoyándonos en HTML
pero les dejo un link de doble tres Skulls donde hay muchísima información ejemplos y es muy útil muy
útil para tenerlo como fuente de consulta.
Muchas gracias por la compañía.
Nos vemos en la próxima clase.