Listas ordenadas

Clase 21 de 67 • Curso de HTML5 y CSS3 2015

Vicente

student•

Al final pasa lo de siempre, que hay recurrir varias veces a la prueba y error para conseguir un efecto de posicionamiento determinado. No creo que eso sea malo cuando uno está haciendo su propio diseño, pero sí cuando lo está mostrando para que lo vean y entiendan otros. En la docencia sobre maquetación html y css, pienso que las cosas deben hacerse por el método correcto a la primera, sin tener que cambiar varias veces de táctica. No será la única forma de hacerlo pero enseñaremos una forma correcta de hacerlo. Creo que puede ser una buena estrategia para que el que está viendo la clase asocie finalmente cada acción con el resultado deseado. Me explico, poniendo un ejemplo inventado. Si para conseguir el alineamiento de una figura variamos primero un margen pero eso no sirve, luego hacemos una clase especial pero tampoco sirve y a continuación solo decimos que tenemos que añadir un contenedor más, y esto una vez detrás de otra, es muy difícil asociar causa con efecto, es complicado asociar la reacción del documento a nuestras acciones puesto que se llevaron a cabo muchas para que al final solo sirviera una. Claro que el que está realizando dichas acciones lleva bien la cuenta pero par él que solo observa es otra cosa. Pienso que en estos casos hay que ir por la vía directa y remarcar claramente cuando una acción no va a funcionar y de todas formas la queremos probar y enseñar.

No ocurre lo mismo con javascript, donde si se cometen errores de forma moderada, la labor de corrección de los mismos ayuda al razonamiento y la comprensión.

No obstante, por supuesto que se trata solo de mi opinión y mi gusto y ya se sabe que para gustos los colores.

La profesora es excelente.
Saludos
Vicent

Saul Ignacio Ibarra Arce

student•

Pero al ver lo que tu llamas "prueba y error" del profesor tienes la oportunidad de entender el proceso mental por el que pasó para llegar a ese resultado. Diras que es poco profesional, yo digo que es mas educativo, al fin y al cabo no aprenderas esto de memoria, es mejor aprender a pensar :D

Luis León

student•

Totalmente de acuerdo.

Ricardo Garrido Cruz

student•

Espero no moleste a nadie pero, siento que la profesora se complica muchisimo las cosas, hice el curso de "código facilito" de "mi primer pagina web" y no se complicaba tanto las cosas con una pagina web dinámica.

Luis León

student•

Considero que no se debe ofender ni poner en duda el conocimiento de nadie, pues la profesora refleja tener un vasto conocimiento de este y muchos más temas. Pero también es evidente que comete errores que se podrían haber evitado con una clase mejor preparada, y que de hacerlo, no confundirían a los estudiantes nuevos que son el publico objetivo de estos cursos desde 0.

Yeraldin Acevedo Acevedo

student•

A mi me funciono bien todo = )

Luis León

student•

Pues definitivamente no eres de este planeta, porque ni a la profesora le ha funcionado hasta el momento.
Yo ya lo resolví, pero porque ya tenía experiencia con otra escuela que explicaban mucho mejor. Maru sabe mucho, de eso no hay duda, pero les falta mucho en la parte de metodologías de enseñanza.

Esteban Figueroa

student•

al poner list-style: decimal; o cualquier otro me lo muestra en chrome pero en firefox me muestra solo 0 alguien sabe por que soy nuevo en esto probé poniendo list-style-type pero sigue igual incluso comente el import reset y aun así el problema persiste.

https://github.com/ebustosf/platzi-frontend

Ángela Pulido

student•

A mi me aparece lo mismo en Firefox, pero me parece que es problema de algún estilo, porque al quitarle la hoja de estilos, si me salio la numeración.

Ángela Pulido

student•

La propiedad que presenta el problema es:

.row {  
display:flex  
}

ADRIANA IRAIS MARTINEZ BIBIAN

student•

Yo soy una estudiante nueva, con cero conocimientos de html y css, apenas terminé el curso de programación básica, y me interesó tomar este curso, por lo que he de decir, que aunque cuestionen el método de enseñanza de Maru, a mi me parece entendible, ya que considero que el método está enfocado a la parte del razonamiento, es muy fácil para cualquier profesor decirte la manera más sencilla de seguir un proceso y llegar al resultado rápidamente, pero eso no es aprendizaje, a mi me queda claro que es también parte de nuestro papel como estudiante el investigar, intentar, equivocarnos también y buscar soluciones en base a un proceso de razonamiento. Así es la metodología que aplican muchas escuelas con modelos en línea, como la Universidad Nacional Autónoma de México, de la cual soy orgullosamente estudiante de la Licenciatura de Administración (la hago también en línea), y me gusta esta plataforma de enseñanza, porque abre la oportunidad de aprendizaje a cualquier persona que quiera aprender. Creo que la labor que hacen es admirable.

Manuel Galindez

student•

Mi opinión es que no se quejen tanto, disfruten cada cosa que les enseñan, e incluso al final de todo cada profesor nos enseña es cuestión de cada persona practicar y volvernos profesionales. Saludos

Luis León

student•

Aunque es un hecho que en esta área no debemos quedarnos solo con estas clases, tenemos derecho a quejarnos, a ser escuchados y a que todas nuestras dudas sean resueltas, para eso estamos pagando.

En mi caso, he aprendido que lo que buscamos por fuera, y lo que aprendemos en estos medios, se complementa y van resolviendo nuestras dudas, pero no culpo a quienes aun no lo saben, pero están en todo su derecho de quejarse cuando lo vean necesario.

Nancy Cruz

student•

No seria mas fácil poner un div del 100% dentro de cada li, donde agregamos la imagen con 100%. Algo así:

Arturo Jesus Martínez Sáenz

student•

Es una buena practica colocar los estilo en la hoja de estilos css. Eso sale a relucir cuando desarrollas proyectos profesionales (para clientes de verdad), que a diferencia de los de proyectos de prueba (lo que hacemos cuando estamos estudiando o por hobby) , contienen muchísimo código y debe cumplir un mínimo de estándares, ademas de los caprichos del cliente que te hace cambiar a cada momento el diseño y la distribución de tus elementos. Las buenas prácticas hacen que tu proyecto sea fácilmente mantenible (modificable y actualizable).

Juan

student•

mi opinion es una buena profesora

Arturo Jesus Martínez Sáenz

student•

Completamente de acuerdo con Saul Ibarra. Si quieres algo perfecto y sin errores puedes ver la documentación oficial del lenguaje. Pero el proceso mental para resolver los problemas es muy importante en el aprendizaje, ya que como programadores- por muy buenos que seamos y la experiencia que tengamos- siempre vamos a tener errores al desarrollar cualquier tipo de sistema, (si te sale de una no eres normal), la clave esta en como identificarlos y a partir de allí ir resolviéndolo. En mis proyectos yo tengo mas confianza cuando salen errores que cuando me sale de una porque eso no significa que no tenga errores, sino que probablemente algo estoy omitiendo o no estoy tomando en cuenta. Y como opinión personal, Maru es una de las mejores profesoras que he tenido en todos los cursos, no solo de platzi, sino de toda la web.

Jhonatan Ferney Ospina

student•

profe, no seria un poco mas facil solo crear una carpeta llamada img y en esta carpeta guardar las imagenes y solo seria enrutarlas algo asi.

<li class="col-3"><a href="#">
<img src="img/grumpy.png" alt="">
Grumpy Cat</a></li>

Roger Carlos Ariel Alba

student•

definitivamente es más facil, pero hasta donde entendi lo hace por razones de orden, de paso, eso afecta la parte semantica? el url de nuestras imagenes y carpetas?

Duvan Jimenez

student•

Se te hace fácil porque es un proyecto de cuatro imágenes o menos, pero ya que hagas algo en forma te darás cuenta porque lo dice, aunque Maru lo dice "Para hacer un trabajo mas ordenado y profesional", saludos :)

Margaret Fellerman

student•

El problema que ocurre con el header y section es simplemente que la propiedad de position es fixed, y debiera ser sticky para evitar romper el flujo, creo que así se podría solucionar

Margaret Fellerman

student•

En chrome no funciona esa propiedad :(

Jhon Anderson Rincon Cortes

student•

En google Chrome funciona bien, en IE 11 no aparecen ni las imágenes de los gatos, en mozilla existe el problema que comenta el compañero Negusun y en Edge existe problema con la imagen del header.

Nicolas Erices Mendez

student•

Entonces cual es el concepto de listas ordenadas y no ordenadas?

Diego Hernández Ramírez

student•

Que en las listas ordenadas se sigue un orden determinado y en las no ordenadas, el orden de los elementos no es importante.

Arturo Jesus Martínez Sáenz

student•

Con el uso del reset quitamos las propiedades por default. En la practica daria igual usar <ol>, <ul>, u otro tipo de lista (cuando hemos aplicado el reset). Sin embargo es una cuestión de semántica y de estándares, te ayuda a trabajar de una forma uniforme y organizada a la hora de desarrollar, pero sobre todo hace tu código profesional, fácilmente compatible y modificable, y cuando pase el tiempo y tengas que hacer cambios no sera difícil porque has seguido una convención.Por darte un ejemplo, es como el cable de tu internet que si te fijes en el conector siempre tiene el mismo código de colores, pero podria tener cualquier combinación de colores si el otro extremo es exactamente igual, en la practica funciona igual y no afecta, pero si quieres cambiar un conector y tienes en el otro extremo 100 conectores en tu switch y has utilizado un estándar no tienes que ir al otro lado a verificar cual fue la combinación que usaste (lo cual seria catastrófico). en este sentido ayuda a la mantenibilidad del proyecto. Es una cuestión de buenas prácticas.

Jhonatan Santofimio

student•

cual es el sistema de archivos? no veo si no un solo link 😦

Yeison Daza

student•

Hola Jhonathan, recuerda que esta es una versión antigua del curso, puedes encontrar la ultima actualización en https://platzi.com/cursos/html5-css3/

Luis Ricardo Orozco Ebratt

student•

Sugeriría preparar las clases para evitar estos inconvenientes, estuvo muy enredado.

Yeison Daza

student•

Hola, recuerda que esta es una versión antigua de este curso, puedes ver la ultima versión en platzi.com/html

Listas ordenadas

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase